CSS 그리드 생성기

CSS 그리드 생성기는 CSS 그리드 레이아웃을 위한 시각적 빌더입니다. 원하는 열과 행 수를 선택하고,각 축에 대한 트랙 크기를 선택하고,간격과 정렬을 설정하고,미리보기 그리드가 실시간으로 재배열됩니다. 보이는 것을 생성하는 정확한 CSS 는 복사 준비 상자에 아래에 있으므로 그리드-템플릿-열을 손으로 쓰거나 머리의 분수 단위를 계산할 필요가 없습니다.

빠른 예제는 이 그리드 생성기 CSS 출력이 어떻게 보이는지 보여줍니다. 열 크기를 1fr 로 두고 열을 4 로,행을 1 로 드래그하고 열 간격을 24px 로,행 간격을 16px 로 설정합니다. 미리 보기에는 한 행에 4 개의 동일한 셀이 표시되며 생성된 CSS 상자는 디스플레이를 읽습니다: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: auto; gap: 16px 24px;. 간격 값은 행이 먼저 나온 다음 열이 나오며 이는 속기가 기대하는 순서입니다. 이것이 CSS 그리드 레이아웃 생성기의 전체 작업입니다: 설정,컨테이너 규칙 제외.

CSS Grid 는 2 차원 레이아웃 모델입니다. 단일 축을 따라 항목을 배치하는 flexbox 와 달리 그리드는 행과 열을 동시에 제어합니다. 컨테이너는 작은 속성 집합을 통해 구조를 유지합니다: grid-template-columns 및 grid-template-rows 는 트랙을 정의하고 간격은 트랙 사이에 간격을 추가하고 항목과 트랙을 정렬,정렬-항목,정당화-내용 및 정렬-내용 위치를 지정합니다. 이 도구는 해당 속성을 하나의 패널에 노출하고 결과를 즉시 보여줍니다.

생성기는 하나 이상의 트랙이 있는 모든 축에 대해 repeat() 함수를 사용하므로 grid-template-columns: repeat(3, 1fr)는 반복 목록이 아닌 동일한 열의 3열 그리드에 대해 얻을 수 있습니다. fr 단위는 그리드 레이아웃을 유동적으로 만드는 컨테이너의 여유 공간의 일부를 나타냅니다: 3개의 1fr 열은 각각 너비의 3분의 1을 차지하고 컨테이너 크기가 조정됨에 따라 리플로우됩니다. 트랙 크기 메뉴에서 자동, 최소 콘텐츠, 최대 콘텐츠 및 고정 픽셀 트랙을 혼합할 수도 있습니다.

모든 것이 브라우저에서 완전히 실행됩니다. 가입이 없고,아무것도 업로드되지 않으며,페이지가 로드된 후에도 도구가 오프라인으로 계속 작동합니다. 각 속성이 레이아웃을 변경하는 방법을 볼 수 있기 때문에 학습 보조 도구로서나 갤러리,대시보드, 카드 레이아웃 또는 전체 페이지 셸에 대한 프로덕션 준비 그리드 CSS 를 생성하는 빠른 방법으로 유용합니다. 생성된 규칙은.grid-container 클래스를 대상으로 하며 눈에 보이는 효과가 있는 속성만 나열하므로 출력은 깨끗하게 유지됩니다.