0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>We got so carried away studying the features of grids that we did not notice that it is now time for another test. I hope that you have not forgotten your cool landscape design skills?</p>
1
<p>We got so carried away studying the features of grids that we did not notice that it is now time for another test. I hope that you have not forgotten your cool landscape design skills?</p>
2
<p>Now you have been assigned the task of laying out a small park of the kind that we have become accustomed to: with a lawn, rocks, lakes, sand,<em>and, of course, lava</em>.</p>
2
<p>Now you have been assigned the task of laying out a small park of the kind that we have become accustomed to: with a lawn, rocks, lakes, sand,<em>and, of course, lava</em>.</p>
3
<p>To do this, you need to:</p>
3
<p>To do this, you need to:</p>
4
<ul><li><a>Create a grid</a>using grid-template-columns and grid-template-rows;</li>
4
<ul><li><a>Create a grid</a>using grid-template-columns and grid-template-rows;</li>
5
<li><a>Assign the grid items coordinates</a>using grid-column and grid-row;</li>
5
<li><a>Assign the grid items coordinates</a>using grid-column and grid-row;</li>
6
<li>or you can approach it another way and use<a>the named areas</a>and the grid-template-areas property to declare a grid structure.</li>
6
<li>or you can approach it another way and use<a>the named areas</a>and the grid-template-areas property to declare a grid structure.</li>
7
</ul><p>The choice is yours!</p>
7
</ul><p>The choice is yours!</p>
8
<p>Grid cell sizes are multiples of 10px.</p>
8
<p>Grid cell sizes are multiples of 10px.</p>
9
<p>Assign values to the grid-column-start/grid-column-end and grid-row-start/grid-row-end properties of 1 to 5 only for the first four elements with the classes element--1, element--2, element--3 and element--4. The remaining elements will automatically occupy the remaining empty cells in the grid.</p>
9
<p>Assign values to the grid-column-start/grid-column-end and grid-row-start/grid-row-end properties of 1 to 5 only for the first four elements with the classes element--1, element--2, element--3 and element--4. The remaining elements will automatically occupy the remaining empty cells in the grid.</p>