🔲CSS Grid 템플릿

다양한 레이아웃의 CSS Grid 템플릿을 제공하고 커스터마이징할 수 있는 도구입니다

템플릿 선택

커스텀 그리드

기본 그리드 (3x3)

3행 3열의 균등한 그리드 레이아웃

Grid 속성:
grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);

HTML

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

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid #ddd;
}

시각적 미리보기

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

CSS Grid 템플릿 사용법

사용법

  • • 왼쪽에서 원하는 그리드 템플릿을 선택하세요
  • • 커스텀 그리드를 만들려면 행/열 수와 간격을 설정하세요
  • • HTML과 CSS 코드를 복사하여 프로젝트에 사용하세요
  • • 시각적 미리보기로 레이아웃을 확인하세요
  • • HTML 다운로드 버튼으로 완성된 파일을 받을 수 있습니다