[CSS] Grid

• Flex와 Grid의 차이점
  • Flex : 1차원 레이아웃 시스템(한 방향)
  • Grid : 2차원 레이아웃 시스템(가로-세로)

 

출처 : 1분 코딩

 

Grid 레이아웃을 만들기 위해선 Flex와 마찬가지로 Grid Container(부모 요소)와 Grid Item(자식 요소)가 있으면 된다.

컨테이너에 display : grid; 를 설정하면 컨테이너의 역할을 수행하고 자식 요소들은 아이템이 된다.

 

✅ grid를 주면 자식 요소들은 Block 속성이 된다!

 

근데 display: grid만 설정해서는 레이아웃에 변화가 일어나지 않는다.

 

 

 

Grid 컨테이너 속성

 

속성	의미
display	그리드 컨테이너(Container)를 정의
grid-template-rows	명시적 행(Track)의 크기를 정의
grid-template-columns	명시적 열(Track)의 크기를 정의
grid-template-areas	영역(Area) 이름을 참조해 템플릿 생성
grid-template	grid-template-xxx의 단축 속성
row-gap(grid-row-gap)	행과 행 사이의 간격(Line)을 정의
column-gap(grid-column-gap)	열과 열 사이의 간격(Line)을 정의
gap(grid-gap)	xxx-gap의 단축 속성
grid-auto-rows	암시적인 행(Track)의 크기를 정의
grid-auto-columns	암시적인 열(Track)의 크기를 정의
grid-auto-flow	자동 배치 알고리즘 방식을 정의
grid	grid-template-xxx과 grid-auto-xxx의 단축 속성
align-content	그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
justify-content	그리드 콘텐츠를 수평(행 축) 정렬
place-content	align-content와 justify-content의 단축 속성
align-items	그리드 아이템(Items)들을 수직(열 축) 정렬
justify-items	그리드 아이템들을 수평(행 축) 정렬
place-items	align-items와 justify-items의 단축 속성

 

 

🔹grid-template-*

grid에는 column(=세로), row(=가로) 개념이 존재한다. 엑셀을 떠올리면 쉽다!

grid-template-rows, grid-template-columns를 통해 컨테이너에 grid 트랙의 크기를 지정해줄 수 있다.

여러 가지 단위를 사용할 수 있고 섞어서 쓸 수도 있다.

 

.container {
	display: grid;
	grid-template-columns: 150px 150px 150px;
	grid-template-rows: 150px 150px;
}

출처 : 나나로그

 

 

🔹repeat()

grid-template-*에는 각 트랙의 크기값을 입력해야 한다. 근데 모든 열 혹은 행의 크기가 같을 때는 repeat() 함수를 쓸 수 있다. 위의 코드를 repeat으로 수정해보겠다.

 

.container {
	display: grid;
	grid-template-columns: repeat(3, 150px);
	grid-template-rows: repeat(2, 150px);
}

 

이렇게 repeat의 첫 매개변수에는 반복할 횟수, 두번째 매개변수에는 설정할 값을 입력하면 된다. 값을 auto로 지정할 경우에는 컨테이너의 남은 공간을 채우게 된다.

 

 

 

🔹fr

한편, 컨테이너의 크기가 고정되어 있지 않은 경우에 아이템 크기를 비율로 지정하고 싶을 때가 있을 것이다. 이 때 %를 사용해도 되지만, 유지보수 등을 고려해 좀 더 유연한 단위를 지정할 수 있다.

fr(fraction) = 숫자 비율대로 트랙의 크기를 나눔

 

 

🔹minmax

행과 열의 크기를 지정할 때 최솟값과 최댓값을 지정할 수 있다. 이때 minmax 함수를 사용한다.

 

minmax(min, max) : 최소한 min의 값을 가지고 최대 max의 값을 가지게 된다.

 

minmax 함수를 사용하면 아무리 내용의 양이 적더라도 최소한 min 값은 확보하고, 내용이 많아 min이 넘어가면 알아서 늘어나다 max 값에서 멈추게 된다.

 

 

🔹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개의 셀이 들어간다. 셀의 개수가 5개보다 모자라면 공간이 남게된다.

auto-fill 대신 auto-fit을 사용하면, 남는 공간을 채운다.

 

 

간격 만들기

🔹row-gap column-gap gap

.container {
	row-gap: 10px;
	/* row의 간격을 10px로 */
	column-gap: 20px;
	/* column의 간격을 20px로 */
    
    /* gap : 10px 20px */
}

그리드 셀 간격을 정의할 수 있다. gap은 row-gap과 column-gap의 단축 속성이다.

 

 

그리드의 형태 자동 정의

🔹grid-auto-columns grid-auto-rows

grid-template-* 의 통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속성이다.

.container {
	grid-template-rows: repeat(3, minmax(100px, auto));
}

위의 코드에서는 각 셀마다 최소 100px의 높이를 확보하고, 컨텐츠가 높이 100px를 넘어가면 알아서 자동으로 늘어나도록 했다. 만약, row 개수를 미리 알 수 없는 경우에는 어떻게 해야 하는걸까?

.container {
	grid-auto-rows: minmax(100px, auto);
}

 

grid-auto-rows를 쓰면 굳이 횟수를 지정해서 반복할 필요 없이 알아서 처리된다.

 

🔹align-items justify-items

아이템을 각각 세로 / 가로 방향으로 정렬한다. 기본 값은 stretch이며 flex와 동일하게 동작한다.

place-items로 align-items와 justify-items를 단축하여 작성할 수 있다. 하나의 값만 쓰면 두 속성 모두에 적용된다.

 

 

🔹align-content justify-content

