0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>As you may have noticed, we now have empty areas that are not filled with elements that we can use. Therefore, our next step after defining our rows and columns will be to distribute the elements. Why waste this precious space?</p>
1
<p>As you may have noticed, we now have empty areas that are not filled with elements that we can use. Therefore, our next step after defining our rows and columns will be to distribute the elements. Why waste this precious space?</p>
2
<p>The idea is that we should correctly distribute this space among the existing elements.</p>
2
<p>The idea is that we should correctly distribute this space among the existing elements.</p>
3
<p>How can we do that? Should we assign a start and end to all of the elements? That’s not necessary. Some of the elements may have clear coordinates in the grid, and some may take up the remaining space, that is, the elements will be automatically spaced by the browser.</p>
3
<p>How can we do that? Should we assign a start and end to all of the elements? That’s not necessary. Some of the elements may have clear coordinates in the grid, and some may take up the remaining space, that is, the elements will be automatically spaced by the browser.</p>
4
<p>This works as follows:</p>
4
<p>This works as follows:</p>
5
<ol><li>First, the elements that have explicit coordinates are lined up.</li>
5
<ol><li>First, the elements that have explicit coordinates are lined up.</li>
6
<li>Then the elements that have not been explicitly assigned coordinates are placed. They are arranged sequentially according to the order in the layout in the remaining free cells from the start of the grid to the end. In terms of their dimensions, these grid items take up just one cell.</li>
6
<li>Then the elements that have not been explicitly assigned coordinates are placed. They are arranged sequentially according to the order in the layout in the remaining free cells from the start of the grid to the end. In terms of their dimensions, these grid items take up just one cell.</li>
7
</ol><p>I bet that you can’t wait to try all of this out in practice.</p>
7
</ol><p>I bet that you can’t wait to try all of this out in practice.</p>