Equal width

Equal-width columns are easiest to maintain with CSS Grid. Use repeat(..., minmax(0, 1fr)) to keep each column the same width.

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

{{'<'}}div class="equal-grid equal-grid_three"{{'>'}}
  {{'<'}}div class="equal-grid__item"{{'>'}}1 of 3{{'<'}}/div{{'>'}}
  {{'<'}}div class="equal-grid__item"{{'>'}}2 of 3{{'<'}}/div{{'>'}}
  {{'<'}}div class="equal-grid__item"{{'>'}}3 of 3{{'<'}}/div{{'>'}}
{{'<'}}/div{{'>'}}
equal-grid: display: grid; gap: 24px;
equal-grid_three: grid-template-columns: repeat(3, minmax(0, 1fr));