grid 아이템들의 높이 / 너비를 모두 합한 값이 grid 컨테이너의 높이 / 너비보다 작을 때 grid 아이템들을 통째로 정렬한다.

마찬가지로 기본 값은 stretch이며 flex와 동일하게 동작한다.

place-items로 align-content와 justify-content를 단축하여 작성할 수 있다. 하나의 값만 쓰면 두 속성 모두에 적용된다.

출처 : 나나로그

 

 

Grid 아이템 속성

 

속성	의미
grid-row-start	그리드 아이템(Item)의 행 시작 위치 지정
grid-row-end	그리드 아이템의 행 끝 위치 지정
grid-row	grid-row-xxx의 단축 속성(행 시작/끝 위치)
grid-column-start	그리드 아이템의 열 시작 위치 지정
grid-column-end	그리드 아이템의 열 끝 위치 지정
grid-column	grid-column-xxx의 단축 속성(열 시작/끝 위치)
grid-area	영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성
align-self	단일 그리드 아이템을 수직(열 축) 정렬
justify-self	단일 그리드 아이템을 수평(행 축) 정렬
place-self	align-self와 justify-self의 단축 속성
order	그리드 아이템의 배치 순서를 지정
z-index	그리드 아이템의 쌓이는 순서를 지정

 

 

🔹grid-column grid-row

.item:nth-child(1) {
	grid-column: 1 / 4;
}

출처 : 나나로그

 

grid-column과 grid-row는 컨테이너의 grid-template-* 통제를 받지 않고 각 아이템의 위치와 크기를 조정할 수 있다.

grid-column : 1 / 4의 의미는 해당 아이템을 grid line 1에서 시작해서 grid line 4까지 늘어나게 하겠다는 것이다.

끝 지점을 지정하지 않고, span을 이용해 넓이를 지정할 수도 있다.

grid-area를 사용해서 grid-row grid-column 속성을 한 번에 지정 가능하다..

 

.container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
 
.item4 {
  grid-column-end: span 2;
}
 
.item6 {
  grid-column-end: span 3;
}

 

위 레이아웃에서 item4는 2만큼, item6은 3만큼 늘어난 것을 확인할 수 있다.

 

 

grid-template-areas

각 영역에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법이다.

출처 : 1분 코딩

.container {
	grid-template-areas:
		"header header header"
		"   a    main    b   "
		"   .     .      .   "
		"footer footer footer";
}

.header { grid-area: header; }
.sidebar-a { grid-area: a; }
.main-content { grid-area: main; }
.sidebar-b { grid-area: b; }
.footer { grid-area: footer; }
/* 이름 값에 따옴표가 없는 것에 주의 */

각 요소를 grid-area 속성으로 변수에 담아 grid-template-areas에서 사용할 수 있다.

각 행은 따옴표(" ")로 구분해주고, 각 열의 구분은 공백으로 한다. 빈칸은 마침표 또는 none을 사용한다.

 

 

grid-auto-flow

아이템이 자동 배치되는 흐름을 결정하는 속성이다.

grid-auto-flow 속성값은 기본적으로 row이며, 아이템이 row를 기준으로 순서대로 배치되다가 들어갈 자리가 없으면 그 칸은 비워두고 아래로 배치가 된다.

속성값에는 row, row dense, column, column dense가 있으며, dense는 기본적으로 빈 셀을 채우는 알고리즘이며, row와 column에 따라 기준이 달라진다.

.container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(25%, auto));
	grid-template-rows: repeat(5, minmax(50px,auto));
	grid-auto-flow: dense;
}
item:nth-child(2) { grid-column: auto / span 3; }
item:nth-child(5) { grid-column: auto / span 3; }
item:nth-child(7) { grid-column: auto / span 2; }

출처 : 1분 코딩

 

E의 너비가 늘어나 다음 줄로 넘어가고 그 빈 공간을 F와 H가 채우는 것을 볼 수 있다.

 

 

🔹align-self justify-self

해당 아이템을 세로 / 가로 방향으로 정렬한다. 기본값 : stretch

place-self로 align-self와 justify-self를 같이 사용할 수 있다.

 

 

🔹order

각 아이템들의 시각적 나열 순서를 결정한다. 숫자값이 들어가며, 작은 숫자일 수록 먼저 배치된다.

✔️ 시각적 순서일 뿐, HTML 자체의 구조를 바꾸는 것은 아님!

✔️ 스크린 리더로 화면을 읽을 때, order를 이용해 순서를 바꾼 것은 의미가 없다.

 

🔹z-index

position의 z-index와 같이 z축 정렬이 가능하며, 숫자가 클 수록 위로 올라온다.

 

 

---

 

🗒️ 리뷰

과제를 진행하면서 상품 리스트를 만들면서 grid를 깔짝 사용했는데, 속성이 많아서 그런지 어렵다 grid... 그냥 다 flex로 하고 싶고.. 레거시 코드 쓰고 싶고... 흐음 아직 사례를 많이 못봐서 그런가.. 대충 보고 넘어갈까 싶긴 했지만 Grid가 상대적으로 나온지 얼마 안된 개념이여서 아직 현업에서 잘 안 쓰는 것 같기도 하고.. 대중화 되면 많이 사용할지도? 테이블을 대신해서 사용 가능할 것 같긴 하다. 그럼 그 th td tr 늪에서 벗어날 수 있겠즤...✨ 

 

 

 

✅ 오늘의 미션!

Grid garden 게임 플레이✨

https://cssgridgarden.com/#ko

Grid Garden

 

 

 

🗒️ 참고한 글

https://heropy.blog/2019/08/17/css-grid/

CSS Grid 완벽 가이드

 

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

https://nykim.work/59

[CSS] CSS Grid (그리드) 배우기