Understanding the difference between grid-template and grid-auto

Click for: original source

Post by Ire Aderinokun focusing on CSS Grid Layout and about difference between grid-template and grid-auto. Mainly about the difference between grid-template-rows/columns and grid-auto-rows/columns. At face value they seemed to be doing almost the same thing.

The definitions of explicit and implicit grids can be a bit circular.

In the article you will find examples how to work with explicit and implicit grids. And also good explanation how grid-auto works. Because the structure and syntax of the grid-template-* and grid-auto-* property names have some similarities, it can be easy to think the values they accept and therefore what they achieve, are similar as well.

To summarize, the grid-template-* properties are used to create, place, and size cells for the explicit grid.

Any cell that exists in the grid that is not explicitly created by this property forms part of the implicit grid, which can be sized by the grid-auto-* properties. Good read for any frontend developer.

[Read More]

Tags web-development ux css browsers