The grid-auto-flow CSS property allows us to control the flow of grid items that are automatically placed when they are not explicitly positioned with any grid-placement properties.

The grid-auto-flow property is part of the CSS Grid Layout specification.

Subscribe for more videos like this : https://www.youtube.com/c/CodeCanvas?sub_confirmation=1

The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track or pattern of tracks.

Subscribe for more videos like this : https://www.youtube.com/c/CodeCanvas?sub_confirmation=1

The grid-area CSS property is a shorthand that specifies the location and the size of a grid item in a grid layout by setting the value of grid-row-start, grid-column-start, grid-row-end and grid-column-end in one declaration.

Subscribe for more videos like this : https://www.youtube.com/c/CodeCanvas?sub_confirmation=1

The grid CSS property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.

This property is a shorthand for the following CSS properties:

1. grid-auto-columns

2. grid-auto-flow

3. grid-auto-rows

4. grid-template-areas

5. grid-template-columns

6. grid-template-rows

Subscribe for more videos like this : https://www.youtube.com/c/CodeCanvas?sub_confirmation=1

The gap CSS shorthand property sets the gaps between rows and columns. This property applies to multi-column, flex, and grid containers.

Demo1 : https://codepen.io/seyedi/pen/ZEQgoYW

Demo2 : https://codepen.io/seyedi/pen/pogMVEg

Demo3 : https://codepen.io/seyedi/pen/WNrVqyL

Subscribe for more videos like this : https://www.youtube.com/c/CodeCanvas?sub_confirmation=1