Доброго времени суток.
Решил по макету:
https://www.figma.com/file/SPAWT6s7XuBLkAf8RQlsMy/... поучить грид верстку.
Проблема моя заключается в том, что когда ширина вьюпорта(извините, если ошибаюсь с терминами, то есть экрана устройства) у меня становится меньше 700px, у меня изображения начинают принимать различную высоту в нижней строке колонок
Исходники размещены тут:
https://hakaslepehen.github.io/grid-lesson/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width , initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="big-item"></div>
<div class="card1 card">
<img src="./Layer2.svg" alt="Girl in glasses">
<div class="card__text">
<div class="card__date">NOVEMBER 24, 2020</div>
<div class="card__label">HOW TO FIND DESIGN INSPIRATION IN THE SIMPLE THINGS AROUND YOU</div>
</div>
</div>
<div class="card2 card">
<img src="./Layer2.svg" alt="">
<div class="card__text">
<div class="card__date">NOVEMBER 18, 2020</div>
<div class="card__label">THE ONLY GUIDE TO CHOOSING WEBSITE PHOTOS YOU’LL EVER NEED</div>
</div>
</div>
<div class="card3 card">
<img src="./Layer2.svg" alt="">
<div class="card__text">
<div class="card__date">NOVEMBER 08, 2020</div>
<div class="card__label">GROWTH HACK YOUR WAY TO A SUCCESSFUL FREELANCE CAREER</div>
</div>
</div>
<div class="card4 card">
<img src="./Layer2.svg" alt="">
<div class="card__text">
<div class="card__date">NOVEMBER 08, 2020</div>
<div class="card__label">GET 80% OFF DSLR PHOTOGRAPHY COURSE BUNDLE</div>
</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
background: #e2e7ec;
margin: 0;
min-height: 100vh;
}
.container {
margin: 0 auto;
max-width: 1150px;
padding: 15px;
min-height: 100vh;
overflow: hidden;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 540px);
grid-template-areas:
"bigItem bigItem item1"
"item2 item3 item4";
grid-gap: 20px;
}
.big-item {
grid-area: bigItem;
/* grid-column: 1 / -2; */
background: url("./Layer 8.svg") center/cover;
}
.card {
background: #fff;
}
.card > img {
width: 100%;
border-radius: 10px 10px 0 0;
}
.card__text {
padding: 24px 24px 0 24px;
}
.card__date {
font-family: Roboto;
font-size: 13px;
line-height: 15px;
color: #818181;
}
.card__label {
font-family: Roboto;
font-size: 24px;
line-height: 28px;
text-transform: capitalize;
margin-top: 16px;
color: #1d1d1d;
}
.big-item,
.card {
border-radius: 10px;
}
.card1 {
grid-area: item1;
}
.card2 {
grid-area: item2;
}
.card3 {
grid-area: item3;
}
.card4 {
grid-template: item4;
}
@media (max-width: 1150px) {
.container {
grid-gap: 10px;
}
}
Заранее благодарю за уделенное этому вопросу время
