How to populate items in columns in a CSS grid layout
This article mainly explains "how to fill items in the columns in the CSS grid layout". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to fill projects in the columns in the CSS grid layout".
Suppose we have n projects, and we must sort them by column in the grid layout. The number of columns is fixed, and we must also ensure that the number of rows in the grid layout is minimized in order to effectively populate the grid. In this article, I treat numbers as items. And arrange the numbers between 1 and 13 in the grid layout according to our requirements. The number of columns is fixed at three. I'll demonstrate this using React and SCSS (Sassy CSS).
If it had to be arranged by row, it would be very simple. Just use CSS, and the code is as follows:
The complete code, including the CSS section, is as follows:
Output effect:
As you can see, the numbers are arranged in rows. Here, the grid project flows horizontally and automatically creates new rows as needed. When the grid project flow reaches the end of the column, a new row is created. This is also called row precedence because the next line starts only when the previous line is fully filled.
But our requirement is to arrange items by column, so in order to arrange items by column, we need to know the number of rows in the grid layout. I can explain why you need to know the number of rows. In a line-by-line arrangement, the next row starts only when the current row is fully filled (that is, the number of items in the previous row is equal to the number of columns).
Similarly, in a column-by-column arrangement, the new column starts only when the current column is fully filled (that is, the number of items in the previous column is equal to 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 in the grid layout? You can learn it through basic math. We now know the number of grid projects and the number of columns. Therefore, if we want to minimize the number of rows, we can use this formula Math.ceil (itemsCount/columnsCount), why should we minimize the number of rows, because if we use larger random integers as the number of rows, then the grid will not be filled effectively, and there will be some grids in the whole layout that cannot be filled. The following CSS code is arranged by column, and because we have to set the grid-template-rows field dynamically, this field does not exist in the following code:
The complete code, including the CSS section, is as follows:
You can see that in line 16, the number of rows is counted. 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 minimum number of rows is five. If the number of rows is less than five, it cannot be arranged. And if the number of rows is greater than five, there will be unfilled blank space in the layout. The column begins only when the current column is fully filled.
Thank you for your reading, the above is the content of "how to fill items in the columns in the CSS grid layout". After the study of this article, I believe you have a deeper understanding of how to fill projects in the columns in the CSS grid layout. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
