Design Kits Blog

CSS의 display: grid 속성은 그리드 레이아웃을 생성하기 위해 사용되는 속성입니다.

display: grid 속성은 부모 요소에 적용되며, 해당 요소를 그리드 컨테이너로 변환시킵니다. 이를 통해 그리드 아이템들을 그리드 영역에 배치할 수 있습니다.

.parent {

  display: grid;

}

그리드 템플릿 (Grid Template): grid-template-columns 및 grid-template-rows 속성을 사용하여 그리드의 열과 행의 크기를 정의할 수 있습니다. 크기는 픽셀, 퍼센트, 그리드 트랙(fr) 등으로 지정할 수 있습니다.

그리드 간격 (Grid Gap): grid-gap 속성을 사용하여 그리드 아이템 사이의 간격을 지정할 수 있습니다. 간격은 픽셀, 퍼센트 등으로 지정할 수 있으며, 열과 행 간의 간격을 개별적으로 설정할 수도 있습니다.

.parent {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

이러한 속성들을 사용하여 display: grid를 적용한 요소를 그리드로 구성할 수 있습니다. 이를 통해 유연하고 반응형인 레이아웃을 만들 수 있으며, 아이템의 위치 및 크기를 세밀하게 제어할 수 있습니다.