CSS 그리드 생성기

CSS 그리드란 무엇입니까?

CSS 그리드 레이아웃은 행과 열에 동시에 콘텐츠를 배열할 수 있는 2차원 레이아웃 시스템입니다. 컨테이너에서 display: grid를 사용하여 활성화한 다음 grid-template-columns로 열 크기를 정의하고 grid-template-rows로 행 크기를 정의합니다. fr 단위(분수)는 사용 가능한 공간을 비례적으로 분배합니다 — 예를 들어, 1fr 2fr 1fr은 중간이 2배 넓은 3개의 열을 만듭니다. 자식 항목은 grid-column: span 2 또는 grid-row: span 3을 사용하여 여러 셀에 걸칠 수 있으므로 복잡한 비대칭 레이아웃을 사용할 수 있습니다. Flexbox(1차원)와 달리 CSS 그리드는 매거진 그리드, 대시보드 및 다중 열 기사 레이아웃과 같은 2차원 페이지 수준 레이아웃을 위해 설계되었습니다.

CSS 그리드 생성기를 사용하는 방법

• 숫자 입력을 사용하여 열과 행의 수를 설정합니다(각 1–12).

• grid-template-columns를 조정하여 열 너비를 제어합니다(예: 1fr 2fr, 200px auto, repeat(3,1fr)).

• 유사하게 grid-template-rows를 조정하거나, 콘텐츠 크기 행의 경우 자동으로 남겨둡니다.

• 간격 값을 설정하여 셀 간의 간격을 제어합니다(모든 CSS 길이 단위 허용).

• 미리보기에서 셀을 클릭하여 선택합니다 — 선택된 셀이 강조 표시됩니다.

• col-span 및 row-span을 설정한 다음 적용을 클릭합니다. 스팬된 셀은 녹색으로 표시됩니다.

• CSS 및 HTML 출력 탭 사이를 전환하고 복사를 클릭하여 생성된 코드를 가져옵니다.