Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

When to use explicit grid or implicit grid?


Asked by Khaleesi Campos on Dec 04, 2021 FAQ



The explicit grid is the one that you create using grid-template-columns or grid-template-rows. The implicit grid is created when content is placed outside of that grid — such as into our rows. By default, tracks created in the implicit grid are auto sized, which in general means that they are large enough to fit their content.
Thereof,
Implicit Grids If there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid, the grid container automatically generates grid tracks by adding grid lines to the grid. The explicit grid together with these additional implicit tracks and lines forms the so called implicit grid.
Subsequently, If you declare the number of rows and columns in your grid, the grid is explicit. You can use two properties to make an explicit grid: grid-template-columns lets you define the number of columns. grid-template-rows lets you define the number of rows. This creates a grid with four columns and three rows.
Also Know,
We can define a fixed number of lines and tracks that form a grid by using the properties grid-template-rows, grid-template-columns, and grid-template-areas. This manually defined grid is called the explicit grid. An explicit grid with 4 vertical tracks (columns) and 2 horizontal tracks (rows).
Likewise,
Implicit tracks are tracks that are only created by placing items. This behaviour in Grid is intentional, and very useful. An example is if you have a grid with four columns that we want to fill with an indeterminate number of items (e.g. a news feed.