Адаптивная сетка для новостных блоков | Adaptive grid for news blocks
Вы узнаете как создать адаптивную сетку для новостных блоков используя 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;
}
0 Комментарии