0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>We did a great job with the previous assignments, but this is not the time to rest on our laurels.</p>
1
<p>We did a great job with the previous assignments, but this is not the time to rest on our laurels.</p>
2
<p>The second interface that we can lay out using grids will be our online store catalog. And just like any catalog, we can also find the following elements here: a footer, a filter, “Sort by” block, an assortment of products for sale, and a footer.</p>
2
<p>The second interface that we can lay out using grids will be our online store catalog. And just like any catalog, we can also find the following elements here: a footer, a filter, “Sort by” block, an assortment of products for sale, and a footer.</p>
3
<p>Well, and just to make sure that you don’t get bored as well as to introduce you to a device that will come in handy in real projects, we’ll take the part with the header and footer from the previous page and make a frame out of it. Assign the inner-grid class to the general container, which means the “inner” page. We’ll arrange various content inside, which will form an independent unit, which allows us to make corrections without breaking anything, and it is also easy to replace it with something else.</p>
3
<p>Well, and just to make sure that you don’t get bored as well as to introduce you to a device that will come in handy in real projects, we’ll take the part with the header and footer from the previous page and make a frame out of it. Assign the inner-grid class to the general container, which means the “inner” page. We’ll arrange various content inside, which will form an independent unit, which allows us to make corrections without breaking anything, and it is also easy to replace it with something else.</p>
4
<p>Here’s what the resulting grid will look like:</p>
4
<p>Here’s what the resulting grid will look like:</p>
5
<p>Please note the source code for the assignment: the .inner-grid block consists of three rows: the footer has a fixed size, the row with the header has an automatically determined height, just like in the previous assignment, and the remaining space is reserved for the content:</p>
5
<p>Please note the source code for the assignment: the .inner-grid block consists of three rows: the footer has a fixed size, the row with the header has an automatically determined height, just like in the previous assignment, and the remaining space is reserved for the content:</p>
6
.inner-grid { display: grid; grid-template-rows: auto auto 100px; }<p>The .catalog-grid block is used as a content area, which we will also make a grid in turn. One grid will fit inside the second. It’s magic!</p>
6
.inner-grid { display: grid; grid-template-rows: auto auto 100px; }<p>The .catalog-grid block is used as a content area, which we will also make a grid in turn. One grid will fit inside the second. It’s magic!</p>
7
<p>Let’s start, just like we did last time, by creating a grid, setting the grid spacing, and declaring a three-column grid.</p>
7
<p>Let’s start, just like we did last time, by creating a grid, setting the grid spacing, and declaring a three-column grid.</p>