[CSS] Grid

1. Grid란?

Grid란 웹 페이지의 레이아웃을 디자인하고 구성하는 데 사용되는 CSS 레이아웃 시스템이다. 그리드 레이아웃을 사용하면 웹 페이지의 요소들을 행과 열의 그리드로 배치할 수 있으며, 복잡한 레이아웃을 더 쉽게 관리할 수 있다.

 

2. Grid Container

Grid Items를 포함하는 부모 요소다. 속성을 설정하면 각각의 아이템들이 설정한 형태로 배치된다.

.container {
  display: grid;
}

container에 display: grid; 설정해야 한다.

 

2.1 grid-template-columns 및 grid-template-rows

그리드의 열과 행을 정의하는 속성이다. 각 열과 행의 크기는 여러가지 값과 단위로 설정할 수 있다.

.container {
  grid-template-columns: 1fr 2fr 1fr; /* 3개의 열을 정의 */
  grid-template-rows: auto 100px;     /* 2개의 행을 정의 */
}

 

fr

fr은 전체 크기에 대해 상대적인 값을 지정할 수 있다.

.container {
  grid-template-columns: 1fr 1fr 1fr;  /* 1:1:1 비율인 3개의 열 */
  grid-template-rows: 150px 2fr 200px; /* 고정 크기와 섞어서 사용 가능 */
}

 

repeat 함수

repeat은 반복되는 값을 자동으로 처리할 수 있는 함수다.

repeat(반복횟수, 반복값) 형식으로 작성할 수 있다.

.container {
  grid-template-columns: repeat(4, 1fr); /* 1fr 1fr 1fr 1fr */
}

 

minmax 함수

minmax는 최솟값과 최댓값을 지정할 수 있는 함수다.

minmax(최솟값, 최댓값) 형식으로 작성할 수 있다.

.container {
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

위 코드는 화면 너비가 작아지더라도 열의 너비는 200px보다 작아지지 않고, 화면 너비가 넓어지면 열의 너비는 1:1:1 비율로 늘어나도록 처리한다.

 

auto-fill

auto-fill은 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채운다.

.container {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

위 코드는 컨테이너의 크기가 아이템들을 수용하기 충분하지 않을 경우 아이템을 자동으로 줄 바꿈 처리한다.

 

2.2 gap

그리드 셀 사이의 간격을 지정한다.

.container {
  gap: 30px; /* row-gap: 30px; column-gap: 30px; */
}

.container {
  gap: 10px 20px; /* row-gap: 10px; column-gap: 20px; */
}

 

 

2.3 grid-template-areas

각 영역에 이름을 붙이고 그 이름을 이용해서 배치하는 속성이다. 그리드 레이아웃을 더 직관적으로 정의할 수 있다.

참고로 이름 대신 마침표(.)를 쓰면 셀을 비워놓게 된다.

.container {
  grid-template-areas:
    "header header header"
    "side main ."
    "footer footer footer";
}
.header {
  grid-area: header;
}
.side {
  grid-area: side;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

 

3. Grid Items

Grid Container의 자식 요소들이다. 

 

3.1 grid-column 및 grid-row

grid item이 차지하는 열 및 행 범위를 지정한다.

column line은 왼쪽에서 오른쪽으로, row line은 위에서 아래쪽으로 번호를 붙인다. 바깥 테두리도 grid line에 포함된다.

span 쓰면 멸 개의 셀을 차지하게 할 것인지 지정해줄 수도 있다.

.item {
  grid-column: 2 / 4;   /* 2번부터 3번 열까지 */
  grid-row: 1 / span 3; /* 1번에서 3칸 */
}

 

3.2 grid-area

grid item이 차지하는 영역의 이름을 지정한다.

container에 grid-template-areas와 같이 쓰인다.