CSS Grid 레이아웃을 시각적으로 만들고 코드를 복사합니다. 컬럼·로우·간격을 슬라이더로 조정.

미리보기

CSS 코드


        

    


    

        
CSS Grid 사용법

        
    
            
  1. 컬럼·로우·간격을 슬라이더로 조정합니다.
    2. 
            
  2. justify-items / align-items로 셀 안의 정렬을 결정합니다.
    3. 
            
  3. 프리셋으로 자주 쓰는 레이아웃을 빠르게 적용할 수 있습니다.
    4. 
            
  4. CSS 코드를 복사해 사용합니다.
    5. 
        


        
주요 기능

        
    
            
  • 컬럼·로우 1~8개 조절
    • 
            
  • 간격(gap) 0~50px 조정
    • 
            
  • 정렬(justify-items, align-items) 옵션
    • 
            
  • 실시간 시각적 미리보기
    • 
            
  • CSS 코드 자동 생성
    • 
        


        
활용 예시

        
    
            
  • 제품 카드 그리드 (3×N)
    • 
            
  • 이미지 갤러리
    • 
            
  • 대시보드 위젯 배치
    • 
            
  • 뉴스 기사 매거진 레이아웃
    • 
            
  • 포트폴리오 작품 그리드
    • 
        


        
Grid vs Flexbox 차이

        
Flexbox는 한 방향(가로 또는 세로) 정렬에 강하고, Grid는 2차원(가로+세로 동시) 레이아웃에 강합니다. 카드 그리드, 매거진 레이아웃은 Grid가, 네비게이션·버튼 정렬은 Flexbox가 적합합니다.


        
자주 묻는 질문

        

            

                모든 브라우저에서 동작하나요?
                
모든 모던 브라우저(2017년 이후)에서 완전 지원됩니다.

            

            

                반응형으로 만들려면?
                
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))로 사용하면 화면 크기에 따라 자동으로 컬럼 수가 조정됩니다.

            

            

                특정 셀을 더 크게 만들 수 있나요?
                
네, grid-column: span 2; grid-row: span 2로 특정 셀을 여러 칸 차지하게 만들 수 있습니다.

            

            

                fr 단위는 무엇인가요?
                
fr(fraction)은 사용 가능한 공간의 비율 단위입니다. 1fr 2fr 1fr이면 가운데가 양옆의 2배 너비를 가집니다.