Theory
Theory
Comments

Laying out the online store catalog: creating an internal grid

We did a great job with the previous assignments, but this is not the time to rest on our laurels.

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.

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.

Here’s what the resulting grid will look like:

Schematic representation of the page grid

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:

.inner-grid {
  display: grid;
  grid-template-rows: auto auto 100px;
}

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!

Let’s start, just like we did last time, by creating a grid, setting the grid spacing, and declaring a three-column grid.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Laying out the online store catalog: creating an internal grid</title> <link href="lopatkin.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="inner-grid"> <header class="site-header"> <nav class="site-nav"> <a class="logo"> <img src="logo.svg" width="40" height="40" alt=""> Lopatkin </a> <a href="#">About Us</a> <a href="#">Catalog</a> <a href="#">Blog</a> </nav> </header> <main class="catalog-grid"> <h1 class="visually-hidden">Garden accessories catalog</h1> <section class="filter"> <h2>Filter</h2> <form class="filter-form" action="https://echo.htmlacademy.ru/courses"> <fieldset> <legend>Price:</legend> <p class="filter-price"> <label> <input type="radio" name="prices" value="1"> 1–1000 </label> <label> <input type="radio" name="prices" value="2"> 1001–5000 </label> </p> </fieldset> <fieldset> <legend>Brand:</legend> <p class="filter-brands"> <label> <input type="checkbox" name="brand-lopatkin" value="1"> Lopatkin </label> <label> <input type="checkbox" name="brand-gardener" value="1"> Gardener </label> <label> <input type="checkbox" name="brand-gnomhouse" value="1"> Gnom house </label> <label> <input type="checkbox" name="brand-mrpot" value="1"> Mr. Pot </label> <label> <input type="checkbox" name="brand-grasson" value="1"> Grass On </label> </p> </fieldset> <button type="submit">Submit</button> </form> </section> <section class="sort"> <h2>Sort</h2> <ul> <li><a href="#">By price</a></li> <li><a href="#">By rating</a></li> </ul> </section> <article class="good"> <h2 class="good-name">Table made of girders</h2> <img src="chairs.jpg" width="168" height="70" alt="Table made of girders"> </article> <article class="good"> <h2 class="good-name">Decorative stone</h2> <img src="stones.jpg" width="168" height="70" alt="Decorative stone"> </article> <article class="good"> <h2 class="good-name">Garden gnome</h2> <img src="gnomes.png" width="168" height="70" alt="Garden gnome"> </article> <article class="good"> <h2 class="good-name">Pot</h2> <img src="pots.jpg" width="168" height="70" alt="Pot"> </article> <article class="good"> <h2 class="good-name">Hedge trimmer</h2> <img src="tools.jpg" width="168" height="70" alt="Hedge trimmer"> </article> <article class="good"> <h2 class="good-name">Lantern</h2> <img src="light.jpg" width="168" height="70" alt="Lantern"> </article> </main> <footer class="site-footer"> <a class="vkontakte" href="https://vk.com/htmlacademy">VK</a> <a class="facebook" href="https://www.facebook.com/htmlacademy">Facebook</a> <a class="instagram" href="https://instagram.com/htmlacademy">Instagram</a> </footer> </div> </body> </html>

CSS

.inner-grid { display: grid; width: 550px; margin-left: auto; margin-right: auto; gap: 20px; grid-template-columns: 170px 170px 170px; grid-template-rows: auto auto 100px; } .site-header { grid-column-start: 1; grid-column-end: 4; } .site-footer { grid-column-start: 1; grid-column-end: -1; }

Goalscompleted

Set the grid display for the .catalog-grid block,
as well as grid spacing of 20px between the grid columns and rows,
and then create three columns, where each is 170px in size.

Laying out the online store catalog: creating an internal grid

Comments

Log in

Sign up

Restore access