CSS Grid 배치 설계기

1. 기본 설정

행·열과 영역을 편집하세요.

2. 화면별 행·열

트랙은 각각 최대 8개입니다. px는 고정 크기, fr은 남는 공간 비율, minmax는 최소 px와 최대 fr입니다.

3. 이름 붙인 영역

영역명은 영문 소문자로 시작하고 숫자·하이픈을 포함할 수 있습니다. 각 화면에서 시작 위치와 차지할 칸 수를 정하세요.

4. 배치 미리보기와 검사

미리보기는 넓은/좁은 화면 규칙을 개별 표시합니다. 넓은 화면은 모바일에서 가로 스크롤로 살펴보세요.

5. HTML과 CSS

HTML의 라벨은 텍스트로 출력됩니다. 실제 사이트의 선택자·색상·간격에 맞게 수정하세요.

CSS

.your-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(150px, 1fr) minmax(0px, 2fr);
  grid-template-rows: 76px 160px 70px;
  grid-template-areas:
    "header header"
    "aside main"
    "footer footer";
}

.your-grid > .area-header { grid-area: header; }
.your-grid > .area-aside { grid-area: aside; }
.your-grid > .area-main { grid-area: main; }
.your-grid > .area-footer { grid-area: footer; }

@media (max-width: 640px) {
  .your-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 70px 90px 150px 65px;
    grid-template-areas:
      "header"
      "aside"
      "main"
      "footer";
  }
}

HTML

<div class="your-grid">
  <div class="area-header">Header</div>
  <div class="area-aside">Aside</div>
  <div class="area-main">Main</div>
  <div class="area-footer">Footer</div>
</div>