[CSS] CSS Grid 정리 / 1. Grid Container

[CSS] CSS Grid 정리 / 1. Grid ContainerWeb, Front-end2022. 8. 21. 00:00@junyeokk

Table of Contents

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;
}

개발자 도구(F12)에서 Grid가 어떻게 적용되어 있는지 확인할 수 있습니다.

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;
}

grid-auto-columns: 250px; (+ grid-auto-flow: column;)

728x90

저작자표시

'Web, Front-end' 카테고리의 다른 글

ESLint 예시를 통해 활용하기 (0)	2023.11.03
[CSS] CSS Grid 정리 / 2. Grid Item (2)	2022.08.27
[CSS] CSS Grid 정리 (0)	2021.11.20
[Javascript] 객체 (0)	2021.04.18
[Javascript] 자료형 (0)	2021.04.18

@junyeokk :: 나무보다 숲을

컴퓨터 전공 관련, 프론트엔드 개발 지식들을 공유합니다. React, Javascript를 다룰 줄 알며 요즘에는 Typescript에도 관심이 생겨 공부하고 있습니다. 서로 소통하면서 프로젝트 하는 것을 즐기며 많은 대외활동으로 개발 능력과 소프트 스킬을 다듬어나가고 있습니다.

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!