| 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 00:46:22 GMT
etag: "ec830617bd03dba0ea9d92315eef53e7-ssl-df"
server: Netlify
strict-transport-security: max-age=31536000
vary: Accept-Encoding
x-nf-request-id: 01K7DGGPT43YDS6GKE7AF06X2D
Percentage based grids and gaps
Percentage based grids and gaps
A grid with a width of 90%. Six column tracks of 10% each, 5 gutter tracks of 2% each.
The grid-gap property controls columns and rows but as the grid has no height, the row gap resolves to 0.
If we give the grid a height, there is something for 2% to be a percentage of. So we get a gap.
Read the specification | View example as full page
See the Pen Grid by Example 36: Percentage grids and gaps by rachelandrew (@rachelandrew) on CodePen.