Вы узнаете как создать адаптивную сетку для новостных блоков используя HTML и CSS. Адаптивная сетка с одинаковыми по высоте блоками для превью новостей или статей. Фотографии в блоках имеют одинаковый размер. По причине того, что обычно все добавляют разные по формату картинки - лишнее просто отрезается.

Решение основано на css-свойстве display: grid

Надеюсь, это видео будет для вас полезным. Если при создании этого кода возникнут трудности, вы сможете скачать архив с готовым исходным кодом по ссылке

Кроме того, если у вас есть какие-либо вопросы, предложения или отзывы, то напишите их в комментариях ниже.

HTML КОД:

<section class="grid">
    
    <!-- Block #1 -->
    
    <article class="grid-item">
        <div class="image">
            <a href="#"><img src="https://vsegda-pomnim.com/uploads/posts/2022-03/1647611603_14-vsegda-pomnim-com-p-karibskoe-more-foto-16.jpg" /></a>
        </div>
        <div class="info">
            <h2><a href="#">Карибское Море - Окраинное полузамкнутое море бассейна Атлантического океана.</a></h2>
            <div class="info-text">
                <p>На северо-западе через Юкатанский пролив Карибское море соединено с Мексиканским заливом, на юго-западе — с Тихим океаном через искусственный Панамский канал.</p>
            </div>
            <div class="button-wrap">
                <div class="button-wrap_views"><i class="fa fa-eye" aria-hidden="true"></i> 128 Просмотров</div>
                <div class="button-wrap_date"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> 28,08,2024</div>
            </div>
        </div>
    </article>
    
    <!-- Block #2 -->
    
    <article class="grid-item">
        <div class="image">
            <a href="#"><img src="https://mir-tourista.ru/wp-content/uploads/2019/11/amanecer-machu-picchu.jpg" /></a>
        </div>
        <div class="info">
            <h2><a href="#">Перу - Граничит на северо-западе с Эквадором, на севере — с Колумбией, на востоке — с Бразилией, на юго-востоке — с Боливией и Чили.</a></h2>
            <div class="info-text">
                <p>Государство в Южной Америке. Официальный язык - испанский. В регионах с преобладанием индейского населения официальными являются языки кечуа, аймара и другие местные языки.</p>
            </div>
            <div class="button-wrap">
                <div class="button-wrap_views"><i class="fa fa-eye" aria-hidden="true"></i> 1035 Просмотров</div>
                <div class="button-wrap_date"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> 18,07,2024</div>
            </div>
        </div>
    </article>
    
    <!-- Block #3 -->
    
    <article class="grid-item">
        <div class="image">
            <a href="#"><img src="https://tourpedia.ru/wp-content/uploads/2017/05/%D1%83%D0%BA%D0%B0%D0%B7%D0%B0%D1%82%D0%B5%D0%BB%D1%8C-%D0%BD%D0%B0-%D0%99%D0%B5%D0%BB%D0%BB%D0%BE%D1%83%D1%81%D1%82%D0%BE%D0%BD.jpg" /></a>
        </div>
        <div class="info">
            <h2><a href="#">Йеллоустоун - первый в мире национальный парк, одно из самых посещаемых мест в США.</a></h2>
            <div class="info-text">
                <p>о здесь, на границе цивилизации, происходит много такого, чего не видят туристы, что не освещается средствами массовой информации. Семья Даттон, главой которой является Джон Даттон, владеет огромным ранчо, сопредельным с территорией парка. На их землю претендует и сам парк, и индейская резервация, и жадные застройщики.</p>
            </div>
            <div class="button-wrap">
                <div class="button-wrap_views"><i class="fa fa-eye" aria-hidden="true"></i> 3528 Просмотров</div>
        <div class="button-wrap_date"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> 24,06,2024</div>
            </div>
        </div>
    </article>
    
    <!-- Block #4 -->
    
    <article class="grid-item">
        <div class="image">
            <a href="#"><img src="https://avatars.dzeninfra.ru/get-zen_doc/1596193/pub_64e4a98183d1d11bd512b28c_64e4f9aaab43285812d6b176/scale_1200" /></a>
        </div>
        <div class="info">
            <h2><a href="#">Красное море - одно из самых солёных морей Мирового океана.</a></h2>
            <div class="info-text">
                <p>Внутреннее море Индийского океана, расположенное между Аравийским полуостровом и Африкой в тектонической впадине.</p>
            </div>
            <div class="button-wrap">
                <div class="button-wrap_views"><i class="fa fa-eye" aria-hidden="true"></i> 1698 Просмотров</div>
        <div class="button-wrap_date"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> 08,05,2024</div>
            </div>
        </div>
    </article>
    
    <!-- Block #5 -->
    
    <article class="grid-item">
        <div class="image">
            <a href="#"><img src="https://mykaleidoscope.ru/x/uploads/posts/2022-09/1663135323_57-mykaleidoscope-ru-p-islandiya-dostoprimechatelnosti-dostoprime-64.jpg" /></a>
        </div>
        <div class="info">
            <h2><a href="#">Исландия - островное государство, расположенное на западе Северной Европы в северной части Атлантического океана </a></h2>
            <div class="info-text">
                <p>Столица и крупнейший город Исландии — Рейкьявик, в котором (вместе с прилегающими районами) проживает более 65 % населения страны. На севере и северо-востоке омывается Северным Ледовитым океаном. Территория государства состоит из одноимённого острова площадью 103 тыс. км² и небольших островков около него.</p>
            </div>
            <div class="button-wrap">
                <div class="button-wrap_views"><i class="fa fa-eye" aria-hidden="true"></i> 578 Просмотров</div>
        <div class="button-wrap_date"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> 02,04,2024</div>
            </div>
        </div>
    </article>
    
    <!-- Block #6 -->
    
    <article class="grid-item">
        <div class="image">
            <a href="#"><img src="https://mykaleidoscope.ru/x/uploads/posts/2022-10/1666358866_11-mykaleidoscope-ru-p-ozero-ritsa-vkontakte-11.jpg" /></a>
        </div>
        <div class="info">
            <h2><a href="#">Озеро Рица - горное озеро ледниково-тектонического происхождения на Западном Кавказе, в Абхазии, в Гудаутском районе частично признанной Республики Абхазия.</a></h2>
            <div class="info-text">
                <p>Крупнейшее озеро Абхазии. Расположено на высоте 950 м над уровнем моря в бассейне реки Бзып, в глубоком лесистом ущелье рек Лашипсе и Юпшары, к востоку от Гагрского хребта.</p>
            </div>
            <div class="button-wrap">
                <div class="button-wrap_views"><i class="fa fa-eye" aria-hidden="true"></i> 3291 Просмотров</div>
        <div class="button-wrap_date"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> 15,03,2024</div>
            </div>
        </div>
    </article>
    
    <!-- Block #7 -->
    
    <article class="grid-item">
        <div class="image">
            <a href="#"><img src="https://laplaya-rus.ru/wp-content/uploads/a/e/3/ae3f66cc56b43dc8e86ec45b53a9c475.jpeg" /></a>
        </div>
        <div class="info">
            <h2><a href="#">Атлантический Океан - Второй по площади и глубине океан Земли после Тихого океана.</a></h2>
            <div class="info-text">
                <p>Расположен между Гренландией и Исландией на севере, Европой и Африкой на востоке, Северной и Южной Америкой на западе и Антарктидой на юге. Площадь океана составляет 91,66 млн км², из которых около 16 % приходится на моря, заливы и проливы. Объём вод — 329,66 млн км³.</p>
            </div>
            <div class="button-wrap">
                <div class="button-wrap_views"><i class="fa fa-eye" aria-hidden="true"></i> 1928 Просмотров</div>
        <div class="button-wrap_date"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> 18,02,2024</div>
            </div>
        </div>
    </article>
    
    <!-- Block #8 -->
    
    <article class="grid-item">
        <div class="image">
            <a href="#"><img src="https://kipmu.ru/wp-content/uploads/2021/02/svrnplblj.jpg" /></a>
        </div>
        <div class="info">
            <h2><a href="#">Северный полюс — точка пересечения оси вращения Земли с её поверхностью в Северном полушарии.</a></h2>
            <div class="info-text">
                <p>Расположен в центральной части Северного Ледовитого океана. Географические координаты Северного полюса: 90°00′00″ северной широты. </p>
            </div>
            <div class="button-wrap">
                <div class="button-wrap_views"><i class="fa fa-eye" aria-hidden="true"></i> 2285 Просмотров</div>
        <div class="button-wrap_date"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> 25,01,2024</div>
            </div>
        </div>
    </article>
    
    </div>
    
