Combining automatic and explicit coordinates

So, we have learned how the grid-template-columns and grid-template-rows properties affect the number and size of grid columns and rows, and we have seen how the grid-column-start/grid-column-end and grid-row-start/grid-row-end properties help us to position grid items using specific coordinates in the grid layout.

Now is the perfect time to figure out how we can use these properties together.

Let’s create a grid from scratch and define the columns and rows for it, and then we will manage the individual elements.

Let’s start by creating a grid container. Note that by default, at the time it is created the grid will have only one column that stretches the entire width of the container, and each element will occupy a whole row.