The shape of grid-lanes

display:grid-lanes;
Choose columns: grid-template-columns: 1fr 1fr; Or rows: grid-template-rows: 1fr 1fr;
Choose lane sizes: grid-template-columnsrows: 2fr 1fr 3fr 1fr;
Span columns: grid-columnrow: span 2;
Dictate specific lanes: grid-columnrow: 1;

To do this, we'll go through these 5 steps. On the right is a stack of DIVs, no special layout. 1. opt-in to grid lanes by using the new display type. Small visual difference here because I'm using gap. display:grid-lanes turns it into a single lane, vertical by default, with some gap. 2. Then, to set the orientation for your lanes, you can set either grid-template-columns, for columns or grid-template-rows for rows. The browser does the right thing for you automatically, just based on which of these properties is set. 3. Then control the shape and number of your lanes. You can reuse the full power of the grid track sizing syntax, even using the repeat function, the fr unit, and the auto-fill/fit keywords. Here we're creating 4 lanes that are 2fr 1fr 3fr 1fr wide. 4. One other thing we can do to control the shape of our layout is customize how many lanes specific items span. For example here, the pink items span 2 lanes. 5. And finally, you can also dictate specific lanes for your items, just like in grid. Again though, only along the lane axis, because that's the only axis that exists. Here I'm making the the blue item go to the first lane, by using the grid-column property. You'd use grid-row in a row-oriented layout. So, that's for the shape of your layout.