- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Laying out a simple blog page</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>
<!--
<article class="blog-item">
<h2>Feng Shui: myths and reality</h2>
<img src="pots.jpg" width="150" height="80" alt="Proper arrangement of pots">
<p>Arrange the pots according to the rules of Feng Shui.</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;
}
.sidebar {
grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 3;
grid-column-end: 4;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Add the grid item coordinates for column grid lines
1to3for the.blogblock. - Then uncomment another article in the
.blogblock in the markup and check how the grid layout now behaves.
Comments