Feature on Top (Grid)

This demonstrates using both an explicit grid and implicit grid. Note that the HTML is the same as the Feature on Left and Feature on Right examples—namely, with the featured item first for emphasis—yet the layouts are different. Collectively, they indicate the level of control Grid affords you with just a few different lines of CSS.

The Finished Example Layout

1
2
3
4
5

The Code

HTML
<div class="container">
  <div class="feature">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>


CSS
/* Grid
-------------------------------------- */
/* Define the grid */
.container {
  display: grid;
  grid-gap: 20px 10px;
  grid-template-columns: repeat(4, 1fr);
}

/* Place items on the grid */
.feature {
  grid-column-end: span 4;
}

.box {
  /* each box fills two columns by default, 
     resulting in two per row */
  grid-column-end: span 2;
}

@media screen and (min-width: 30em) {
  .box {
    /* each box fills one column in wider viewports, 
       resulting in four across */
    grid-column-end: span 1;
  }
}

/* Generic styles for demo purposes
-------------------------------------- */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.container {
  font-family: Helvetica, Arial, sans-serif;
  max-width: 800px;
}

.container > * {
  background-color: #ccc;
  padding: 1em;
  /* see note below */
  height: 19vw;
}

/* In many cases, you would omit declaring a height (and you probably wouldn't use a vw value if you did decalre a height), instead allowing your content to dictate the height. The same is true for the height of the other grid items, defined in the rule immediately above. */
.feature {
  height: 40vw;
}

@media screen and (min-width: 30em) {
  .feature {
    height: 30vw;
  }
}