Grid란?

가로 세로로 레이아웃을 정하는 2차원 레이아웃 시스템

• container(외부 레이아웃)에 맞춰 알아서 크기를 변경하도록 설계가 가능하며 item간 병합도 가능.
• flex 보다 2차원 설계 시 자유도가 높고, 구현이 편리하다.
• flex와 달리 grid는 행(row)과 열(column)을 동시에 제어할 수 있어 복잡한 레이아웃을 다루기에 좋다.

---

1. Grid 기본 개념

• Grid Container : CSS Grid 레이아웃이 적용된 부모 요소를 의미
• Grid item : 그리드 컨테이너 내부의 자식 요소들을 지칭하며, 각 아이템은 그리드 트랙을 기준으로 배치된다.
• Grid track : 행(row)과 열(column)로 나뉜 그리드의 각각의 선으로, 그리드 아이템이 배치될 수 있는 공간을 형성
• Grid cell : 행과 열이 교차하는 지점의 단일 사각형 공간. 그리드 아이템은 이 셀을 차지한다.
• Grid line : 각 행과 열을 구분하는 선. grid-column과 grid-row 속성을 통해 그리드 라인을 기준으로 아이템을 배치할 수 있다.
• Grid gap : 그리드 아이템 간의 공간. 가로와 세로가 구분된다.

HTML

<div class="grid-container">
  <div class="grid-item one">One</div>
  <div class="grid-item two">Two</div>
  <div class="grid-item three">Three</div>
  <div class="grid-item four">Four</div>
  <div class="grid-item five">Five</div>
  <div class="grid-item six">Six</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 10px;
  padding: 20px;
}
.grid-item {
  background-color: #ff7e3e57;
  border: 2px solid #ff7f3e;
  padding: 20px;
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

참조 : MDN - Grid

---

2. Grid 주요 속성

1) grid-templete-columns & grid-templete-rows

Grid의 행과 열에 대해 정의

repeat 함수 사용

• repeat(반복횟수, 반복할 인자) 함수를 사용하여 원하는 배치로 만들 수 있으며, 이때 fr이라는 단위를 사용한다.
• fr(fractional unit) : 유연한 크기를 갖는 단위, 남는 자유 공간을 fr로 정해진 단위로 쪼개서 배치

auto-fit & auto-fill

• repeat 함수에 적용하여 자동으로 맞추거나 텍스트 크기만큼 채울 수 있다.
• auto-fit : 화면을 꽉 채울만큼 열 너비를 늘려서 표시
• auto-fill : 열 최소 너비만큼 채워서 표시

grid-templete-columns : repeat(3, 1fr);
grid-templete-columns : minmax(100px, auto);
grid-templete-rows : repeat(auto-fit, minmax(200px, 1fr));
grid-templete-rows : repeat(auto-fill, minmax(200px, 1fr));

2) grid gap

item 간의 간격을 설정하는 속성

• grid-gap : 열과 행의 간격을 동시에 설정
• grid-column-gap : 열 간격을 설정
• grid-row-gap : 행 간격을 설정

grid-gap : 20px 30px;

3) grid-row, grid-column, grid-row-start, grid-column-start

grid item이 차지할 열과 행을 정의
2차원 item들의 범위 및 병합된 값을 표현하거나 시작 위치를 지정하는 옵션

• grid-row : 그리드의 행에 걸쳐 위치할 범위를 지정
• grid-column : 그리드의 열에 걸쳐 위치할 범위를 지정
• grid-row-start : 그리드의 시작할 행의 위치를 지정
• grid-column-start : 그리드의 시작할 열의 위치를 지정

grid-row : 1/3;
grid-column : 1/-1;
grid-row-start : 1;
grid-column-start : 2;

4) grid-templete-areas & grid-area

grid item 배치를 시각적으로 정의하는 속성
box의 이름으로 행과 열을 지정하고 item들의 이름을 부여하여 2차원 그리드를 구성.

• grid-templete-areas : 2차원 그리드의 행과 열을 지정
• grid-area : 박스의 이름을 지정

.grid-container {
	grid-template-areas:
         "box1 box1 box1"
         "box2 box3 box3"
         "box2 .    box4";
}
.grid-item {
	grid-area : box1;
}