Grid Process

  • Build accessible mobile-first layout without grid
  • Use mobile-first layout as fallback for all browsers
  • Use @supports ( grid-area: auto ) to detect grid support
  • At the appropriate breakpoint, create layout with grid and grid-areas
  • Explore new layouts as viewport widens

Minmax

grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr);

Auto fill

grid-template-columns: repeat(auto-fill, minmax(100px, 200px));

Auto fit (best solution)
Similar to autofill but won't display empty columns like the above, will auto collapse empty cols to 0 pixels, only apparent when using repeat and minmax

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

Examples

Distribute space evenly

<div class="grid">
  <div class="col a"></div>
  <div class="col b"></div>
  <div class="col c"></div>
</div>
.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.grid .col {
  background: red;
  height: 50px;
}

Layout

<h2>Conference Schedule</h2>
<div class="schedule grid">
  
  <span class="track-slot" aria-hidden="true" style="grid-column: room-1;">Room 1</span>
  <span class="track-slot" aria-hidden="true" style="grid-column: room-2;">Room 2</span>
  <span class="track-slot" aria-hidden="true" style="grid-column: room-3;">Room 3</span>

  <h3 class="time-slot" style="grid-column: times; grid-row: time-0800;">8:00am</h3>
  
  <div class="session session-1 room-1" style="grid-column: room-1; grid-row: time-0800 / time-0900;">
    <p class="session-title">Session Title</p>
    <span class="session-time">8:00am - 9:00am</span>
    <span class="session-track">Room 1</span>
  </div>
  
  <div class="session session-2 room-2" style="grid-column: room-2; grid-row: time-0800 / time-0830;">
    <p class="session-title">Session Title</p>
    <span class="session-time">8:00am - 8:30am</span>
    <span class="session-track">Room 2</span>
  </div>
  
  <div class="session session-3 room-3" style="grid-column: room-3; grid-row: time-0800 / time-0830;">
    <p class="session-title">Session Title</p>
    <span class="session-time">8:00am - 8:30am</span>
    <span class="session-track">Room 3</span>
  </div>
  
  <h3 class="time-slot" style="grid-column: times; grid-row: time-0830;">8:30am</h3>
  
  <div class="session session-4 room-2" style="grid-column: room-2; grid-row: time-0830 / time-1030;">
    <p class="session-title">Session Title</p>
    <span class="session-time">8:30am - 10:30am</span>
    <span class="session-track">Room 2</span>
  </div>
  
  <div class="session session-5" style="grid-column: room-1 / end; grid-row: time-1030 / time-1030;">
    <p class="session-title">Fin</p>
  </div>
  
</div>
.grid {
  
  @media screen and (min-width:700px) {
    display: grid;
    grid-gap: 1rem;
    grid-template-rows: 
      [rooms] auto
      [time-0800] 1fr
      [time-0830] 1fr
      [time-0900] 1fr
      [time-0930] 1fr
      [time-1000] 1fr
      [time-1030] 1fr
      [time-1100] 1fr
      [time-1130] 1fr
      [time-1200] 1fr;
    grid-template-columns: 
      [times] 4em
      [room-1] 1fr
      [room-2] 1fr
      [room-3] 1fr
      [end];
  }
}

See the Pen CSS Grid Timetable by Shane Prendergast (@webknit) on CodePen.

grid-template-areas layout

// HTML
<div class="site">

    <h1 class="header"></h1>

    <div class="main"></div>

    <div class="sidebar"></div>

    <div class="footer"></div>

</div>
// CSS
.site {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
  margin: 0 auto;
  max-width: 800px;
}

@media screen and (min-width: 600px) {
  
    .site {
      display: grid;
      grid-template-columns: 1fr 2fr;
      grid-template-rows: auto;
      grid-template-areas:
        "main sidebar"
        "header header"
        "footer footer";
      margin: 0 auto;
      max-width: 800px;
    } 
  
}

.main, .sidebar, .footer {
  background: red;
  height: 100px;
}

.main {
  grid-area: main;
}

.header {
  grid-area: header;
}

.sidebar {
  background: yellow;
  grid-area: sidebar;
}

.footer {
  background: blue;
  grid-area: footer;
}

See the Pen CSS Grid by Shane Prendergast (@webknit) on CodePen.

References