Почему grid обрезает последние блоки?
Всем добрый день. Верстаю новостной сайт и решил попробовать использовать сетку grid , но почему-то сетка становиться не во весь размер блоков и обрезает часть последних элементов . Гуглил , но не нашёл решение проблемы. Помогите пожалуйста , заранее спасибо. Вот ссылка на codepen https://codepen.io/Daniil-chaynik/pen/wvdzNbE .
* {
margin: 0;
padding: 0;
}
.second-Bar {
/* margin-top: 2rem; */
display: grid;
align-items: center;
grid-template-columns: 36% 1fr 1fr 1fr;
grid-template-areas:
'card-1 card-2 card-3 card-4'
'card-1 card-5 card-6 card-7';
grid-column-gap: 7%;
grid-row-gap: 3%;
position: relative;
justify-content: space-between;
background-color: black;
}
.card {
position: relative;
}
.image-block {
position: relative;
width: 100%;
}
.image {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
background-color: gray;
}
.about {
position: relative;
margin-top: 0.4rem;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.text {
font-style: normal;
font-weight: 600;
font-size: 1em;
line-height: 1.3;
color: white;
}
.time {
position: relative;
font-family: Roboto;
font-style: normal;
font-weight: 300;
font-size: 1em;
line-height: 1;
color: red;
padding-top: 0.6rem;
} <div class="second-Bar">
<div class="card" style="grid-area: card-1">
<div class="image-block">
<img src="" alt="" class="image" />
</div>
<div class="about">
<h1 class="text">
Сегодня завершится первый тур группового этапа Кубка
Узбекистана. .
</h1>
<h2 class="time">08.05.2021, 22:57</h2>
</div>
</div>
<div class="card" style="grid-area: card-2">
<div class="image-block">
<img src="" alt="" class="image" />
</div>
<div class="about">
<h1 class="text">
Сегодня завершится первый тур группового этапа Кубка
Узбекистана. .
</h1>
<h2 class="time">08.05.2021, 22:57</h2>
</div>
</div>
<div class="card" style="grid-area: card-3">
<div class="image-block">
<img src="" alt="" class="image" />
</div>
<div class="about">
<h1 class="text">
Сегодня завершится первый тур группового этапа Кубка
Узбекистана. .
</h1>
<h2 class="time">08.05.2021, 22:57</h2>
</div>
</div>
<div class="card" style="grid-area: card-4">
<div class="image-block">
<img src="" alt="" class="image" />
</div>
<div class="about">
<h1 class="text">
Сегодня завершится первый тур группового этапа Кубка
Узбекистана. .
</h1>
<h2 class="time">08.05.2021, 22:57</h2>
</div>
</div>
<div class="card" style="grid-area: card-5">
<div class="image-block">
<img src="" alt="" class="image" />
</div>
<div class="about">
<h1 class="text">
Сегодня завершится первый тур группового этапа Кубка
Узбекистана. .
</h1>
<h2 class="time">08.05.2021, 22:57</h2>
</div>
</div>
<div class="card" style="grid-area: card-6">
<div class="image-block">
<img src="" alt="" class="image" />
</div>
<div class="about">
<h1 class="text">
Сегодня завершится первый тур группового этапа Кубка
Узбекистана. .
</h1>
<h2 class="time">08.05.2021, 22:57</h2>
</div>
</div>
<div class="card" style="grid-area: card-7">
<div class="image-block">
<img src="" alt="" class="image" />
</div>
<div class="about">
<h1 class="text">
Сегодня завершится первый тур группового этапа Кубка
Узбекистана. .
</h1>
<h2 class="time">08.05.2021, 22:57</h2>
</div>
</div>