Grid Columns

A dashboard switches from normal flow into a three-column grid with a card that spans two columns.

Program

CSS Grid lays content into rows and columns. Track definitions describe the grid before individual items are placed.

grid_columns.html

<style>
.dashboard { display: grid; }
.dashboard { grid-template-columns: repeat(3, 1fr); }
.dashboard { gap: 12px; }
.wide { grid-column: span 2; background: #fef3c7; }
</style>

<section class="dashboard">
  <article class="wide">Revenue</article>
  <article>Costs</article>
  <article>Quality</article>
</section>

grid track A grid track is a row or column in the grid.

span A grid item can span across multiple tracks.