| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
age: 28407
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 19:28:18 GMT
etag: "472489315418870593f250827d6f2927-ssl-df"
server: Netlify
strict-transport-security: max-age=31536000
vary: Accept-Encoding
x-nf-request-id: 01K7CYAAPK5XCC943B55TC8QQM
content-length: 1879
Box alignment align-items
Box alignment align-items
I have used a grid background image to show the grid in this example. I’ve defined 4 equal sized grid areas on the left which cover a square area inside three row and column lines.
I’m using the align-items property with a value of center. This centres the content of all of the grid items.
Read the specification | View example as full page
See the Pen Grid by Example 24: align-items by rachelandrew (@rachelandrew) on CodePen.