⭐ 0
🔍
텍스트 이미지 PDF 및 문서 오디오 음악 전자 회로 시간 유틸리티 검증인 신비주의 게임

사이드바 + 콘텐츠 CSS 그리드 레이아웃

CSS 그리드 레이아웃을 시각적으로 디자인합니다. 열, 행 및 간격을 설정한 다음 셀에 영역 이름을 입력하여 그리드 템플릿 영역을 만듭니다. 실시간 미리보기와 복사 가능한 CSS 및 HTML을 사용합니다.

아래 셀에 이름을 입력하세요. 동일한 이름을 가진 셀은 하나의 그리드 템플릿 영역 영역으로 병합됩니다.

처리 중... 0%

결과

이 페이지는 이미 이름이 지정된 2열, 1행 레이아웃이 있는 그리드 생성기를 엽니다. 즉, 나머지 공간을 차지하는 유연한 콘텐츠 열 옆에 200px 사이드바 열이 있습니다. 두 영역 모두 실시간 미리보기에서 즉시 볼 수 있으며 색상과 라벨이 지정되어 분할이 한 눈에 분명해집니다.

이는 웹에서 가장 일반적인 탐색 및 콘텐츠 모양입니다. 설정 페이지, 문서 사이트 및 관리 대시보드는 모두 유동적인 기본 영역 옆의 고정 너비 레일에 기대어 있습니다. 사이드바 열은 픽셀 값을 사용하고 콘텐츠 열은 1fr을 사용하기 때문에 콘텐츠 열이 뷰포트의 모든 추가 픽셀을 흡수하는 동안 사이드바는 일정한 너비를 유지합니다.

영역 이름을 바꾸거나, 열 너비를 변경하거나, 분할 위의 헤더에 행을 더 추가하세요. 아래의 CSS 및 HTML 출력은 모든 편집 내용을 실시간으로 추적합니다. 이 도구는 무료이며 업로드나 계정 없이 브라우저에서 완전히 계속 작동합니다.

🛡️
브라우저에서 실행됨

귀하의 파일과 입력 내용은 절대 이 장치를 떠나지 않습니다. 처리는 완전히 오프라인으로 실행됩니다. 100% 안전합니다.

허용되는 형식 및 규칙

  • 1~6개의 열과 행에 대한 숫자 입력과 일치할 때 하나의 간격 값으로 결합되는 별도의 열 간격 및 행 간격 컨트롤입니다.
  • 명명된 영역 모드: 라이브 그리드의 셀에 영역 이름을 직접 입력합니다. 이 도구는 유효한 그리드 템플릿 영역 문자열을 작성하고 이름이 깨끗한 직사각형을 형성하지 않을 때 경고합니다.
  • 복사 가능한 CSS 블록(표시: 그리드, 그리드-템플릿-열/행, 간격, 그리드-템플릿-영역) 및 명명된 영역당 하나의 그리드 영역 div가 있는 일치하는 HTML 스켈레톤.

주요 이점

✓ 셀에 바로 이름을 입력하면 일치하는 이름이 하나의 그리드 템플릿 영역으로 병합됩니다. 드래그를 선택하거나 인용 문자열 구문을 직접 추측할 필요가 없습니다.
✓ 실시간 미리보기 그리드는 변경될 때마다 크기가 조정되고 색상이 다시 지정되므로 CSS 한 줄을 복사하기 전에 정확한 열과 행 트랙 및 명명된 모든 영역을 볼 수 있습니다.
✓ 고전적인 성배 레이아웃 및 좁은 사이드바와 같은 사전 설정은 빈 그리드 대신 실제로 작동하는 그리드 템플릿 영역 선언을 제공합니다.

사용 사례

  • • 그리드 템플릿 영역을 직접 작성하는 대신 영역 이름을 입력하여 nav/main/aside 중간 행이 있는 전체 너비 머리글 및 바닥글인 고전적인 성배 페이지 셸을 구축하세요.
  • • 유연한 콘텐츠 열 옆에 고정 너비 사이드바가 있는 설정 페이지 또는 관리 대시보드를 배치하고 실시간 미리보기가 제대로 표시되면 정확한 CSS 및 HTML을 복사하세요.
  • • 배송 전에 명명된 영역 세트가 실제로 유효한 직사각형을 형성하는지 확인하십시오. 도구는 브라우저에서 그리드 템플릿 영역을 깨뜨릴 정확한 이름에 플래그를 지정합니다.