How to fill items in columns in CSS Grid Layout

Suppose we have n items and we have to sort these items into columns in a grid layout. The number of columns is fixed, and we must also ensure that there are a minimum number of rows in the grid layout in order to fill the grid efficiently. In this article, I treat numbers as items. And arrange the numbers between 1-13 in the grid layout according to our requirements. The number of columns is fixed to three. I will demonstrate this using React and SCSS (Sassy CSS).

1. If you have to arrange it in rows, it will be very simple. You can use CSS, the code is as follows:

The complete code, including the CSS part, is as follows:

Output Effect

As you can see, the numbers are arranged in rows. Here, grid items flow horizontally, automatically creating new rows as needed. When the flow of grid items reaches the end of a column, a new row is created. This is also called row-major ordering because the next row is started only when the previous row is completely filled.

But our requirement is to arrange items in columns, so in order to arrange items in columns, we need to know the number of rows in the grid layout. I can explain why you would need to know the number of rows. In a row-by-row arrangement, the next row is started only when the previous row is completely filled (i.e., the number of items in the previous row has equaled the number of columns).

Similarly, in a column-by-column arrangement, a new column starts only when the previous column is completely filled (i.e., the number of items in the previous column has equaled the number of rows). Therefore, we need to know how many rows there are. So the question is, how can we know the number of rows to be made in the grid layout? We can learn it through basic mathematics... We now know the number of grid items, and we also know the number of columns. Therefore, we can use this formula Math.ceil(itemsCount/columnsCount) to minimize the number of rows. Why do we need to minimize the number of rows? Because if we use a larger random integer as the number of rows, the grid will not be filled effectively, and some grids in the entire layout will not be filled. The following CSS code is arranged in columns, and because we have to set the grid-template-rows field dynamically, the field does not exist in the following code:

The complete code, including the CSS part, is as follows:

You can see that in line 16, the number of rows is calculated. On line 17, the grid-template-rows field is set dynamically.

Here you can see that the numbers are arranged in columns with a fixed number of columns (3). Again, the minimized number of rows is five. If there are fewer than five rows, no arrangement can be performed. And if the number of rows is greater than five, there will be unfilled empty spaces in the layout. A column starts only when the previous column is completely filled.

Conclusion

This trick of calculating the number of rows to be made in the grid layout and setting it dynamically solves the problem very easily. Since we need to know the number of rows to arrange in columns, we can say that both the number of rows and the number of columns need to be known when arranging the items to solve this problem. Note: When the width of the layout (not the number of columns) is fixed, the same type of solution can be used.

This is the end of this article about how to fill items in columns in CSS grid layout. For more information about filling items in CSS grid layout, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!