그리드(Grid)

웹 페이지는 마치 큰 도화지와 같습니다.

그림을 그릴 때 어떻게 색을 입히고 어디에 어떤 그림을 그릴지를 결정하는 것과 같이, 웹페이지를 만들 때도 어디에 어떤 요소를 배치할지를 결정해야 합니다.

CSS Grid는 웹서비스가 고도화 됨에 따라 복잡해진 레이아웃 배치 문제를 해결하기 위해 등장했습니다.

CSS Grid는 레이아웃을 체스판과 같은 Grid(격자)로 구성합니다.

체스판에는 여러 개의 정사각형이 있고, 각각의 정사각형에 체스 말을 배치합니다.

CSS Grid도 이와 비슷합니다. 웹페이지를 여러 영역으로 나누고, 각 영역에 원하는 요소를 자유롭게 배치합니다.

Grid는 그리드 요소들을 담는 Grid Container와 그리드 요소들을 의미하는 Grid Item으로 구성됩니다.

• Grid Container: 여러분들이 만들 격자판 전체를 의미합니다.

• Grid Item: 격자판 안에 들어갈 각각의 아이템들입니다.

복사
.container {
  display: grid; /* Grid 컨테이너 */
}

.item {
  /* Grid 아이템 */
  gap: 10px; /* 아이템 사이의 간격 */
  grid-column: 1 / 3; /* 가로로는 1번 칸에서 3번 칸 전까지 */
  grid-row: 1 / 2; /* 세로로는 1번 칸에서 2번 칸 전까지 */
}

위 코드에서 .container 클래스를 가진 요소는 Grid Container가 되고, 그 안의 요소들은 Grid Item이 됩니다.

Grid로 레이아웃을 구성할 때는 다음과 같은 속성들을 사용합니다.

grid-template-방향 속성으로 컨테이너를 가로로 몇 개, 세로로 몇 개의 칸으로 나눌지를 지정할 수 있습니다.

복사
.container {
  display: grid; /* Grid 컨테이너 */
  grid-template-columns: 100px 200px 100px; /* 가로로 3개의 칸, 각각의 칸의 너비는 100px, 200px, 100px */
  grid-template-rows: 50px 50px; /* 세로로 2개의 칸, 각각의 칸의 높이는 50px */
}

위 코드는 가로로 3개, 세로로 2개의 칸으로 나눈 격자판을 만듭니다.

grid-방향 속성은 아이템이 몇 번째 칸에 위치하는지 지정합니다. 시작점과 끝점을 지정해줄 수 있습니다.

복사
.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

위 코드는 그리드 아이템이 가로로는 1번 칸에서 3번 칸 전까지, 세로로는 1번 칸에서 2번 칸 전까지 위치하도록 지정합니다.

코드의 별표로 강조된 부분을 따라 입력해 보세요.