[CSS] 📚 그리드(Grid) 💯 총정리

...

Grid

Grid가 나오기 이전에는, float이나 table, flex를 이용해 레이아웃을 짰다.

CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈이다.

그리드 용어

그리드 컨테이너

display: grid로 표기하며 모든 그리드 아이템의 부모 요소이다.

일단 컨테이너가 될 요소에게 grid를 주면 그때부터 자식 요소들은 Grid Items이 된다.

<style>
   .container {
	   display: grid;
   }
<style/>

<div class="container">
	<div></div>
    <div></div>
</div>

그리드 아이템

그리드 컨테이너의 자식 요소다.

다음 예시의 .item은 그리드 아이템을 의미한다

<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 class="item">I</div>
</div>

그리드 라인

그리드를 구성하는 분할 선

그리드 트랙

두 개의 그리드 라인 사이의 공간. 그리드의 열 또는 행으로 볼 수 있다.

그리드 셀

그리드의 구성 단위

그리드 영역

네 개의 그리드 라인으로 둘러싸인 공간. 몇 개의 그리드 셀로 구성된다.

그리드 번호(Grid Number)

Grid 라인의 각 번호

그리드 갭(Grid Gap)

Grid 셀 사이의 간격

[ Grid Container Properties ]

속성	의미
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의 단축 속성

display

Grid Container(컨테이너)를 정의한다.

정의된 컨테이너의 자식 요소들은 자동으로 Grid Items(아이템)로 정의된다.

값	의미
grid	Block 특성의 Grid Container를 정의
inline-grid	Inline 특성의 Grid Container를 정의

.container {
  display: grid;
}

[그리드 형태 정의]

grid-template-rows / grid-template-columns

rows(행) 의 트랙 기준으로 크기와 갯수를 정한다.

columns(열) 의 트랙 기준으로 크기와 갯수를 정한다.

📌 fr(fraction, 공간 비율) 단위를 사용할 수 있다.

📌 repeat() 함수를 사용할 수 있다.

열 columns --> 가로를 조절

행 rows --> 세로를 조절

grid-template-rows: 1행크기 2행크기 ...;
/* grid-template-rows: [선이름] 1행크기 [선이름] 2행크기 [선이름] ...; */

grid-template-columns: 1열크기 2열크기 ...;
/* grid-template-columns: [선이름] 1열크기 [선이름] 2열크기 [선이름] ...; */

grid-template-rows: 100px 200px;
/* grid-template-rows: [1 -3] 100px [2 -2] 200px [3 -1]; */

각 라인은 행(Row, Track)과 열(Column, Track)의 개수대로 숫자(양수/음수) 라인 이름이 자동으로 지정되어 있어서, 꼭 필요한 경우가 아니면 선 이름을 정의할 필요가 없다.

.container {
	display: grid;
	grid-template-columns: 300px 50px 100px; /* 가로길이를 각각 300 50 100 3개로 나눈다. */
	grid-template-rows: 200px 50px; /* 세로 길이를 200 50 으로 두개로 나눈다. */
}

repeat() 함수

두번 째 인수를 몇번 만큼 반복한다.

grid-template-columns: repeat(9, 100px);
/* grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px; */

grid-template-columns: repeat(2, 100px 200px 50px);
/* grid-template-columns: 100px 200px 50px 100px 200px 50px; */

grid-template-columns: repeat(4, 1fr 2fr 3fr);
/* grid-template-columns: 1fr 2fr 3fr 1fr 2fr 3fr 1fr 2fr 3fr 1fr 2fr 3fr; */

minmax 함수

최솟값과 최댓값을 지정할 수 있는 함수이다.

grid-template-rows: repeat(3, minmax(100px, auto));

minmax(100px, auto)의 의미는 최소한 100px, 최대는 자동으로(auto) 늘어나게 이다.

즉 아무리 내용의 양이 적더라도 최소한 높이 100px은 확보하고, 내용이 많아 100px이 넘어가면 알아서 늘어나도록 처리해 준 예시이다.

min 과 max 따로따로 지정해 줄 수 도 있다.

grid-template-columns: min-content 1fr;
grid-template-columns: max-content 1fr;

fr 단위

컨테이너의 크기가 고정되어 있지 않은 경우라면 아이템 크기를 비율로 지정하고 싶을 때가 있을 텐데,

