CSS Grid Playground

1. Basic settings

Edit tracks and named areas.

2. Rows and columns by screen

Up to eight tracks per axis. px is fixed, fr shares leftover space, and minmax uses a px minimum and fr maximum.

3. Named areas

Area names start with a lowercase ASCII letter and may include digits or hyphens. Set starting positions and spans for each screen.

4. Preview and checks

Preview switches the wide and narrow rules directly. Scroll horizontally to inspect the wide layout on a phone.

5. HTML and CSS

HTML labels are escaped text. Adjust selectors, colors, and spacing for your site.

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>