[CSS] Grid를 알아보자

Grid

flex가 줄에 대한 정렬이라면, grid는 행렬을 사용한 보다 정교하고 복잡한 정렬이다.

grid의 내부는 Lines, Track, Area, Gap이라는 영역으로 이루어져 있다.

 

• grid lines: 격자를 이루는 선의 집합으로 grid를 이루는 행과 열의 선 모두를 Lines라고 한다.
  • 행은 grid row, 열은 grid column라고 한다. 

• grid track: 평행한 grid의 두 줄 사이의 공간

• grid area: grid line 4줄로 둘러 쌓인 공간
  • 이렇게 4줄로 둘러 쌓이고 그 안이 더 이상 쪼개지지 않는 한 칸이라면 grid cell이라고 한다.
  • 이런 셀이 1개 혹은 그 이상일 때 이 공간을 grid area라고 한다. 

• grid gap: 행 여러 개와 열 여러 개 사이의 간격 (grid line의 두께)

---

Grid의 구성

flex처럼 컨테이너와 아이템들로 구성되어 있다. 사용하려는 grid 아이템들은 아래 코드처럼 grid 콘테이너 안에 담겨 있어야 한다.

이 때 display에 grid를 설정하면 block의 특성을 갖게 되고, inline-grid를 설정하면 inline의 특성을 갖게 된다.

<div class="grid-container">
	<header class="grid-item">Header</header>
	<section class="grid-item">Section</section>
	<section class="grid-item">Section</section>
	<aside class="grid-item">Aside</aside>
	<footer class="grid-item">Footer</footer>
</div>

---

grid-template-rows/columns

grid track의 크기를 정의하는 프로퍼티다.

grid track은 평행한 두 줄의 grid line으로 만들 수 있는데, 이 때 행에 해당하는 크기가 rows고 열에 해당하는 크기가 columns다.

 

 

rows랑 columns의 개념이 약간 헷갈리는데 일단 그러려니 하고 넘어가보자.

 

그런데 이 때 rows처럼 40px을 3번 쓰는 게 아니라 10번을 쓴다면 40px을 10번 써야 한다.

이런 불필요한 작업을 줄여주기 위해 repeat() 함수를 사용하면 간단하게 반복할 수가 있다.

첫 번째에 반복 횟수, 두 번째에 지정할 grid track의 크기를 넣어주면 된다.

grid-template-rows: repeat(10, 40px)

20px repeat(2, 30px), 20px 이런 식으로 중간에 사용할 수도 있다. (이러면 20px, 30px, 30px, 20px이 된다.)

 

fr

grid에는 fr(fraction)이라는 단위가 있는데, grid 콘테이너에 남은 공간의 비율을 나타낸다.

예컨대 grid 콘테이너의 너비가 500px이라면 grid-template-columns: 1fr 3fr 1fr로 설정할 때 100px, 300px, 100px의 비율로 나눌 수가 있게 된다.

---

grid-template-areas

grid area의 이름을 할당할 수 있다.

아래와 같이 grid 아이템들을 배치하고 거기에 grid-area 프로퍼티로 이름을 붙였다.

 

See the Pen grid-areas by summermong (@summermong) on CodePen.

 

같은 이름의 grid area끼리 합쳐져서 CSS에서 토탈 9칸을 할당했지만 붙어서 나오고 있다.

이러한 grid-template-areas의 값은 ""로 한 행을 표현하고, 여러 행을 띄어쓰기로 구분한다.

 

이 때 구성한 모양이 직사각형이 아니면 적용되지 않는 점을 주의해야 한다.

아래 코드와 같이 같은 grid track에 해당되지 않는 경우는 레이아웃이 무너져 버린다.

grid-template-areas: /* ㄴ 모양 ❌ */
		"hd hd hd"
		"nav content ad"
		"nav nav ft";

grid-template-areas: /* ㅗ 모양 ❌ */
		"hd hd hd"
		"nav ft ad"
		"ft ft ft";

 

만약 공간을 비우고 싶다면 .이나 none을 적어 grid area를 비워줄 수 있다.

---

grid-row-gap/column-gap

각 행과 열 사이의 간격을 조정한다.

둘을 합쳐서 그냥 grid-gap으로 쓸 수 있다.

이 때 첫 번째 값을 row-gap, 두 번째 값을 column-gap으로 지정한다.

 

See the Pen grid-gap by summermong (@summermong) on CodePen.

 

grid-row-gap, grid-column-gap을 수정해보면 간격이 조정됨을 알 수 있다.

---

flex만 써보고 이전에 드림코딩에서 grid 살짝만 들어봐서 한 번 알아봤다. 🫠

flex가 훨씬 익숙해서 grid 개념이 좀 생소하게 느껴지는데 틀을 구축하는 데에는 용이한 것 같기도 하다.