이때 %를 사용해도 되지만, 유지보수 등을 고려해 좀 더 유연한 단위를 지정하고 싶을 때가 있다.

이 경우에는 fr 단위를 사용한다.

fraction(분수)라는 이름에 맞춰, 이 단위는 사용 가능한 공간의 일정 비율을 나타낸다.

grid-template-columns: 2fr 1fr 1fr;

다음 코드는, 공간을 4개로 나뉘게 되고 (2+1+1=4), 첫 번째 column은 2/4만큼 가진다.

그런 다음 남은 1/2를 두 번째와 세 번째 column이 하나씩 차지하게 된다.

만약 컨테이너 너비가 1000px이라고 한다면, 각각 500px, 250px, 250px이 된다.

컨테이너 너비가 유동적이라면 브라우저가 그에 맞춰 아이템 크기를 조절해줄 것이다.

.container {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
}

/* 단위를 섞어 쓸수  도 있다. */
.container {
  grid-template-columns: 1fr 2fr 100px 25%;
}

3번째 컬럼에 100px, 4번째 컬럼에 25%를 사용하고 남은 공간을 1번째 컬럼에 ‘1/3’, 2번째 컬럼에 ‘2/3’ 만큼 사용한다.

auto-fill / auto-fit

auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채운다.

grid-template-columns: repeat(auto-fill, minmax(20%, auto));

auto-fill의 크기를 20%로 설정했으므로, 1개의 row에는 5개의 셀이 들어가게 된다.

셀의 개수가 5개보다 모자라면, 이런↓식으로 공간이 남게 된다.

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

바로 이게↓auto-fill과 auto-fit의 차이이다.

container크기에 따른 자동 블록 조절

.container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

grid-template-areas

지정된 그리드 영역 이름(grid-area)을 참조해 그리드 템플릿을 생성한다.

.container {
  display: grid;
  
  /* 그리드 갯수,크기 조정 */
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  
  /* 그리드 템플릿 */
  grid-template-areas:
    "header header header"
    "main   main   aside"
    "footer footer footer";
}

/* grid-area이름을 지정한다 */
header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
footer { grid-area: footer; }

.(마침표)를 사용하거나 명시적으로 none을 입력해 빈 영역을 정의할 수 있다.

.container {
  display: grid;
  
  /* 그리드 갯수,크기 조정 */
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  
  /* 그리드 템플릿 */
  grid-template-areas:
    "header header header"
    "main     .      .   "
    "main     .    aside "
    "footer footer footer";
}

/* grid-area이름을 지정한다 */
header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
footer { grid-area: footer; }

grid-template

grid-template-rows, grid-template-columns 그리고 grid-template-areas의 단축 속성

grid-template:
   "header header header" 80px
   "main main aside" 350px
   "footer footer footer" 130px
   / 2fr 100px 1fr;


/* 다음과 같은 단축 속성이다 */
grid-template-rows: 80px 350px 130px;
grid-template-columns: 2fr 100px 1fr;
grid-template-areas:
  "header header header"
  "main main aside"
  "footer footer footer";

[그리드 간격 정의]

row-gap(grid-row-gap) / column-gap(grid-column-gap)

각 행과 행 사이의 간격(Gutter)을 지정한다.

각 열과 열 사이의 간격(Gutter)을 지정한다.

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

.container {
	display: grid;
    
	grid-template-columns: repeat(3, 130px);
	grid-template-rows: repeat(2, 130px);
    
	column-gap: 30px;
	row-gap: 30px;
}

gap(grid-gap)

row-gap, column-gap 의 short hand 버젼

gap: 30px 10px; /* row-gap:30px; column-gap:10px; */

/* 하나의 값으로 통일할 수 있습니다. */
gap: 10px;  /* row-gap: 10px; + column-gap: 10px; */

/* 하나의 값만 적용하고자 한다면 다음과 같이 사용할 수 있습니다. */
gap: 10px 0; /* row-gap */
gap: 0 10px; /* column-gap */

grid-gap(grid-row-gap, grid-column-gap)의 접두사 grid-는 더 이상 사용되지 않으며, gap(row-gap, column-gap)로 교체되었다.
하지만 일부 버전의 브라우저 지원을 위해 grid- 접두사의 사용을 고려할 수 있다.

[그리드 형태를 자동으로 정의]

grid-auto-rows / grid-auto-columns

