Feature on Right (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 Left example—namely, with the featured item first for emphasis—yet the layouts are flipped. Grid makes it trivial to do that.

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: 1fr 2fr;
  grid-template-rows: repeat(4, 1fr);
}

/* Place item on the grid */
.feature {
  grid-column: 2;
  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;
}