</section>

CSS КОД:

.grid * {
    box-sizing: border-box;
}
.grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -webkit-column-gap: 30px;
       -moz-column-gap: 30px;
            column-gap: 30px;
    row-gap: 30px;
    padding: 20px 0;
}
/* Кол-во блоков на разных экранах */
@media only screen and (max-width: 1200px) {
    .grid {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media only screen and (max-width: 900px) {
    .grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
}
@media only screen and (max-width: 600px) {
    .grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
}
.grid-item {
    background-color: #fff;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
    -webkit-transition: -webkit-box-shadow .3s;
    transition: -webkit-box-shadow .3s;
    -o-transition: box-shadow .3s;
    transition: box-shadow .3s;
    transition: box-shadow .3s, -webkit-box-shadow .3s;
    width: 100%;
    height: 100%;  
    border-radius: 8px;
    -webkit-transition: all 280ms ease-in-out;
    -o-transition: all 280ms ease-in-out;
    transition: all 280ms ease-in-out;
}
.grid-item:hover {
    -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.grid-item .image {
    position: relative;
    height: 200px;
    overflow: hidden;
    border: 5px solid #fff;
    border-radius: 10px 10px 0 0;
}

.grid-item .info {
    position: relative;
    height: calc(100% - 200px);
    padding: 10px 14px 10px 14px;
}

.grid-item .image img  {
    -webkit-transition: -webkit-transform 280ms ease-in-out;
transition: -webkit-transform 280ms ease-in-out;
-o-transition: transform 280ms ease-in-out;
transition: transform 280ms ease-in-out;
transition: transform 280ms ease-in-out, -webkit-transform 280ms ease-in-out;
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;    
}
.grid-item:hover .image img  {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
        transform: scale(1.1);
}
.info h2 {
    font-family: 'Roboto', sans-serif;    
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 10px 0;
    
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.info h2 a {
    color: #337AB7;
    -webkit-transition: all 280ms ease-in-out;
    -o-transition: all 280ms ease-in-out;
    transition: all 280ms ease-in-out;
}
.info h2 a:hover {
    color: #068cff;        
}
.info-text p {
    color: #484848;
    font-size: 11px;
    line-height: 20px;
    font-family: Poppins, sans-serif; 
    margin-bottom: 10px;
    
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.info-text p:last-child {
    margin-bottom: 0;
}
.grid-item .button-wrap {
    display: -webkit-box;
display: -ms-flexbox;
display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 10px;
    border-top: 1px solid #d7d7d7;
    margin-top: 10px;
    padding-top: 10px;
}
.button-wrap_views,
.button-wrap_date {
    color: #686868;
    font-size: 12px;
}