CSS Grid - 구성 요소, 사용 방법

 

 

Grid 기본 구성 요소 

 

 웹 페이지의 레이아웃을 구성하기 위한 강력한 도구로, 그리드 시스템을 통해 요소들을 배치할 수 있습니다.

Grid는 행(row)과 열(column)을 기반으로 구조를 형성하며, 각 요소의 위치와 크기를 정확하게 제어할 수 있습니다.

 

컨테이너(Container)

그리드를 감싸는 부모 요소로, display: grid; 속성을 적용하여 그리드 컨테이너로 설정합니다.

 

그리드 아이템(Grid Items)

그리드 컨테이너 내에 배치되는 자식 요소들입니다.

 

주요 속성

 

grid-template-columns

그리드의 열(column) 크기를 정의합니다.

 

grid-template-rows

그리드의 행(row) 크기를 정의합니다.

 

grid-gap(grid-row-gap, grid-column-gap)

그리드 아이템 사이의 간격을 정의합니다.

 

grid-template-areas

그리드 영역을 지정하여 그리드 아이템의 배치를 설정합니다.

 

grid-column, grid-row

각 그리드 아이템의 위치를 지정합니다.

 

justify-items

그리드 아이템을 수평 방향으로 정렬합니다.

 

align-items

그리드 아이템을 수직 방향으로 정렬합니다.

 

 

예시

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 3개의 열을 가진 그리드 */
  grid-template-rows: auto; /* 자동으로 행의 높이를 조정 */
  grid-gap: 10px; /* 그리드 아이템 사이의 간격 */
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

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

 

.grid-container 내의 요소들이 그리드로 배치되며, 열의 너비는 100px로 고정되고 행의 높이는 내용에 따라 자동으로 조정됩니다. 각 그리드 아이템은 .grid-item 클래스를 가지며, 배경색이 회색으로 지정되어 있습니다.