Automatic coordinates of the grid items: columns

OK, so we have learned how to save time and use named areas! Cool!

But let’s now go back to the very beginning, to the first assignments that we completed in this chapter. For these assignments, we had to work with a grid whose fixed width was defined by a 4-by-4 cell. Attentive students probably already noticed the mysterious properties of grid-template-columns and grid-template-rows. What kind of properties are these?

The grid-template-columns property lists the number and width of future grid columns. For example, the grid-template-columns: 100px 100px 100px; entry tells the grid:

You will have three columns that are each 100px wide.

But what happens to rows at this time?

If you do not specify any parameters for rows, then they can vary in number. The sequence of actions is as follows:

1. All grid items are arranged in a single row according to the declared column layout.
2. If there are more grid items than columns, then the elements that do not fit into a single row will overflow into the next row and fill it.
3. New rows are generated until all of the grid items populate the columns of the layout. If the last row is not completely filled with elements, then this residual space in the grid remains empty.

Consider the following example. Take the grid with the five elements that have been assigned a single column. According to the layout, it turns out that only one grid item can fit in the first row of the grid. The remaining elements will be transferred to the new rows, and thus they will form five rows. That is, they will line up in a column:

If we increase the number of columns to two, then two elements will be able to be placed in each row. In other words, the elements will form a total of three rows. The first and second rows will contain two elements each, and the third row will contain one row.

As far as the height of the rows is concerned, it will be distributed evenly so that the rows fill the entire grid space.

Well, to make everything completely clear, let’s move on to best practices.