만들고자 하는 아이템(Item)이 확연할 경우 grid-template-rows 또는 grid-template-columns 으로 만들게 된다. (4x3 이나 8x8 등)

하지만 만들고자 하는 아이템 갯수가 확실치 않을 경우 브라우저가 auto로 조절해야 되는데, 그게 바로 이 속성이다.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-rows: 100px 100px; /* 명시적 2개 행 정의 */
  grid-template-columns: 150px 150px; /* 명시적 2개 열 정의 */

  grid-auto-rows: 100px; /* 만일 추가 셀이 있으면 100px로 맞춤 */ 
  grid-auto-columns: 100px;
}

.item:nth-child(3) {
  grid-row: 3 / 4; /* 그리드 아이템의 시작 위치 조정. 뒤에서 배움 */
  grid-column: 3 / 4;
}

다음과 같이 아이템이 배치되는 위치에 맞게 암시적 행과 열의 개수가 생성된다.

암시적 크기가 적용된 행과 열은 양수 라인 번호만 사용할 수 있다.(음수 사용 불가)

grid-auto-flow

배치하지 않은 아이템(Item)을 어떤 방식의 ‘자동 배치 알고리즘’으로 처리할지 정의한다.

배치한 아이템은 grid-area(이하 개별 속성 포함)를 사용한 아이템을 의미한다.

값	의미	기본값
row	각 행 축을 따라 차례로 배치	row
column	각 열 축을 따라 차례로 배치
row dense(dense)	각 행 축을 따라 차례로 배치, 빈 영역 메움!
column dense	각 열 축을 따라 차례로 배치, 빈 영역 메움!

다음은 row와 row dense에 대한 예제다.

/* For row & row dense */
.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  
  /* grid-auto-flow: row; */
  grid-auto-flow: row dense;
}

.item:nth-child(2) {
  grid-column: span 3; /* 그리드 아이템 크기 조정. 뒤에서 배운다. */
}

다음은 column과 column dense에 대한 예제입니다.

/* For column & column dense */
.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  
  /* grid-auto-flow: column; */
  grid-auto-flow: column dense;
}

.item:nth-child(1) {
  grid-column: 2 / span 2; /* 그리드 아이템 크기 조정. 뒤에서 배운다. */
}

.item:nth-child(2) {
  grid-column: span 2;
}

grid

grid-template-xxx과 grid-auto-xxx의 단축 속성이다.

.container {
  grid: <grid-template-rows> / <grid-template-columns>;
}

.container {
  grid: 100px 200px / 1fr 2fr;
}

/* 다음과 같은 단축 속성이다
.container {
  grid-template-rows: 100px 200px;
  grid-template-columns: 1fr 2fr;
}*/

.container {
  grid: <grid-template>;
}

.container {
  grid:
    "header header header" 80px
    "main main aside" 350px
    "footer footer footer" 130px
    / 2fr 100px 1fr;
}

/* 다음과 같은 단축 속성이다
.container {
  grid-template:
    "header header header" 80px
    "main main aside" 350px
    "footer footer footer" 130px
    / 2fr 100px 1fr;
}+

[그리드 정렬]

align-content

그리드 콘텐츠(Contents)를 수직(열 축) 정렬한다.

그리드 콘텐츠의 세로 너비가 그리드 컨테이너(Container)보다 작아야 한다.

값	의미	기본값
normal	stretch와 같습니다.	normal
start	시작점(위쪽) 정렬
center	수직 가운데 정렬
end	끝점(아래쪽) 정렬
space-around	각 행 위아래에 여백을 고르게 정렬
space-between	첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
space-evenly	모든 여백을 고르게 정렬
stretch	열 축을 채우기 위해 그리드 콘텐츠를 늘림

justify-content

그리드 콘텐츠(Contents)를 수평(행 축) 정렬한다.

값	의미	기본값
normal	stretch와 같습니다.	normal
start	시작점(왼쪽) 정렬
center	수평 가운데 정렬
end	끝점(오른쪽) 정렬
space-around	각 열 좌우에 여백을 고르게 정렬
space-between	첫 열은 시작점에, 끝 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
space-evenly	모든 여백을 고르게 정렬
stretch	행 축을 채우기 위해 그리드 콘텐츠를 늘림

place-content

align-content와 justify-content의 단축 속성이다.

place-content: <align-content> <justify-content>;

.container {
  place-content: center space-evenly;
}

/* 다음과 같은 단축속성이다.
.container {
  align-content: center;
  justify-content: space-evenly;
}*/

