❗Grid❗

개념

Grid는 웹 페이지의 레이아웃을 구성하기 위한 강력한 CSS 모듈이다. 이를 사용하면 2차원 레이아웃을 쉽게 만들 수 있으며, 행과 열을 정의하여 복잡한 레이아웃을 간편하게 조정할 수 있습니다.

잘 사용하면 복잡하게 html구조를 안짜도 될거같다는 생각이 듦.

---

장점

1. 2차원 레이아웃: 복잡한 레이아웃을 손쉽게 구성할 수 있습니다.
2. 반응형 디자인: 다양한 화면 크기에 따라 쉽게 조정할 수 있습니다.
3. 유연성: 항목의 크기와 배치를 자유롭게 설정할 수 있습니다.

---

주요개념

1. 그리드 컨테이너: display: grid; 또는 display: inline-grid;로 설정한 요소. 이 요소 내부의 자식 요소들은 그리드 항목이 된다.

2. 그리드 항목: 그리드 컨테이너 내부에 위치한 요소들이다. 이들은 행과 열에 배치된다.

3. 행과 열: 그리드 시스템은 행(row)과 열(column)으로 구성된다. 각 행과 열의 크기를 설정할 수 있다.

---

주요속성

1. grid-template-columns: 열의 수와 너비를 정의한다.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3개의 열, 각 열은 같은 너비 */
}

2. grid-template-rows: 행의 수와 높이를 정의한다.

.grid-container {
  grid-template-rows: 100px 200px; /* 1행은 100px, 2행은 200px */
}

3. grid-gap (또는 gap): 그리드 항목 사이의 간격을 설정한다.

.grid-container {
  gap: 16px; /* 항목 간의 간격 */
}

4. grid-area: 그리드 항목이 차지할 영역을 정의한다.

.item {
  grid-area: 1 / 1 / 2 / 3; /* 1행 1열에서 시작하여 2행 3열까지 차지 */
}

---

사용예제

-html-
<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

-css-
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3열 */
  grid-template-rows: auto; /* 자동 높이 */
  gap: 10px; /* 간격 */
}

.item {
  background: #ccc;
  border: 1px solid #999;
  padding: 20px;
  text-align: center;
}

구현화면