CSS - Grid Layout Module

CSS Grid Layout Module ✍

 

Grid Layout를 정리해봅니다.

---

0. Flex와 Grid
1. 속성 & 메소드 & 개념 요약
2. 기본 사용법
  - display: grid
  - grid-template-
  - minmax()
  - grid-gap
3. Cell 활용하기
  - grid cell & lines
  - grid-template-areas
  - auto
4. 실습 (feat. picsum.phtos)
  - picsum.photos
  - grid-template-areas

📖 references:
CSS Grid Layout Module https://www.w3schools.com/css/css_grid.asp
CSS Grid Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
드림코딩-CSS Grid… https://www.youtube.com/watch?v=nxi1EXmPHRs
code-sandbox 실습 https://codesandbox.io/s/css-display-grid-18m3b8?file=/src/styles.css

---

CSS Grid Layout Module 🖼

CSS Grid layout module, 줄여 말해 Grid로 Grid-based layout system을 만들 수 있어요.

페이지를 주요 영역으로 나누어 관리하거나 HTML 요소의 크기, 위치, 관계를 정의합니다.

---

0. Flex와 Grid

종류	정렬 기준	부모에 지정	부모 컨테이너	자식 요소
Flex	한 축(axis)을 기준으로 정렬	display: flex	flex-direction, align-item, gap	flex: grow shrink 크기
Grid	두 축을 사용하여 2차원 배치	display: grid	grid-template-.., grid-auto-…, grid-area, row-gap, column-gap	grid-row, grid-column

CSS의 flex box는 row, column과 같은 한 축(axis)을 기준으로 현재 축/반대 축을 정렬하는 반면,

 

grid는 2차원적으로 아이템을 배치할 수 있습니다. 👍

 

float과 positioning 없이 자유롭게 레이아웃을 그릴 수 있고,

 

 

flex와 적절하게 사용한다면, 반응형 및 유동적인 레이아웃을 손쉽게 그릴 수 있습니다.✨

 

2차원으로 Grid를 그리기 위해서 알아두어야 할 속성, 표기법, 개념은 다음과 같습니다.

 

---

1. 속성 & 메소드 & 개념

공부할 개념을 먼저 알아봅니다.🧙‍♂️

현재 페이지를 간단하게 요약한 표입니다, 추가 학습이 필요하다면 링크의 docs를 확인해주세요!

속성	내용	링크
grid-template	grid-row, grid-column, grid-area를 정의 / grid 레이아웃을 만듦	https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template
grid-auto-..	row, column의 수와 상관 없이, 정해진 크기를 자동으로 지정합니다. ex) grid-auto-columns: 1fr	https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
grid-auto-flow	그리드가 흐르는 방향을 지정합니다.	https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
grid-row, grid-column	row와 column의 각 요소의 grid를 지정합니다.	https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
gap, row-gap, column-gap	gap 크기을 지정합니다.

표기법	내용	링크
minmax()	min보다 크거나 같고, max보다 작거나 같은 범위를 지정합니다.	https://developer.mozilla.org/en-US/docs/Web/CSS/minmax
repeat()	repeat할 횟수만큼 범위를 지정합니다.	https://developer.mozilla.org/en-US/docs/Web/CSS/repeat
fr	몇 배만큼 유연한 공간을 차지할 지, 비율을 나타냅니다.	https://yamoo9.gitbook.io/css-grid/css-grid-guide/fr-unit
span	차지할 칸 수를 나타냅니다. (table의 colspan, rowspan과 같음)

용어	개념	링크
Grid Cell	한 칸	https://developer.mozilla.org/en-US/docs/Glossary/Grid_Cell
Grid Lines	그리드의 방향 / 칸의 좌표 (1부터 시작, -1은 마지막부터)	https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines
Gutters	아이템+gap이 위치한 영역	https://developer.mozilla.org/en-US/docs/Glossary/Gutters
Grid Area	그리드를 구성하는 하나 이상의 그리드 셀(직사각형)	https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas

 

 

이제 좀 더 자세하게 알아볼게요🕵️‍♀️

 

실습을 위해 다음과 같이 10개의 자식 item을 가진 부모 container를 만들었습니다.

<div class="container">
  <div class="item1">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. A nisi
  </div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
  <div class="item4">item4</div>
  <div class="item5">item5</div>
  <div class="item6">item6</div>
  <div class="item7">item7</div>
  <div class="item8">item8</div>
  <div class="item9">item9</div>
  <div class="item0">item0</div>
</div>

 

---

2. 기본 사용법

 

display: grid;

부모 컨테이너에 display 속성을 추가합니다.

.container {
  display: grid;
}

 

grid-template-

column과 row의 갯수, 크기를 지정할 수 있습니다.

 

1. 고정된 크기일 때

// 다음과 같이 왼쪽부터 한 영역씩 크기를 정합니다.
grid-template-columns: 100px 100px 100px 100px;

// repeat로 축약할 수 있습니다.
grid-template-columns: repeat(4, 100px);

💡  repeat(갯수, 크기)로 반복할 횟수, cell의 크기 를 정할 수 있습니다.

 

2. 유동적인 크기일 때

// 다음과 같이 %를 정합니다.
grid-template-columns: repeat(4, 25%);

// fr를 사용해 비율을 정할 수 있습니다. ex) 1fr + 1fr = 2fr
grid-template-columns: repeat(4, 1fr);

💡  fr를 사용해 쉽게 반응형 요소를 만들 수 있습니다. ex) 1fr + 1fr은 2fr입니다.

 