.container {
  place-content: end;
}

/* 다음과 같은 단축속성이다.
.container {
  align-content: end;
  justify-content: end;
}*/

align-items

그리드 아이템(Items)들을 수직(열 축) 정렬한다.

값	의미	기본값
normal	stretch와 같습니다.	normal
start	시작점(위쪽) 정렬
center	수직 가운데 정렬
end	끝점(아래쪽) 정렬
stretch	열 축을 채우기 위해 그리드 아이템을 늘림

justify-items

그리드 아이템(Items)들을 수평(행 축) 정렬한다.

값	의미	기본값
normal	stretch와 같습니다.	normal
start	시작점(왼쪽) 정렬
center	수평 가운데 정렬
end	끝점(오른쪽) 정렬
stretch	행 축을 채우기 위해 그리드 아이템을 늘림

place-items

align-items와 justify-items의 단축 속성이다.

place-items: <align-items> <justify-items>;

.container {
  place-items: start stretch;
}

/* 다음과 같은 단축속성이다.
.container {
  align-items: start;
  justify-items: stretch;
}*/

.container {
  place-items: center;
}

/* 다음과 같은 단축속성이다.
.container {
  align-items: center;
  justify-items: center;
}*/

[ Grid Item Properties ]

속성	의미
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-row-start, grid-row-end / grid-column-start, grid-column-end

그리드 아이템(Item)을 배치하기 위해 그리드 선(Line)의 ‘시작 위치’와 ‘끝 위치’를 지정한다.

‘숫자’를 지정하거나, ‘선 이름’을 지정하거나, span 키워드를 사용한다.

/* 전체적은 그리드 모양 지정 */
.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

/* 그리드 컨테이너 내의 그리드 아이템들을 지정 */
.item:nth-child(1) {
  grid-row-start: 1; /* 선 번호를 지정해서 크기를 지정 */
  grid-row-end: 3;
  
  grid-column-start: 2;
  grid-column-end: 4;
}

.container {
  display: grid;
  grid-template-rows: [row-1st] 1fr [row-2nd] 1fr [row-3rd]; /* 선 이름을 지정 */
  grid-template-columns: [col-1st] 1fr [col-2nd] 1fr [col-3rd] 1fr [col-4th];
}

.item:nth-child(1) {
  grid-row-start: row-2nd; /* 선이름으로 아이템 크기를 지정 */
  grid-row-end: row-3rd;
  
  grid-column-start: col-2nd;
  grid-column-end: col-4th;
}

span 키워드를 사용하면 좀 더 쉽게 배치할 수 있다.

span 키워드와 ‘숫자’를 조합하면 ‘숫자’만큼 라인을 확장하는(+) 개념이다.

명시하지 않으면 span 1이 기본값이다.

.item:nth-child(1) {

  /* Row 1번에서 3번(1+2=3)까지 */
  grid-row-start: 1;
  grid-row-end: span 2; /* 1+2 = 3 */


  /* Column 2번에서 3번(2+1=3)까지 */
  grid-column-start: 2;
  /* grid-column-end: span 1; 더하기 1은 (생략) */
}

.item:nth-child(1) {

  /* Column 3번에서 2번(3-1=2)까지 */
  /* grid-row-start: span 1; (생략) */
  grid-row-end: 3;
  

  /* Column 4번에서 2번(4-2=2)까지 */
  grid-column-start: span 2;
  grid-column-end: 4;
}

grid-row

grid-row-start과 grid-row-end의 단축 속성이다.

각 속성을 /로 구분한다.

grid-row: <grid-row-start> / <grid-row-end>;

/*.item {
  grid-row-start: 1;
  grid-row-end: 2;
}*/

.item {
  grid-row: 1 / 2;
}

/*.item {
  grid-row-start: 2;
  grid-row-end: span 3;
}*/

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

.item {
  grid-row: 2 / 5;
}

/*.item {
  grid-row-start: span 3;
  grid-row-end: 4;
}*/

.item {
  grid-row: span 3 / 4;
}
.item {
  grid-row: 1 / 4;
}

grid-column

grid-column-start과 grid-column-end의 단축 속성이다.

각 속성을 /로 구분한다.

grid-column: <grid-column-start> / <grid-column-end>;

