📚 Learn these 10 CSS Grid properties that you will use 80% of the time:
1. grid-template-columns: This property defines the columns of the grid, specifying the width of each column.
↓
1. grid-template-columns: This property defines the columns of the grid, specifying the width of each column.
↓
2. grid-template-rows: This property defines the rows of the grid, specifying the height of each row.
3. grid-column-gap: This property defines the space between two columns in the grid.
3. grid-column-gap: This property defines the space between two columns in the grid.
4. grid-row-gap: This property defines the space between two rows in the grid.
5. grid-gap: This property is a shorthand for both the grid-column-gap and grid-row-gap properties.
5. grid-gap: This property is a shorthand for both the grid-column-gap and grid-row-gap properties.
6. grid-area: This property defines a rectangular region on the grid.
7. grid-template: This property is a shorthand for both the grid-template-rows and grid-template-columns properties.
7. grid-template: This property is a shorthand for both the grid-template-rows and grid-template-columns properties.
8. justify-items: This property defines how items are aligned horizontally within the grid.
9. align-items: This property defines how items are aligned vertically within the grid.
9. align-items: This property defines how items are aligned vertically within the grid.
10. grid-auto-flow: This property defines how items are placed within the grid when there is not enough space for them.
Loading suggestions...