CSS Grid 생성기

Q: Grid와 Flexbox 함께?

네, 완벽하게 보완합니다.

비주얼 CSS Grid 레이아웃 빌더.

프리셋:

열 (3)

행 (2)

열 간격: 16px행 간격: 16px

수평 정렬수직 정렬

미리보기

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.grid-item {
  padding: 16px;
  background: #e2e8f0;
  border-radius: 8px;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

무료 CSS Grid 생성기

CSS Grid 레이아웃을 시각적으로 구축합니다.

속성 참조

속성	설명	예제
grid-template-columns	열 크기	1fr 1fr 1fr
grid-template-rows	행 크기	auto 1fr auto
gap	간격	16px
justify-items	수평 정렬	stretch
align-items	수직 정렬	stretch

FAQ

CSS Grid란?

CSS Grid는 2차원 레이아웃 시스템입니다.

Grid vs Flexbox?

Grid는 2D, Flexbox는 1D입니다.

"fr"이란?

"fr"은 사용 가능한 공간의 비율입니다.

브라우저 지원?

네, 모든 최신 브라우저에서 지원됩니다.

Grid와 Flexbox 함께?

네, 완벽하게 보완합니다.

더 많은 도구

📐CSS Flexbox Generator 🌈CSS 그라디언트 생성기 📐Em/Px Converter

CSS Grid 생성기

무료 CSS Grid 생성기

속성 참조

FAQ

관련 도구

더 많은 도구

Recommended

최신 소식 받기