/*.item {
  grid-column-start: -1;
  grid-column-end: -3;
}*/

.item {
  grid-column: -1 / -3;
}

.item {
  /* Column -1번에서 -3번(-1-2=-3)까지 */
  grid-column: span 2 / -1;
}

/*.item {
  grid-column-start: 2;
  grid-column-end: -1;
}*/

.item {
  /* Column 2번에서 끝(-1번)까지 */
  grid-column: 2 / -1;
}

grid-area

grid-row-start, grid-column-start, grid-row-end, grid-column-end의 단축 속성.

혹은 grid-template-areas가 참조할 영역(Area) 이름을 설정할 수도 있다.

영역 이름을 설정할 경우 grid-row와 grid-column 개념은 무시된다.

grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
/* or */
grid-area: 영역이름;

/*.item {
  grid-row: 2 / 3;
  grid-column: span 2 / -1;
}*/

.item {
  /* '시작 / 시작 / 끝 / 끝'임에 주의합시다! */
  grid-area: 2 / span 2 / 3 / -1;
}

<style>
  .container {
    display: grid;
    grid-template-rows: repeat(4, 90px);
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: /* grid-area의 가로세로 속성값은 area로 지정 */
      "header header header"
      "main main aside"
      "main main ."
      "footer footer footer";
  }
  
  
  /* grid-area를 아이템 크기로 사용하는게 아닌, 별명으로 사용 */
  /* 이 별명은 위의 grid-template-areas에 쓰임 */
  header.item { grid-area: header; } /* grid row, column 단축속성이 아닌 이름으로 사용 */
  main.item   { grid-area: main;   } /* grid row, column 단축속성이 아닌 이름으로 사용 */
  aside.item  { grid-area: aside;  } /* grid row, column 단축속성이 아닌 이름으로 사용 */
  footer.item { grid-area: footer; } /* grid row, column 단축속성이 아닌 이름으로 사용 */
</style>


<div class="container">
  <header class="item">HEADER</header>
  <main class="item">MAIN</main>
  <aside class="item">ASIDE</aside>
  <footer class="item">FOOTER</footer>
</div>

[그리드 아이템 정렬]

align-self

단일 그리드 아이템(Item)을 수직(열 축) 정렬

값	의미	기본값
normal	stretch와 같습니다.	normal
start	시작점(위쪽) 정렬
center	수직 가운데 정렬
end	끝점(아래쪽) 정렬
stretch	열 축을 채우기 위해 그리드 아이템을 늘림

.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}

.item:nth-child(1) { align-self: start; }
.item:nth-child(2) { align-self: center; }
.item:nth-child(3) { align-self: end; }
.item:nth-child(4) { align-self: stretch; }

justify-self

단일 그리드 아이템(Item)을 수평(행 축) 정렬

값	의미	기본값
normal	stretch와 같습니다.	normal
start	시작점(왼쪽) 정렬
center	수평 가운데 정렬
end	끝점(오른쪽) 정렬
stretch	행 축을 채우기 위해 그리드 아이템을 늘림

.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}

.item:nth-child(1) { justify-self: start; }
.item:nth-child(2) { justify-self: center; }
.item:nth-child(3) { justify-self: end; }
.item:nth-child(4) { justify-self: stretch; }

place-self

align-self와 justify-self의 단축 속성

하나의 값만 입력하면 두 속성에 모두 적용된다.

place-self: <align-self> <justify-self>;

.item {
  place-self: start end;
}

/*.item {
  align-self: start;
  justify-self: end;
}*/

.item {
  place-self: center;
}

/*.item {
  align-self: center;
  justify-self: center;
}*/

[그리드 배치 순서]

order

그리드 아이템이 자동 배치되는 순서를 변경할 수 있다.

숫자가 작을수록 앞서 배치된다.

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

.item:nth-child(1) { order: 1; }
.item:nth-child(3) { order: 5; }
.item:nth-child(5) { order: -1; }

z-index

z-index 속성을 이용해 아이템이 쌓이는 순서를 변경할 수 있다

.item:nth-child(1) {
  grid-area: 1 / 1 / 2 / 3;
}

.item:nth-child(2) {
  grid-area: 1 / 2 / 3 / 3;
  z-index: 1;
}

.item:nth-child(3) {
  grid-area: 2 / 2 / 3 / 4;
}