CSS 그리드 생성기

Grid-template-areas 선언은 가장 읽기 쉬운 CSS 부분 중 하나이지만 일단 존재하는 경우에만 가능합니다. 손으로 거기에 도달한다는 것은 인용된 문자열을 세고 행 길이를 일치시키는 것을 의미하며 일치하지 않는 셀 하나가 자동으로 전체 레이아웃을 깨뜨립니다. 이 생성기는 이를 직접 조작으로 전환합니다. 즉, 열과 행 수를 설정하고 라이브 그리드의 셀에 이름을 입력하면 일치하는 이름이 자동으로 하나의 명명된 영역으로 병합됩니다.

내부적으로는 공백으로 남겨둔 모든 셀이 생성된 그리드 템플릿 영역 문자열에서 점이 되고 이름을 지정한 모든 셀은 해당 이름의 사각형의 일부가 됩니다. CSS는 명명된 영역이 하나의 깨끗한 직사각형 블록만 차지하도록 허용하므로 도구는 사용자가 입력할 때 이를 확인하고 이름이 아직 유효한 직사각형을 형성하지 않는 경우를 정확하게 알려줍니다. 자동으로 CSS를 생성하는 대신 브라우저는 거부합니다.

열 간격과 행 간격의 기본값은 8px이고 일치할 때 단일 간격 선으로 결합되며 실시간 미리 보기 그리드는 항상 성배의 200px 측면 레일과 같은 사전 설정의 고정 픽셀 열을 포함하여 그리드 템플릿 열 및 그리드 템플릿 행 트랙을 미러링합니다. 복사 가능한 출력은 스타일시트에 준비된 CSS 블록과 명명된 영역당 하나의 그리드 영역 div가 있는 일치하는 HTML 스켈레톤 등 양면을 포함합니다.

그리드와 가변상자는 다양한 레이아웃 문제를 해결하며, 이 사이트의 css-flexbox-generator는 탐색 모음이나 카드 더미와 같은 유연한 항목의 단일 행이나 열인 1차원 레이아웃을 위한 더 나은 시작점입니다. 2차원 제어, 명시적인 행과 열 또는 머리글/탐색/기본/바닥글과 같은 이름이 지정된 영역이 필요한 경우 대신 이 그리드 생성기를 사용하세요. 두 도구는 종종 동일한 페이지, 즉 페이지 셸의 그리드와 해당 조각 내부의 Flexbox에서 끝나게 됩니다. 이 사이트의 모든 도구와 마찬가지로 이 도구는 업로드나 계정 없이 전적으로 브라우저에서 실행됩니다.