minmax()

요소의 최소 크기, 최대 크기를 정해줄 수 있습니다.

// 다음 속성의 row의 최소 높이는 50px입니다.
// 컨텐츠의 내용이 50px보다 크다면, 150px까지 늘어납니다.
grid-template-rows: repeat(2, minmax(50px, 150px));

 

column의 높이가 고정되어 있을 때

row는 고정되어 있고, 컨텐츠가 박스 바깥으로 넘칩니다.

 

column의 높이가 minmax일 때

컨텐츠의 높이에 따라 row 높이가 늘어났습니다.

 

 

grid-gap

grid-gap, grid-column-gap, grid-row-gap

 

grid-gap으로 두 방향 다 정할 경우 ⇒ row column 순입니다.

// grid의 gap을 1rem로 정합니다.
grid-gap: 1rem;

// 다음과 같이 row, column을 순서대로 정할 수 있습니다.
grid-gap: 1rem 2rem;

// 따로 지정할 수도 있습니다.
grid-row-gap: 1rem;
grid-column-gap: 2rem;

 

---

Cell를 활용하기

 

Grid Cell & Grid Lines

💡  Cell과 Lines
grid의 각 칸을 cell이라 합니다. grid line에서 index는 1부터 시작합니다.
양수는 top left를 기준으로 좌표를 생각하고, 음수는 bottom right 기준으로 생각하면 편한 것 같습니다.

 

자식 요소에서 grid lines의 index를 사용해 start, end을 정합니다.

.item2 {
	grid-column-start: 2;
    
  	grid-row-start: 1;
  	grid-row-end: 3;
}

 

다음과 같이 start / end를 한 번에 작성할 수 있습니다.

.item2 {
  grid-column: 2 / -1;

  grid-row: 1 / 3;
}

 

end 위치를 고민하지 않고, span을 사용할 수도 있습니다.

.item2 {
  grid-column: 2 / span 3;

  grid-row: 1 / span 2;
}

 

grid-template-areas

 

grid-template-areas를 다음과 같이 사용할 수 있습니다.

 

(area는 아래 실습에서 다시 한 번 알아볼게요.)

.container {
  display: grid;
  grid-template-areas:
    "a a a"
    "b c c";
}

.item1 {
  grid-area: a;
}

.item2 {
  grid-area: b;
}

.item3 {
  grid-area: c;
}

 

 

auto

grid-auto-rows: 150px;

• rows가 몇 개이든지, 각 row의 높이를 150px로 만듭니다.

 

grid-auto-columns: 150px;

• column가 몇 개이든지, 각 column의 높이를 150px로 만듭니다.

 

다음과 같이 작성할 수도 있습니다.

// 모든 rows는 기본적으로 150px이지만, 1번째 row는 50px
grid-auto-rows: 150px;
grid-template-rows: repeat(1, 50px);

 

---

 

실습 (feat. picsum.photos)

grid로 다음과 같은 레이아웃을 구현합니다.

 

picsum.photos

https://picsum.photos/

위 사이트는 url에 pathname에 맞는 랜덤 이미지를 제공합니다.
다양한 사이즈의 이미지를 placeholder로 사용할 수 있습니다.

• 예시 이미지 src : https://picsum.photos/700/150
• 예시 이미지 출력 : https://i.picsum.photos/id/202/700/150.jpg?hmac=OSrHxhhmYv-mmEPH3pWO3fermP9DGFHLnJNqm25TTJk

// 이미지 css
.image {
	width: 100%;
	height: 100%
	object-fit: cover;
}

 

gird-template-areas

 

실습을 위해 HTML 다음과 같이 작성 (축약)

<div class="container">
  <div class="item1">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. A nisi
  </div>
  <div class="item2">
    <img src="https://picsum.photos/1000/500" />
  </div>
  <div class="item3">
    <img src="https://picsum.photos/900/150" />
  </div>
	...
  </div>
</div>

 

CSS 작성

 

gird 레이아웃에서 부모의 grid-template-columns, grid-template-rows

 

그리고 자식의 grid-colum, grid-row를 사용해 다음과 같이 작성할 수 있습니다.

 

작성할 때, row와 column을 정확히 확인해야 하고, 코드가 직관적이지 않은 느낌이 있습니다.

 

/* grid-template-areas를 사용하지 않았습니다. */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px;
  grid-template-rows: repeat(1, 50px);
}

.item1 {
  grid-column: 1 / -1;
}

.item2 {
  grid-row: 2 / span 2;
}

.item3 {
  grid-column: 2 / span 2;
}

.item5 {
  grid-column: -2;
  grid-row: 3 / span 2;
}

 

상단의 구현 내용을 grid-template-areas로 다시 작성하였습니다.

 

각 영역을 알파벳으로 나누고, 자식 item에 grid-area 속성으로 지정합니다.

 

/* grid-template-areas를 사용합니다. */
.container {
  display: grid;
  grid-template-areas:
    "a a a"
    "b c c"
    "b d g"
    "e f g";
}

.item1 {
  grid-area: a;
}

.item2 {
  grid-area: b;
}

.item3 {
  grid-area: c;
}

.item5 {
  grid-area: g;
}

---

code sandbox에 구현한 내용입니다.
https://codesandbox.io/s/css-display-grid-18m3b8?file=/src/styles.css

Grid 사용에 자신이 없어서, 주로 flex만 사용했었습니다.
오늘 이후 Grid Layout이 필요하다고 생각되는 경우에, 적극적으로 사용하려 합니다!