| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
age: 20479
cache-control: public,max-age=0,must-revalidate
cache-status: "Netlify Edge"; hit
content-encoding: gzip
content-type: text/html; charset=UTF-8
date: Sun, 12 Oct 2025 02:21:12 GMT
etag: "f3c9e43da86f3c48ce146959966fc31a-ssl-df"
server: Netlify
strict-transport-security: max-age=31536000
vary: Accept-Encoding
x-nf-request-id: 01K7B3HN3BPHAGRTZT9F13ZB8M
content-length: 2028
Defining a Grid
Defining a Grid
To define a Grid use display:grid or display:inline-grid on the parent element. You can then create a grid using the grid-template-columns and grid-template-rows properties.
I am using the grid-gap property to create a gap between my columns and rows of 10px. This property is a shorthand for grid-column-gap and grid-row-gap so you can set these values individually.
All direct children of the parent now become grid items and the auto-placement algorithm lays them out, one in each grid cell. Creating extra rows as needed.
Read the specification | View example as full page
See the Pen Grid by Example 1: Defining a Grid by rachelandrew (@rachelandrew) on CodePen.