Feature on Left (Grid)

This grid has four rows and two columns. The “1” box (the feature) is the only item I’ve sized and placed in a specific area. Grid’s auto-placement algorithm puts the others in a single row each, ordered according to their HTML source order. Note that the HTML is the same as the Feature on Right example—namely, with the featured item first for emphasis—yet the layouts are flipped. That’s just a simple indication of the power of Grid.

The Finished Example Layout

1
2
3
4
5

The Code

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


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

/* Place item on the grid */
.feature {
  grid-row: 1 / -1;
}

/* Generic styles for demo purposes */
.container {
  font-family: Helvetica, Arial, sans-serif;
  max-width: 800px;
}

.container > * {
  background-color: #ccc;
  padding: 1em;
}

/* Typically, you wouldn't specify a height or min-height on this, instead allowing your actual content (i.e., text, images, etc.) to dictate the height of your content area. But since this example has very minimal content, I've set a min-height to mimic a taller content area. */
.container {
  min-height: 400px;
}