The grid layout of CSS uses the concept of implicit and explicit grids. This is very important to remember when creating a grid; otherwise, we’d have many rows and columns that we didn’t expect.
The grid container automatically generates the implicit grid when the grid items are positioned outside the explicit grid. The grid container creates implicit grid tracks by drawing implicit grid lines on the grid. These lines and the clear grid form the implicit grid.
The explicit grid is defined with the help of grid-template-columns, grid-template-rows, and grid-template-areas properties. However, elements that don’t fit within a clearly defined grid are still possible. Let’s imagine we define a grid that can only hold six grid items, but the grid container holds nine grid items. Only six items will fit inside the defined grid, leaving three extra. The implicit grid takes place here.
Let’s have a look at the example to understand the concept.
Line 1-7: We’ve set the number of rows and columns of the grid and the distance between each grid item. There are two rows and two columns in this grid.
Line 8-13: We’ve set the padding and the grid’s background color.
We’ll explicitly create a grid with two rows and two columns. So, four grid items can fit in. But we have six grid items. So, to accommodate the remaining two items, the implicit grid is created.