📚 Grid를 통해 깔끔한 CSS 레이아웃 설정하기
앞선 글을 통해 Flexbox를 활용하면 유연하게 CSS 레이아웃을 설정할 수 있다고 학습하였다. Grid는 Flexbox와 비슷하게 효과적으로 CSS 레이아웃을 설정하는데 도움을 주는데, 때로는 Flexbox보다 Grid를 쓰는 것이 더 효과적이고 깔끔하게 CSS 레이아웃을 설정할 수 있다.
그렇다면 Grid는 무엇인지, 언제 Grid를 사용해야 하는지, 그리고 Grid는 어떻게 사용하는지에 대해 알아보자.
Grid(그리드) 정의 및 역할
📌 Grid란
Grid란 CSS에서 레이아웃을 설정하기 위한 위한 2차원 레이아웃 시스템이다.
Grid를 통해 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능을 사용 가능하다.
📌 Flexbox vs Grid
Flexbox와 Grid 사이의 주요 차이점은 '차원'에 있다.
Flexbox는 한 방향(수평 혹은 수직)의 레이아웃을 위한 1차원 시스템이다. 반면에, Grid는 행과 열을 동시에 다루는 2차원 레이아웃 시스템이다. 따라서 레이아웃을 구성할 때 이러한 차원적 특성을 고려하여 Flexbox와 Grid 중 하나를 선택하여 사용한다.
- Flexbox: 한 방향 레이아웃을 위한 1차원 시스템
- Grid: 행과 열을 포함하는 2차원 레이아웃 시스템
📌 Grid 역할
Grid에서는 격자를 나누고, 간격을 정하고, row나 column의 크기를 미리 정하고, 내가 원하는 위치에 여러 칸에 걸쳐서 배치하고, 요소에 이름을 붙여서 배치하는 등의 역할을 수행한다.
- 격자 나누기: grid-template-rows(columns)
- 간격: gap
- 크기 미리 정하기: grid-auto-rows(columns)
- 원하는 위치에, 여러 칸에 걸쳐서 배치: grid-row(column), span
- 이름으로 배치: grid-area, grid-template-areas
Grid 사용법
📌 Grid 기본 설정법
display 속성을 grid 로 하고 grid-template-columns 속성으로 column을, grid-template-rows 속성으로 row를 나누어 그리드를 설정 가능하다.
그리드 기본 설정법을 예제 코드를 통해 살펴보자. 예를 들어 3 x 2 그리드를 만드는데, column 너비는 각각 100px, 200px 100px이고 row 너비는 150px 200px라면, 아래와 같이 쓸 수 있다.
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 150px 200px;
/* cf> 한 번에 설정도 가능
grid-template: 150px 200px / 100px 200px 100px; */📌 유연한 크기 단위: fr
기본 설정법에서 grid를 px단위로 설정하였다. 하지만 px단위로 설정하게 되면, 그리드의 크기가 고정되어 그리드를 담고있는 컨테이너의 크기가 작아지거나 커질 때 이미지가 삐져나오거나 빈 공간이 생기는 등의 문제가 발생할 수 있게 된다.
그렇다면 grid에서 flexbox처럼 유연하게 크기를 지정할 수 있는 방법이 없을까? fr 단위를 사용하면 flexbox처럼 전체 크기에 대해 상대적인 값을 지정할 수 있다.
grid-template-columns: 1fr 1fr 1fr; /* 1:1:1의 크기로 3개의 열을 생성 */
grid-template-rows: 150px 200px;📌 최소, 최대값으로 크기 정하기: minmax()
minmax() 함수를 사용하면 최솟값과 최댓값 사이에서 grid의 크기를 유연하게 조절할 수 있다. 이 때, fr은 최솟값에는 사용하지 못하고 최댓값에만 사용 가능하다.
grid-template-columns: repeat(3, minmax(200px, 1fr)); /* 3개의 열을 생성, 각 열의 최소 너비는 200px, 최대 너비는 1fr */
grid-template-rows: 150px 200px;📌 간격 넣기: gap
flexbox에서 사용했던 방법과 마찬가지로, gap 속성으로 column과 row 사이의 간격을 설정할 수 있다.
grid-template-columns: repeat(3, minmax(200px, 1fr));
grid-template-rows: 150px 200px;
gap: 20px 10px; /* row-gap: 20px; column-gap: 10px; */📌 그리드 자동 크기 설정: grid-auto-rows
grid-templete에서 row 크기를 명시적으로 정하지 않았을 때, grid-auto-rows 속성을 사용하면 그리드 내의 자동 생성된 row의 크기를 지정할 수 있다. 예를 들어, grid-auto-rows: 100px;을 설정하면, 명시적으로 크기가 정해지지 않은 row는 모두 100px의 높이를 가진다.
이 속성은 그리드 레이아웃에서 '동적 콘텐츠'를 다룰 때 특히 유용하다.
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
📌 원하는 위치에 요소 배치: grid-column / grid-row
특정 그리드 라인을 지정하여 요소를 배치할 수 있다.
아래 코드는 2번 column 라인에서 4번 column 라인까지, 1번 row 라인에서 3번 row 라인까지의 공간에 요소를 배치한 예를 보여준다.
grid-column: 2 / 4;
grid-row: 1 / 3;📌 이름으로 배치하기: grid-area / grid-template-areas
grid-template-areas 속성으로 영역에 이름을 붙이고, grid-area 속성으로 해당 영역에 요소를 배치 가능하다.
body {
grid-template-areas:
'sidebar main'
'player player';
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.player {
grid-area: player;
}Outro
Flexbox와 마찬가지로, Grid 역시 웹 페이지 레이아웃을 다채롭고 유연하게 구성하는데 큰 역할을 한다. 그러나 Grid는 행과 열을 모두 관리하기 때문에, 적절히 활용하면 큰 장점이 되지만, 2차원 레이아웃이 필요하지 않은 상황에서는 오히려 유연성을 잃을 위험이 있을수도 있겠다라는 생각이 들었다.
따라서, 웹 레이아웃을 구상할 때는 전체 구조와 레이아웃을 심도깊게 고민해보고 특히, '차원'이라는 개념에 주목하여 Flexbox와 Grid 중 어느 것을 선택할지를 신중하게 결정하는 자세를 가져야겠다.
