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 40px | Grid Template Columns |
grid-template-rows: 25% 100px auto | Grid Template Rows |
grid-template-areas: "a b c" | none | Grid Template Areas |
grid-template: "a a a" 20% "b b b" auto | 100px 1fr / 50px 1fr | Grid Template |
grid-column-gap: 10px | Grid Column Gap |
grid-row-gap: 10px | Grid Row Gap |
justify-items: start | end | center | stretch | Justify Items |
align-items: start | end | center | stretch | Align Items |
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | Justify Content |
align-content: flex-start | flex-end | center | space-between | space-around | stretch | Align Content |
grid-auto-columns: 100px | max-content | min-content | Grid Auto Columns |
grid-auto-rows: 100px | max-content | min-content | Grid Auto Rows |
grid-auto-flow: row | column | row dense | column dense | Grid Auto Flow |
grid-column-start: 2 | areaname | span 2 | span areaname | auto | Grid Column Start |
grid-column-end: 2 | areaname | span 2 | span areaname | auto | Grid Column End |
grid-row-start: 2 | areaname | span 2 | span areaname | auto | Grid Row Start |
grid-row-end: 2 | areaname | span 2 | span areaname | auto | Grid Row End |
grid-column: 3 / span 2 | Grid Column |
grid-row: 3 / span 2 | Grid Row |
justify-self: start | end | center | stretch | Justify Self |
align-self: start | end | center | stretch | Align Self |