.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}CSS 그리드 생성기 란 무엇입니까?
CSS 그리드 생성기는 CSS 그리드 레이아웃을 위한 시각적 빌더입니다. 원하는 열과 행 수를 선택하고,각 축에 대한 트랙 크기를 선택하고,간격과 정렬을 설정하고,미리보기 그리드가 실시간으로 재배열됩니다. 보이는 것을 생성하는 정확한 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 클래스를 대상으로 하며 눈에 보이는 효과가 있는 속성만 나열하므로 출력은 깨끗하게 유지됩니다.
CSS 그리드 생성기를 사용하는 방법은 무엇입니까?
열과 행을 설정합니다
그리드에 있어야 하는 열과 행 수를 선택하고 미리보기가 셀을 빌드하는 것을 시청하세요.
트랙 크기를 선택하세요
1fr,자동, 최소-콘텐츠 또는 고정 픽셀 값과 같은 열과 행의 크기를 선택합니다.
간격과 정렬을 조정합니다
행과 열 간격을 설정한 다음 정렬을 조정하고 항목과 트랙의 위치를 지정하도록 정렬합니다.
CSS 복사
생성된 그리드 규칙을 복사하여 스타일시트에 붙여넣거나 미리보기를 계속 조정하세요.
주요 특징
라이브 미리보기
열, 행, 트랙 크기, 간격 및 정렬을 변경하면 실제 그리드가 리플로우됩니다.
반복() 출력
다중 트랙 축은 반복되는 목록 대신 짧고 읽기 쉬운 그리드-템플릿 값에 repeat()를 사용합니다.
fr 및 콘텐츠 트랙
각 축에 대해 분수 단위, 자동, 최소 콘텐츠, 최대 콘텐츠 또는 고정 픽셀을 선택합니다.
행과 열 간격을 분리합니다
간격을 독립적으로 설정하십시오; 도구는 간격을 약칭하거나 단일 값을 자동으로 방출합니다.
Frequently Asked Questions
Related Tools
CSS Animation Generator
Build CSS keyframe animations from presets like fade, slide, bounce and spin. Adjust duration, easing, delay, iteration and direction, preview live, then copy the keyframes and animation shorthand.
CSS Transform Generator
Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
JWT Generator
Generate and sign JSON Web Tokens with HS256, HS384, or HS512, add standard claims, and copy the token. Runs client-side.
Comments
0 comments
No comments yet. Be the first to share your thoughts!