CSS Grid 생성기
열과 행을 설정하고, 셀 위를 드래그하여 아이템을 배치한 뒤, 클릭 한 번으로 그리드 CSS와 매칭되는 HTML 코드를 복사해 보세요.
그리드 레이아웃은 브라우저에서 직접 빌드됩니다. 설정한 어떤 데이터도 BroBroGo 서버로 전송되지 않습니다.
자주 묻는 질문
그리드 위에 아이템을 어떻게 배치하나요?
셀 위를 누른 채 드래그하여 직사각형 영역을 지정하세요. 마우스를 놓으면 해당 행과 열을 차지하는 자식 아이템이 배치됩니다. 드래그하여 만든 각 아이템은 CSS에서 고유한 grid-column 및 grid-row 규칙을 가지며 HTML에서는 이에 대응하는 div 태그가 생성됩니다. 아이템들은 서로 겹칠 수 있으며, 나중에 그린 아이템이 위로 올라옵니다. 아이템의 × 표시를 누르면 삭제할 수 있습니다.
열과 행의 크기를 서로 다르게 설정할 수 있나요?
네, 가능합니다. 각 트랙마다 고유한 크기 입력창이 있어 1fr, 200px, auto, min-content, minmax(120px, 1fr) 등 어떤 그리드 값도 입력할 수 있습니다. 동일한 크기를 공유하는 트랙들은 코드가 간결해지도록 repeat() 형태로 자동 묶여 출력됩니다. 열 간격과 행 간격은 개별적으로 설정되며, 두 값이 같으면 단일 gap 속성으로 축소됩니다.
생성된 코드는 어떻게 사용하나요?
생성된 CSS와 HTML 코드를 모두 복사하세요. HTML은 각 아이템에 대응하는 div들을 감싸는 컨테이너 구조를 제공하고, CSS는 그리드를 정의하고 각 아이템의 위치를 잡아줍니다. 두 코드를 프로젝트에 붙여넣으면 여기서 디자인한 레이아웃이 그대로 구현됩니다.