Flex and Grid Layout

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.

Tracks define the grid; span chooses how many tracks an item occupies.Grid columnsPinned state: grid-template-columns: 1fr 1fr 1frcolumn 1column 2column 3row 1row 2summary spans 2 columnsstatsrecentnotes span 2 columnsTracks define the grid; span chooses how many tracks an item occupies.
Figure: CSS Grid tracks and spanning items. Model source: books/css/03flex_grid_layout/grid_columns/diagrams/grid_columns.semantic.json.
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.

Exercise: grid_columns_exercise.html

Build a three-column dashboard layout