| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
age: 0
cache-control: public,max-age=0,must-revalidate
cache-status: "Netlify Edge"; fwd=miss
content-encoding: gzip
content-type: text/html; charset=UTF-8
date: Mon, 13 Oct 2025 11:54:41 GMT
etag: "3207413fec282d119c233027ec6ab342-ssl-df"
server: Netlify
strict-transport-security: max-age=31536000
vary: Accept-Encoding
x-nf-request-id: 01K7EPREHJWPWC37V5TH3TREZF
Aligning the grid with space-around and space-between
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-aroundjustify-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.