![[CSS] CSS Grid 정리 / 1. Grid Container](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcchKok%2FbtrJAcCzmby%2F9bcWZEIe8BgAqUQsl8XktK%2Fimg.png)
Grid Container
1. 그리드 템플릿
그리드는 행과 열로 정해집니다. 행에 몇 개의 Item이 들어갈 지, 열에 몇 개의 Item이 들어갈 지 결정합니다. 이 때, 그리드 트랙이 정의됩니다.
(그리드 트랙이란, 그리드에 그려진 두 라인 사이의 공간입니다.)
1-1. grid-template-rows
.container {
grid-template-row: 150px 150px;
}
그리드의 행에 놓일 아이템들의 크기와 갯수를 정할 수 있습니다.
1-2. grid-template-columns
.container {
grid-template-columns: 150px 150px 150px 150px;
}
그리드의 열에 놓일 아이템들의 크기와 갯수를 정할 수 있습니다.
응용하면 아래와 같습니다.
<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>
.item-1 {
background-color: #1F2041;
}
.item-2 {
background-color: #4B3F72;
}
.item-3 {
background-color: #C1DFF0;
}
.item-4 {
background-color: #2D898B;
}
.item-5 {
background-color: #44CFCB;
}
.item-6 {
background-color: #276FBF;
}
.item-7 {
background-color: #F03A47;
}
.item-8 {
background-color: #E4572E;
}
.container {
display: grid;
grid-template-row: 150px 150px;
grid-template-columns: 150px 150px 150px 150px;
}
2. 그리드 간격
그리드의 아이템 사이에 간격을 설정할 수 있습니다.
2-1. grid-row-gap
그리드 아이템의 가로 행 간격을 설정할 수 있습니다. (HTML 코드는 위와 동일합니다.)
.container {
grid-row-gap: 30px;
}
2-2. grid-column-gap
그리드 아이템의 세로 열 간격을 설정할 수 있습니다.
.container {
grid-column-gap: 30px;
}
2-3. grid-gap
아래 예시와 같이 모든 방향에 동일한 간격을 설정하려면 더 짧은 코드로 작성할 수 있습니다.
.container {
grid-gap: 30px;
}
응용하면 아래와 같습니다.
.container {
display: grid;
grid-template-row: 150px 150px;
grid-template-columns: 150px 150px 150px 150px;
grid-gap: 30px;
}
3. 그리드 정렬
그리드의 아이템들을 행 방향 혹은 열 방향으로 정렬합니다.
3-1. justify-items
그리드의 아이템들을 행 방향으로 정렬합니다.
값(value) | 작동 방식 |
start | 시작점(왼쪽)에 정렬 |
center | 가운데 정렬 (수평) |
end | 끝점(오른쪽)에 정렬 |
stretch | 행 축을 채우기 위해 아이템을 늘림 |
.container {
justify-items: start;
}
.container {
justify-items: center;
}
.container {
justify-items: end;
}
.container {
justify-items: stretch;
}
3-2. align-items
그리드의 아이템들을 열 방향으로 정렬합니다.
값(value) | 작동 방식 |
start | 시작점(위쪽)에 정렬 |
center | 가운데 정렬 (수직) |
end | 끝점(아래쪽)에 정렬 |
stretch | 열 축을 채우기 위해 아이템을 늘림 |
.container {
align-items: start;
}
.container {
align-items: center;
}
.container {
align-items: end;
}
.container {
align-items: stretch;
}
3-3. justify-content
그리드의 콘텐츠들을 행 방향으로 정렬합니다.
값(value) | 작동 방식 |
start | 시작점(왼쪽)에 정렬 |
center | 가운데 정렬 (수평) |
end | 끝점(오른쪽)에 정렬 |
stretch | 행 축을 채우기 위해 그리드 콘텐츠를 늘림 |
space-between | 제일 왼쪽에 있는 아이템은 시작점에, 제일 오른쪽에 있는 아이템은 끝점에 위치하고 나머지는 고르게 정렬 |
space-around | 각각의 아이템 좌우에 여백을 고르게 정렬 |
space-evenly | 모든 여백이 같게 정렬 |
.container {
justify-content: start;
}
.container {
justify-content: center;
}
.container {
justify-content: end;
}
.container {
justify-content: space-around;
}
.container {
justify-content: space-between;
}
.container {
justify-content: space-evenly;
}
3-4. align-content
그리드의 콘텐츠들을 열 방향으로 정렬합니다.
값(value) | 작동 방식 |
start | 시작점(위쪽)에 정렬 |
center | 가운데 정렬 (수직) |
end | 끝점(아래쪽)에 정렬 |
stretch | 열 축을 채우기 위해 그리드 콘텐츠를 늘림 |
space-between | 제일 위쪽에 있는 아이템은 시작점에, 제일 아래쪽에 있는 아이템은 끝점에 위치하고 나머지는 고르게 정렬 |
space-around | 각각의 아이템 상하에 여백을 고르게 정렬 |
space-evenly | 모든 여백이 같게 정렬 |
.container {
align-content: start;
}
.container {
align-content: center;
}
.container {
align-content: end;
}
.container {
align-content: space-around;
}
.container {
align-content: space-between;
}
.container {
align-content: space-evenly;
}
4. 암시적 그리드와 명시적 그리드 (Implicit Grids vs. Explicit Grids)
명시적 그리드는 grid-template-rows와 grid-template-columns로 직접 정의한 행과 열로 이루어진 그리드를 말합니다. 암시적 그리드는 명시적 그리드를 제외한 부분입니다.
명시적으로 정의된 그리드 밖에 배치할 땐 더 많은 그리드 트랙이 필요하게 됩니다. 따라서 자동적으로 암시적 그리드에 새로운 행과 열을 만들게 됩니다. 이렇게 해서 생긴 트랙은 기본적으로 크기가 자동으로 정해지지만, 아래에 나와있는 방법으로 지정해줄 수 있습니다.
4-1. grid-auto-rows
암시적 그리드 트랙의 행 크기를 정해줍니다.
grid-template-rows와 grid-template-column로 명시적 그리드 트랙의 행 크기를 150px로 정해줍니다.
이 때, 암시적 그리드 트랙의 행 크기는 250px로 정해주면 아래와 같이 적용됩니다.
.container {
grid-template-rows: repeat(2, 150px);
grid-template-columns: repeat(3, 150px);
grid-auto-rows: 250px;
}
4-2. grid-auto-columns
암시적 그리드 트랙의 열 크기를 정해줍니다.
grid-template-rows와 grid-template-column로 명시적 그리드 트랙의 행 크기를 150px로 정해줍니다.
이 때, 암시적 그리드 트랙의 열 크기(grid-auto-columns)는 250px로 정해주면 아래와 같이 적용됩니다.
.container {
grid-template-rows: repeat(2, 150px);
grid-template-columns: repeat(3, 150px);
grid-auto-columns: 250px;
}
...? 적용이 되어있지 않은 모습을 볼 수 있습니다. 왜 이런 현상이 발생하는 걸까요?
5. 그리드 배치
답은 그리드 배치 방식에 있습니다. 그리드에 명시적으로 배치되지 않은 아이템이 있을 경우 자동으로 배치 되도록 설정할 수 있습니다.
5-1. grid-auto-flow
grid-auto-flow의 속성 값에 따라 배치 작동 방식이 달라집니다.
값(value) | 작동 방식 |
row | 각각의 행을 차례대로 배치함. 필요하면 새로운 행을 추가 (기본값) |
column | 각각의 열을 차례대로 배치함. 필요에 따라 새로운 열을 추가 |
(row) dense | 각각의 행을 차례대로 배치함. 이 때, 빈 영역을 메움 |
column dense | 각각의 열을 차례대로 배치함. 이 때, 빈 영역을 메움 |
.container {
grid-template-rows: repeat(2, 150px);
grid-template-columns: repeat(3, 150px);
grid-auto-columns: 250px;
grid-auto-flow: row;
}
.container {
grid-template-rows: repeat(2, 150px);
grid-template-columns: repeat(3, 150px);
grid-auto-columns: 250px;
grid-auto-flow: column;
}
dense를 적용하기 전에, 일단 지금의 요소들은 정사각형이어서 빈 영역을 메울 틈도 없이 정갈하게 잘 들어갑니다. 따라서, 인위적으로 크기를 변경해 row와 (row) dense를 비교해보겠습니다.
일단, 기존의 css에서 각각의 요소들 grid 값을 조정해주겠습니다.
.item-4 {
background-color: #2D898B;
grid-column: 1 / span 2;
}
.item-5 {
background-color: #44CFCB;
grid-column: 1 / span 3;
}
.item-6 {
background-color: #276FBF;
grid-column: 1 / span 2;
}
이와 같이 css를 적용해놓고 grid-auto-flow를 적용하면 다음과 같이 표시됩니다.
.container {
grid-auto-flow: row;
}
이 사진에서 볼 수 있듯 row 속성에서는 한 줄씩 들어가면서, 크기가 되지 않아 들어가지 않는 요소들은 밑으로 내려버리고 크기가 되는 요소들은 그대로 넣는 것을 알 수 있습니다.
이번엔 grid-auto-flow에 row dense를 적용해보겠습니다.
.container {
grid-auto-flow: row dense;
}
row와 다르게 빈 부분에 (들어갈 수 있는 크기가 되면) 들어가는 것을 알 수 있습니다.
요약하자면,
- 순서대로 넣되 크기가 되지 않으면 요소를 밑으로 빼 새로운 행에 넣어주는 것이 row 속성입니다.
- 순서대로 넣되 크기가 되지 않으면 요소를 밑으로 빼지만 나중에 빈 부분에 들어갈 수 있는 크기가 나온다면 넣는 것이 row dense 속성입니다.
이번에는 column과 column dense를 비교해보겠습니다. row와 마찬가지로, 정사각형 요소들을 조금 변형하여 Grid를 구성 후 살펴보겠습니다. 기존의 코드에서 다음과 같이 변경해줍니다.
// grid-auto-columns: 250px;
.item-3 {
background-color: #C1DFF0;
grid-row: 1/ span 2;
}
.item-4 {
background-color: #2D898B;
grid-row: 1 / span 2;
}
.item-5 {
background-color: #44CFCB;
grid-row: 1 / span 3;
}
.item-6 {
background-color: #276FBF;
grid-row: 1 / span 2;
}
이와 같이 css를 적용해놓고 grid-auto-flow를 적용하면 다음과 같이 표시됩니다.
.container {
grid-auto-flow: column;
}
row일 때와 마찬가지로 남은 공간이 없다면 다음 column으로 넘어가는 것을 알 수 있습니다.
이번엔 grid-auto-flow에 column dense를 적용해보겠습니다.
.container {
grid-auto-flow: column dense;
}
row dense와 마찬가지로 빈 부분에 (들어갈 수 있는 크기가 되면) 들어가는 것을 알 수 있습니다.
다시 4-2로..
grid-auto-flow를 기본값으로 설정하면 암시적 그리드 트랙을 추가할 때 새로운 행의 암시적 그리드 트랙을 추가하기 때문에 grid-auto-columns의 적용값을 볼 수 없었던 것입니다. 만약 grid-auto-columns의 적용값을 보기 위해서 새로운 열을 추가하는 식으로 코드를 작성해야 합니다.
.container {
grid-template-rows: repeat(2, 150px);
grid-template-columns: repeat(3, 150px);
grid-auto-columns: 250px;
grid-auto-flow: column;
}
'WEB > CSS' 카테고리의 다른 글
[CSS] CSS Grid 정리 / 2. Grid Item (2) | 2022.08.27 |
---|---|
[CSS] CSS Grid 정리 (0) | 2021.11.20 |
컴퓨터 전공 관련, 프론트엔드 개발 지식들을 공유합니다. React, Javascript를 다룰 줄 알며 요즘에는 Typescript에도 관심이 생겨 공부하고 있습니다. 서로 소통하면서 프로젝트 하는 것을 즐기며 많은 대외활동으로 개발 능력과 소프트 스킬을 다듬어나가고 있습니다.
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!