이번 포스팅에서는 Grid에 대해 정리해볼까 합니다.
1분 코딩님의 Grid 블로그를 바탕으로 작성한 포스팅이니 참고 부탁드립니다. 감사합니다.
🙌 Grid란?
CSS에서 Grid는 웹 페이지 레이아웃을 위한 2차원 레이아웃 시스템입니다.
Grid를 사용하면 컨테이너 내에서 아이템을 행과 열로 정렬할 수 있으며 각 요소를 그리드의 ‘셀’ 내에 배치하여 각 셀의 크기, 위치, 간격 등을 세밀하게 제어할 수 있습니다.
또 다른 레이아웃 시스템인 Flex와의 차이점은 Flex는 한 방향 레이아웃 시스템(1차원)이고 Grid는 두 방향(가로-세로) 레이아웃 시스템(2차원)입니다.
사진 출처 : 1분 코딩님의 Grid 블로그
그렇기 때문에 Flex보다 Grid가 더 복합적인 레이아웃 표현이 가능합니다.
⚙️ Grid 사용방법
우선 Grid 레이아웃을 만들기 위한 기본적인 HTML 구조는 Flex와 마찬가지로, 컨테이너와 내부에 아이템들이 있으면 됩니다.
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
<div class="item">G</div>
<div class="item">H</div>
<div class="item">I</div>
</div>위의 코드에서 item들을 감싸고 있는 부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고, 자식 요소인 div.item들을 Grid Item(그리드 아이템)이라고 부릅니다.
컨테이너는 Grid의 영향을 받는 전체 공간을 의미하고, Grid의 속성 설정에 따라 각각의 아이템들이 어떤 형태로 배치시킬 수 있는 것입니다.
우선 Grid 설정을 해주기 위해선 감싸고 있는 부모 요소인 컨테이너에 display: grid;를 설정해주셔야 합니다.
.container {
display: grid;
}📝 Grid 관련 용어 정리
Grid의 형태는 아래와 같으며 관련 용어를 정리해보도록 하겠습니다.
사진 출처 : 1분 코딩님의 Grid 블로그
1. 그리드 컨테이너 (Grid Container)
display: grid를 적용하는, Grid의 전체 영역을 의미합니다. Grid 컨테이너 안의 요소들이 Grid 규칙의 영향을 받아 정렬됩니다.
2. 그리드 아이템 (Grid Item)
Grid 컨테이너의 자식 요소들입니다. 해당 아이템들이 Grid 규칙에 따라 정렬됩니다.
3. 그리드 트랙 (Grid Track)
Grid의 행(Row) 또는 열(Column)을 의미합니다
4. 그리드 셀 (Grid Cell)
Grid의 한 칸을 의미합니다. 그리드의 아이템 하나가 들어가는 가상의 공간이라 생각하시면 됩니다.
5. 그리드 라인 (Grid Line)
Grid 셀을 구분하는 선입니다.
6. 그리드 번호 (Grid Number)
Grid 라인의 각 번호를 의미합니다.
7. 그리드 갭 (Grid Gap)
Grid Cell 사이의 간격을 의미합니다.
8. 그리드 영역 (Grid Area)
Grid 라인으로 둘러싸인 사각형 영역으로, Grid Cell의 집합을 의미합니다.
📝 Grid 속성
Grid의 속성들은 Flex와 마찬가지로 두 가지로 분류됩니다.
- 컨테이너에 적용하는 속성
- 아이템에 적용하는 속성
display: grid;
Grid 컨테이너에 설정해주는 속성입니다. 컨테이너가 주변 요소들과 어떻게 배치될지 결정하는 값입니다. inline-grid는 inline-block처럼 동작합니다.
grid-template-rows, grid-template-columns
그리드 형태를 정의하는 속성으로 컨테이너에 Grid 트랙의 크기들을 지정해주는 속성입니다. 여러가지 단위를 사용할 수 있고 섞어서 사용할 수도 있습니다.
.container {
grid-template-columns: 200px 200px 500px;
/* grid-template-columns: 1fr 1fr 1fr */
/* grid-template-columns: repeat(3, 1fr) */
/* grid-template-columns: 200px 1fr */
/* grid-template-columns: 100px 200px auto */
grid-template-rows: 200px 200px 500px;
/* grid-template-rows: 1fr 1fr 1fr */
/* grid-template-rows: repeat(3, 1fr) */
/* grid-template-rows: 200px 1fr */
/* grid-template-rows: 100px 200px auto */
}위의 예시에서 grid-template-columns: 200px 200px 500px;는 column을 200px, 200px, 500px로 정의하는 것입니다.
fr은 fraction으로 숫자 비율대로 트랙의 크기를 나눕니다. 만약 1fr 1fr 1fr이라 설정하면 균일하게 1:1:1 비율로 column 크기를 지정하겠다는 의미입니다.
.container {
grid-template-columns: repeat(5, 1fr);
/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr */
}만약 위 코드의 repeat는 반복되는 값을 자동으로 처리할 수있는 함수입니다. repeat(반복횟수, 반복값)으로 사용하게 됩니다.
.container {
grid-auto-rows: minmax(100px, auto);
}grid-auto-rows를 사용하면 통제를 벗어난 즉, 들어오는 row 수를 모르더라도 알아서 크기를 세팅해줍니다.
auto-fill과 auto-fit
auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채웁니다.
.container {
grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}위의 예시에서는 auto-fill의 크기를 20%로 설정했으므로, 1개의 row에는 5개의 셀이 들어갑니다.
사진 출처 : 1분 코딩님의 Grid 블로그
마지막 행에서는 셀의 개수가 5개보다 모자르기 때문에 빈공간으로 두게 됩니다.
auto-fit은 아래와 같이 남는 공간을 꽉채웁니다.
사진 출처 : 1분 코딩님의 Grid 블로그
gap 설정
그리드 셀 사이의 간격을 설합니다.
.container {
row-gap: 10px;
/* row의 간격을 10px로 */
column-gap: 20px;
/* column의 간격을 20px로 */
}
.container {
gap: 10px 20px;
/* row-gap: 10px; column-gap: 20px; */
}
.container {
gap: 20px;
/* row-gap: 20px; column-gap: 20px; */
}각 셀의 영역 지정
이 속성은 Grid 아이템에 적용하는 속성으로, 각 셀의 영역을 지정합니다.
grid-column-start
grid-column-end
grid-column
grid-row-start
grid-row-end
grid-row
사진 출처 : 1분 코딩님의 Grid 블로그
위의 그림에서 1부터 4까지의 Grid 라인 번호가 매겨져잇는데 이 번호를 이용해서 column과 row의 범위를 결정합니다.
.item:nth-child(1) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.item:nth-child(1) {
grid-column: 1 / 3;
grid-row: 1 / 2;
}이렇게 설정하게 되면 아래 그림과 같이 그리드 아이템의 크기가 지정됩니다.
사진 출처 : 1분 코딩님의 Grid 블로그
정렬
컨테이너에 적용하는 속성으로 align-items는 아이템들을 세로 (column 축) 방향으로 정렬하며 justify-items는 아이템들을 가로 (row축) 방향으로 정렬합니다.
.container {
align-items: stretch;
/* align-items: start; */
/* align-items: center; */
/* align-items: end; */
}
.container {
justify-items: stretch;
/* justify-items: start; */
/* justify-items: center; */
/* justify-items: end; */
}align-self, justify-self
개별 아이템의 세로, 가로 정렬에 사용되는 속성입니다.
align-self는 아이템을 세로축 방향으로 정렬하고 justify-self는 아이템을 가로축 방향으로 정렬합니다.
.item {
align-self: stretch;
/* align-self: start; */
/* align-self: center; */
/* align-self: end; */
}
.item {
justify-self: stretch;
/* justify-self: start; */
/* justify-self: center; */
/* justify-self: end; */
}