Theory
Theory
Comments

Laying out a simple page: the sidebar

In this assignment we will work on the sidebar, which is where we want to place the review block.

The .sidebar block is located almost at the very end in the layout, just before the footer, but we can use grids to easily move it to any place on the page without changing anything in the layout. This is another great feature of grids!

Place it to the right of the promo block: it will occupy the entire third column and two rows, the second and the one after it.

It is noteworthy that the block begins on a second row that is fixed in height and continues on the third row, where the height is automatically assigned. Why is this the case when our block contains text, after all?

The fact is that it is still permissible to create a fixed height row even if it contains blocks with text content. However, we need to make sure that these blocks are placed, since in addition to the fixed height grid cells we also have automatic height grid cells, which leaves the possibility open of increasing the text size.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Laying out a simple page: the sidebar</title> <link href="lopatkin.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="index-grid"> <header class="site-header"> <h1 class="visually-hidden">The Lopatkin Garden Accessories Store</h1> <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> <section class="promo"> <h2 class="visually-hidden">Promotions</h2> <img src="garden.jpg" width="360" height="200" alt="“2018 Garden Fashion” Collection"> <a class="button button--promo" href="#">Monthly promotions</a> </section> <section class="blog"> <article class="blog-item"> <h2>Where are the gnomes?</h2> <img src="gnomes.png" width="150" height="80" alt="Mature purple garden gnomes"> <p>Fill the backyard with gnomes.</p> <a class="button" href="#">Read</a> </article> </section> <aside class="sidebar"> <h2>Reviews</h2> <ul class="reviews"> <li class="review-item"> <p>I liked everything very much. Especially the shovel. Useful thing. I like it.</p> <cite>Oleg_</cite> </li> <li class="review-item"> <p>I managed to decorate my yard. Thanks for your great advice! The gnomes are cute.</p> <cite>Aristarch</cite> </li> <li class="review-item"> <p>The gnomes are very scary. I’m not certain how you can sell them at all!11</p> <cite>not_your_girl_79</cite> </li> </ul> </aside> <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

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

Goalscompleted

Assign the grid item coordinates for column grid lines 3 to 4 and row lines 2 to 4 for the .sidebar block.

Laying out a simple page: the sidebar

Comments

Log in

Sign up

Restore access