참조: 드림코딩 CSS Grid 완전 정리 끝판왕 😎
읽어보면 좋을 블로그: https://uxkm.io/publishing/css/04-cssAdvanced/05-css_grid_part1#gsc.tab=0

예시 코드는 react, styled-componets, typescript를 사용해 작성했습니다.

Grid란?

flex vs grid

아이템을 자유롭게 배치할 수 있는 대표적인 css layout에는 flex와 grid가 있음
flex: 1차원적으로 배치할 수 있게 도와줌 가로 또는 세로 줄로 연결해 배치
grid: 2차원적으로 배치할 수 있게 도와줌 가로 축 & 세로 축

물론 flex에서도 wrap을 사용하면 한줄을 넘어갈 때 줄바꿈 처리가 가능함

따라서 필요에 따라 flex와 grid를 섞어서 사용하면 됨

grid의 요소

부모 컨테이너에서 display: grid;를 지정해주면 부모는 grid container,자식 요소는 grid cell이 됨

• grid: block grid container로 만들어줌
• inline-grid: inline grid container로 만들어줌

grid container

: 그리드의 전체적인 사이즈와 모양에 대한 템플릿을 지정할 수 있음
➡ 셀 영역 지정

• grid-template-columns: 가로 축에 총 몇 개의 column을 둘지 또 각 column의 사이즈를 정의
• grid-template-rows: 세로 축에 총 몇 개의 row를 둘지 또 각 row의 사이즈를 정의
• grid-auto-columns: 셀의 너비를 잡아줌(이를 정하지 않으면 colum이 콘텐츠에 따라 늘어남)
• grid-auto-rows: 셀의 높이를 잡아줌(이를 정하지 않으면 row가 콘텐츠에 따라 늘어남)
• grid-template-areas: 템플릿 공간을 정의(그리드 각 요소에 이름을 짓고 cell에 이름을 부여하며 템플릿 생성), 조금더 파워풀, 직관적
• grid-gap: 각 그리드 셀마다 얼마의 gap을 가질지 정의
  +grid-column-gap, grid-row-gap을 통해 가로 또는 세로만 별도 지정도 가능

grid cell

: 각 그리드 안에서 얼마만큼 크기를 차지할지 어떤 셀에 표기되길 원하는지 또 몇 개의 셀을 차지하고 싶은지 지정 가능함

• grid-column-start
• grid-column-end
  ➡ 가로 몇 번째 셀부터 몇 번째 셀까지 보여질지 정의
• grid-row-start
• grid-row-end
  ➡ 세로 몇 번째 셀부터 몇 번째 셀까지 보여질지 정의
• grid-area: 어떤 영역에 표시되길 원하는지 정의

Examples

1. 기본 예시

그리드만 적용

	display: grid;

그리드에 column 지정

	display: grid;
  	grid-template-columns: 100px 100px 100px;

그리드에 column, row 지정

	display: grid;
  	grid-template-columns: 100px 100px 100px;
 	grid-template-rows: 100px 200px 100px; // 4줄인데 3줄까지만 row를 지정해서 마지막은 기본값으로 나옴

repeat()

column, row 지정 시 동일 한 사이즈를 계속 반복하는 경우 repeat 함수를 사용할 수 있음
예를 들어 위의 코드는

	display: grid;
  	grid-template-columns: repeat(3, 100px);
 	grid-template-rows: 100px 200px 100px;

로 바꿀 수 있음

물론 섞어서 사용 가능함

	grid-template-columns: 100px 100px 100px;
  	grid-template-columns: repeat(3, 100px);
 	grid-template-columns: repeat(2, 100px) 100px;
-> 모두 동일한 결과

auto-fit vs auto-fill

auto-fit과 auto-fill은 repeat()함수의 파라미터로 미리 몇 개로 나눌지 정의하지 않고 설정된 너비가 허용하는 한 최대한 많은 셀로 공간을 채움

auto-fit

: 그리드 컨테이너 내부 빈 공간을 나눠 가져 셀들이 딱 맞게 길이를 설정
➡️ 전체 너비에 맞게 늘림

	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

auto-fill

: 지정된 너비에서 가능한 많은 셀을 만듦
➡️ 빈 공간이 있더라도 셀 길이를 늘리지 않음( 셀 너비가 더 넓어지면 많은 셀을 만들 수 없으니까!)

	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

grid gap

셀 사이 사이에 공간을 주고 싶다면?

  grid-column-gap: 10px;

  grid-row-gap: 10px;

  grid-gap: 10px;

2. 반응형 적용

