KOENJP

CSS 그리드 생성기

CSS · GRID

열·행 크기와 간격을 정하고 칸을 드래그해 이름 있는 영역(grid-template-areas)을 만들어요. 폭을 바꿔 반응형 배치를 미리 보고 HTML·CSS를 복사해요.

레이아웃

칸을 드래그해 묶으면 이름 있는 영역이 돼요. 키보드는 칸에서 Enter, Shift+방향키로 넓혀요.
px 


      

    

  









  

    

      HOW TO
      
사용 방법

      
    
      
  1. 열·행 개수를 정하고 칸마다 1fr, 200px, auto, minmax() 같은 크기를 넣어요.
    2. 
      
  2. 미리보기에서 칸을 드래그해 묶고 header·main처럼 이름을 붙이면 영역이 돼요.
    3. 
      
  3. 간격과 최소 높이를 맞추고, 좁은 화면에서 한 줄로 쌓을 폭(브레이크포인트)을 정해요.
    4. 
      
  4. 미리보기 폭을 끌어 반응형 배치를 확인한 뒤 HTML·CSS를 복사해요.
    5. 
      

    

    

      PAIRS WELL WITH
      
같이 쓰기 좋은 도구

      
    

  

  
  

    FAQ
    
자주 묻는 질문

    
영역끼리 겹치게 만들 수 있나요?
grid-template-areas는 영역이 겹칠 수 없고 직사각형이어야 해요. 이미 있는 영역 위에 새로 묶으면 겹친 영역은 지워지고 새 영역으로 바뀌어요.

    
영역 이름에 한글을 쓸 수 있나요?
CSS 규칙상 가능은 하지만 클래스 이름과 함께 쓰기 편하도록 영문자나 _로 시작하는 영문·숫자·-·_ 조합만 받아요.

    
모바일에서는 어떻게 바뀌나요?
'좁은 화면에서 한 줄로 쌓기'를 켜면 정한 폭보다 좁을 때 영역을 위에서 아래, 왼쪽에서 오른쪽 순서로 한 열에 쌓는 미디어 쿼리를 함께 만들어요. 영역이 없는 빈칸은 이때 사라져요.

    
repeat(auto-fill, …) 같은 자동 반복도 되나요?
이 도구는 칸 수가 정해진 레이아웃을 그리는 용도라 auto-fill·auto-fit은 지원하지 않아요. 모든 트랙이 같으면 결과 코드에서 repeat(3, 1fr)처럼 자동으로 줄여 줘요.