In the previous post CSS tutorial series: Grid Layout (Grid intro), we've seen how to define a grid and how to specify columns and rows.
The Grid layout and Flexbox share some properties such as justify-content and align-content.
Justify content
| Property | Value |
|---|---|
justify-content |
space-evenly, space-around, space-between, center, start, end
|
This property aligns the grid items along the X-axis of the grid-container.
Align content
| Property | Value |
|---|---|
align-content |
space-evenly, space-around, space-between, center, start, end
|
This property aligns the grid items vertically in the grid-container.
Grid area
You've encountered in the previous tutorial the grid-row-start, grid-row-end, grid-column-startandgrid-column-end` properties.
These properties make up the grid-area shorthand. This property can name grid items which could be referenced later by another property grid-template-areas which is a property of the grid container.
Order of items
In CSS Grid, the grid items are presented in the same order they are in the document object model (see example below).
You can change the grid items position using the order property.
Just like in flexbox, the items that have lower order values are placed at the beginning of the grid and the items that have higher values are placed after.
Top comments (0)