CSS Grid Cheat Sheet

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

grid-template-columns: 40px 50px auto 50px 40pxGrid Template Columns
grid-template-rows: 25% 100px autoGrid Template Rows
grid-template-areas: "a b c" | noneGrid Template Areas
grid-template: "a a a" 20% "b b b" auto | 100px 1fr / 50px 1frGrid Template
grid-column-gap: 10pxGrid Column Gap
grid-row-gap: 10pxGrid Row Gap
justify-items: start | end | center | stretchJustify Items
align-items: start | end | center | stretchAlign Items
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenlyJustify Content
align-content: flex-start | flex-end | center | space-between | space-around | stretchAlign Content
grid-auto-columns: 100px | max-content | min-contentGrid Auto Columns
grid-auto-rows: 100px | max-content | min-contentGrid Auto Rows
grid-auto-flow: row | column | row dense | column denseGrid Auto Flow
grid-column-start: 2 | areaname | span 2 | span areaname | autoGrid Column Start
grid-column-end: 2 | areaname | span 2 | span areaname | autoGrid Column End
grid-row-start: 2 | areaname | span 2 | span areaname | autoGrid Row Start
grid-row-end: 2 | areaname | span 2 | span areaname | autoGrid Row End
grid-column: 3 / span 2Grid Column
grid-row: 3 / span 2Grid Row
justify-self: start | end | center | stretchJustify Self
align-self: start | end | center | stretchAlign Self

Leave a Reply

Your email address will not be published. Required fields are marked *