CSS 그리드 플레이그라운드 템플릿 열, 행 및 간격에 대한 상호 작용형 컨트롤을 갖춘 시각적 CSS 그리드 빌더입니다.

CSS Grid는 컨테이너에서 display: grid로 활성화됩니다. grid-template-columns는 길이 값, fr 단위(분수) 또는 repeat() 및 minmax()와 같은 함수를 사용하여 열 트랙을 정의합니다. fr 단위는 사용 가능한 공간을 비례적으로 분배합니다. grid-template-rows도 행 트랙에 대해 동일한 방식으로 작동합니다. gap(또는 row-gap 및 column-gap)은 트랙 사이의 간격을 설정합니다. justify-items와 align-items는 격자 셀 내에서 콘텐츠가 어떻게 정렬되는지 제어합니다. 격자 항목은 grid-column: span n 및 grid-row: span n을 사용하여 여러 셀을 확장할 수 있습니다. grid-template-areas를 사용하는 명명된 격자 영역은 복잡한 레이아웃을 시각적으로 정의하는 방법을 제공합니다. repeat()의 auto-fit 및 auto-fill 키워드는 미디어 쿼리 없이 반응형 레이아웃을 생성합니다: repeat(auto-fit, minmax(250px, 1fr))는 최소 너비와 함께 맞는 만큼의 열을 생성합니다.