Designing Columns

To turn a block into a grid, we use display: grid;. But the most interesting part starts when slicing columns.

1. The fr (Fraction) Unit

This is the " gold standard " of grids. 1fr is one share of remaining space.

• 1fr 2fr: the second column will be twice as wide as the first.
• It automatically accounts for gap, unlike percentages.

2. The repeat() Function

Don't write 1fr 1fr 1fr 1fr. Write repeat(4, 1fr).

.layout {
  display: grid;
  grid-template-columns: 200px repeat(2, 1fr) 100px;
}