Aligning The Grid With Space-around And Space-between

Trang chủ » Html Grid Column Gap » Aligning The Grid With Space-around And Space-between

Có thể bạn quan tâm

Aligning the grid with space-around and space-between

In this example I am creating a four column track grid, the tracks have absolute sizes and in total are smaller than the area of the grid container. This time I have used:

  • align-content: space-around
  • justify-content: space-between

This means that extra space is distributed around the tracks and our desired 10 pixel gutter gets more space. However so do any areas which span more than one track as where they cross a gutter they gain this extra space too.

Read the specification | View example as full page

See the Pen Grid by Example 33: fixed sizes can get extra space due to alignment properties by rachelandrew (@rachelandrew) on CodePen.

Từ khóa » Html Grid Column Gap