Spanning columns

Simple grid’s like we looked at in the last lesson are very useful, but a little limited. One of the reasons that Grid is so powerful is the ability to have grid items span across multiple cells.

There are a few different ways that we can span columns, with the simplest option being the span keyword.

.grid-item {
  /* span across 3 grid cells */
  grid-column: span 3;
}

Quick spanning challenge

Set up a simple 3 column grid with the example below, and then have the <h1> element span across two columns. Once you have that working, switch it for two rows instead.