Quick Reference
This is a quick reference list of CSS grid properties used to create grid templates and style them for a responsive design.
- CSS – grid PropertyThe grid property is shorthand for grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow.
- CSS – grid-area PropertyThe grid-area property specifies a grid item’s size and location in a grid layout, and is a shorthand property for other grid properties.
- CSS – grid-auto-columns PropertyThe grid-auto-columns property sets a size for the columns in a grid container, affecting only columns with the size not set.
- CSS – grid-auto-flow PropertyThe grid-auto-flow property controls how auto-placed items get inserted in the grid.
- CSS – grid-auto-rows PropertyThe grid-auto-rows property sets a size for the rows in a grid container, affecting only rows with the size not set.
- CSS – grid-column PropertyThe grid-column property specifies a grid item’s size and location in a grid layout, and is a shorthand property for other grid properties.
- CSS – grid-column-end PropertyThe grid-column-end property defines how many columns in a grid layout an item will span, or on which column-line the item will end.
- CSS – grid-column-gap PropertyThe grid-column-gap property defines the size of the gap between the columns in a grid layout.
- CSS – grid-column-start PropertyThe grid-column-start property defines on which column-line the item will start in a grid layout.
- CSS – grid-gap PropertyThe grid-gap property defines the size of the gap between the rows and columns in a grid layout, and is a shorthand property for other grid properties.
- CSS – grid-row PropertyThe grid-row property specifies a grid item’s size and location in a grid layout, and is a shorthand property for other grid properties.
- CSS – grid-row-end PropertyThe grid-row-end property defines how many rows an item will span, or on which row-line the item will end.
- CSS – grid-row-gap PropertyThe grid-row-gap property defines the size of the gap between the rows in a grid layout.
- CSS – grid-row-start PropertyThe grid-row-start property defines on which row-line the item will start in a grid layout.
- CSS – grid-template PropertyThe grid-template property is a shorthand property for other grid properties.
- CSS – grid-template-areas PropertyThe grid-template-areas property specifies areas within a grid layout.
- CSS – grid-template-columns PropertyThe grid-template-columns property specifies the number and widths of columns in a grid layout, where each value is the size of the respective column.
- CSS – grid-template-rows PropertyThe grid-template-rows property specifies the number and heights of rows in a grid layout, where each value is the size of the respective row.
- CSS – row-gap PropertyThe row-gap property specifies the gap between the grid rows.
CSS Notes:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.