보통 grid를 사용할 때는 반응형으로 만드는 것이 중요하기 때문에 px보단 부모 grid container 너비에서 얼마나 할당 받아 사용할지 %(퍼센트, percent)로 받거나 fr(fractional unitD)을 사용

	grid-template-columns: repeat(5,20%);
    grid-template-columns: repeat(5,1fr); //화면을 5로 나누어 각각 1씩 할당

grid-auto-rows

위와 같이 column을 지정하는 경우 알아서 row가 지정
그렇가면 column에 따라 row가 몇 줄이 될지 모르지만 자동으로 사이즈를 조정해주고 싶다면

	grid-auto-rows:150px;

➡ 몇 줄인진 모르지만 각 줄마다 높이를 150px로 만들어줘

그런데 만약 안에 텍스트가 많다거나 내부 컨텐츠 사이즈가 다양하다면?

  grid-auto-rows: minmax(150px, auto);

➡ 최소 150px를 보장하며 넘어가면 자동으로 늘어나게 지정

3. 더 강력한 grid area

grid area을 보기 전 먼저 grid line에 대해 알아보자

grid line

: 일반적으로 grid line을 통해 범위를 지정할 수 있음

가장 왼쪽 column을 기준으로 시작점 1부터 +1
가장 오른쪽 끝점부터 -1, -2, -3,,,

row도 마찬가지

가장 위 row를 기준으로 시작점 1부터 +1
가장 아래쪽 끝점부터 -1, -2, -3,,,

Example

이제 그럼 grid-line을 이용해 영역을 할당해보자.
className="item2"가 column 2부터 4까지 영역을 차지하도록 코드를 수정

  &#item2{
    grid-column-start: 2;
    grid-column-end: 4;
  }

className="item2"가 column 2부터 4, row 1부터 3까지 영역을 차지할 수 있도록 수정

  &#item2{
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
  }

축약

그러나 이렇게 매번 시작점과 끝점을 따로 적어주면 번거롭기 때문에

  &#item2{
    grid-column: 2/4;
    grid-row: 1/3;
  }

이렇게 표기해도 같은 결과가 나옴을 알아두자.

또 그냥 2번 라인부터 2칸을 채우고 싶다면

  &#item2{
  	grid-column: 2/ span 2;
    grid-row: 1/3;
  }

이렇게도 사용할 수 있다. 물론 마찬가지로 세 코드의 결과는 같음

만약 끝까지 지정하고 싶다면 끝번호가 -1부터 시작됨을 상기해보자.

  &#item2{
    grid-column: 2/ -1;
    grid-row: 1/3;
  }

grid area

아무것도 적용되지 않은 모습으로 grid container 안에 7개의 아이템을 만들어 넣어두었다.

example 1

이제 grid area아를 지정해보자

// grid container
grid-template-areas: 
  'a a a'
  'b c c'
  'b d g'
  'e f g';

// gird cells
  &.color1{
    background-color: #fca3a3;
    grid-area: a;
  }
  &.color1{
    background-color: #fca3a3;
    grid-area: a;
  }
  &.color2{
    background-color: #fdcaac;
    grid-area: b;
  }
  &.color3{
    background-color: #fdf5ac;
    grid-area: c;
  }
  &.color4{
    background-color: #adfab4;
    grid-area: d;
  }
  &.color5{
    background-color: #add5fa;
    grid-area: e;
  }
  &.color6{
    background-color: #b2bcf8;
    grid-area: f;
  }
  &.color7{
    background-color: #d9ccfd;
    grid-area: g;
  }

아이템이 7개니 7개의 알파벳으로 영역을 나누어보자. item1 부터 각각 a,b,c,,,을 할당해 주었다.

container 영역이 3*4로 나뉠 때
item1 item1 item1 a a a가 첫 줄을 (a a a)
item2 item3 item3 b c c가 두 번째 줄을
item2 item4 item7 b d g가 세 번째 줄,
item5 item6 item7 e f g가 마지막 줄을 차지한다.

물론 반응형도 적용된다.

example 2

// 색은 중복되어서 코드에서 제외
const GirdContainer = styled.div`
  width: 100%;
  height: 510px;
  grid-gap: 23px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas: 
  'a a b c d'
  'a a e f g';
`;

const GridCell = styled.div`
  width: 100%;
  height: 100%;
  max-height: 510px;
  &.item1{
    grid-area: a;
  }
  &.item2{
    grid-area: b;
  }
  &.item3{
    grid-area: c;
  }
  &.item4{
    grid-area: d;
  }
  &.item5{
    grid-area: e;
  }
  &.item6{
    grid-area: f;
  }
  &.item7{
    grid-area: g;
  }
`;

마찬가지로 반응형도 적용되는 것을 확인할 수 있다.