Адаптивная сетка для новостных блоков

Пример:

Название новости

Текст статьи или новости

Еще текст статьи или новости

И еще текст статьи или новости, который не умещается на одной строчке

Подробнее

Название новости

Текст статьи или новости

Подробнее

Название новости, которое не умещается в одну строку

Текст статьи или новости

Еще текст статьи или новости

Подробнее

Название новости

Текст статьи или новости

Подробнее

Название новости

Текст статьи или новости

Еще текст статьи или новости

И еще текст статьи или новости

Подробнее

Название новости

Текст статьи или новости

Подробнее

HTML:

<section class="grid">
	<article class="grid-item">
		<div class="image">
			<img src="photo.jpg" />
		</div>
		<div class="info">
			<h2>Название</h2>
			<div class="info-text">
				<p>Текст</p>
			</div>
			<div class="button-wrap">
				<a class="atuin-btn" href="#link">Подробнее</a>
			</div>
		</div>
	</article>
	
	<!-- Еще блоки -->
	
	<article class="grid-item">
		<div class="image">
			<img src="photo.jpg" />
		</div>
		<div class="info">
			<h2>Название</h2>
			<div class="info-text">
				<p>Текст</p>
			</div>
			<div class="button-wrap">
				<a class="atuin-btn" href="#link">Подробнее</a>
			</div>
		</div>
	</article>	
</section>

</div>

<h2>Название</h2>

<p>Текст</p>

</div>

<a class="atuin-btn" href="#link">Подробнее</a>

</div>

</article>

</div>

<h2>Название</h2>

<p>Текст</p>

</div>

<a class="atuin-btn" href="#link">Подробнее</a>

</div>

</article>

</section>

CSS:

Стили кнопки "подробнее" взяты из темы: «Оформление кнопок на CSS». При желании можно выбрать другие или использовать свои.

.grid * {
	box-sizing: border-box;
}
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	column-gap: 30px;
	row-gap: 30px;
	padding: 20px 0;
}
.grid-item {
	box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
	transition: box-shadow .3s;
	width: 100%;
	height: 100%;  
	border-radius: 8px;
	overflow: hidden;
}
.grid-item .image {
	height: 200px;
	overflow: hidden;
}
.grid-item .info {
	position: relative;
	height: calc(100% - 200px);
	padding: 16px 14px 70px 14px;
}
.grid-item:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.grid-item .image img  {
  	transition: transform 280ms ease-in-out;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;	
}
.grid-item:hover .image img  {
	transform: scale(1.1);
}
.info h2 {
	color: #337AB7;
	font-size: 20px;
	font-weight: normal;
	margin: 0;
	text-align: center;
}
.info-text p {
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 10px;
}
.info-text p:last-child {
	margin-bottom: 0;
}
.grid-item .button-wrap {
	display: block;
	width: 100%;
	position: absolute;
	bottom: 14px;
	left: 0;
	text-align: center;
}
/* Кнопка подробнее */
.atuin-btn {
	display: inline-flex;
	text-decoration: none;
	position: relative;
	font-size: 16px;
	line-height: 20px;
	padding: 8px 30px;
	color: #FFF;
	font-weight: bold;
	text-transform: uppercase; 
	background: #337AB7;
	cursor: pointer; 
	border: 2px solid #BFE2FF;
	border-radius: 8px;	
}
.atuin-btn:hover,
.atuin-btn:active,
.atuin-btn:focus {
	color: #FFF;
}
.atuin-btn:after,
.atuin-btn:before {
	position: absolute;
	height: 4px;
	left: 50%;
	background: #337AB7;
	bottom: -6px;
	content: "";
	transition: all 280ms ease-in-out;
	width: 0;
}
.atuin-btn:before {
	top: -6px;
}
.atuin-btn:hover:after,
.atuin-btn:hover:before,
.atuin-btn:active:after,
.atuin-btn:active:before,
.atuin-btn:focus:after,
.atuin-btn:focus:before {
	width: 100%;
	left: 0;
}

100

101

102

103

104

105

106

107

.grid * {

box-sizing: border-box;

}

.grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));

column-gap: 30px;

row-gap: 30px;

padding: 20px 0;

}

.grid-item {

box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);

transition: box-shadow .3s;

width: 100%;

height: 100%;

border-radius: 8px;

overflow: hidden;

}

.grid-item .image {

height: 200px;

overflow: hidden;

}

.grid-item .info {

position: relative;

height: calc(100% - 200px);

padding: 16px 14px 70px 14px;

}

.grid-item:hover {

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

.grid-item .image img {

transition: transform 280ms ease-in-out;

display: block;

width: 100%;

height: 100%;

object-fit: cover;

}

.grid-item:hover .image img {

transform: scale(1.1);

}

.info h2 {

color: #337AB7;

font-size: 20px;

font-weight: normal;

margin: 0;

text-align: center;

}

.info-text p {

font-size: 16px;

line-height: 20px;

margin-bottom: 10px;

}

.info-text p:last-child {

margin-bottom: 0;

}

.grid-item .button-wrap {

display: block;

width: 100%;

position: absolute;

bottom: 14px;

left: 0;

text-align: center;

}

/* Кнопка подробнее */

.atuin-btn {

display: inline-flex;

text-decoration: none;

position: relative;

font-size: 16px;

line-height: 20px;

padding: 8px 30px;

color: #FFF;

font-weight: bold;

text-transform: uppercase;

background: #337AB7;

cursor: pointer;

border: 2px solid #BFE2FF;

border-radius: 8px;

}

.atuin-btn:hover,

.atuin-btn:active,

.atuin-btn:focus {

color: #FFF;

}

.atuin-btn:after,

.atuin-btn:before {

position: absolute;

height: 4px;

left: 50%;

background: #337AB7;

bottom: -6px;

content: "";

transition: all 280ms ease-in-out;

width: 0;

}

.atuin-btn:before {

top: -6px;

}

.atuin-btn:hover:after,

.atuin-btn:hover:before,

.atuin-btn:active:after,

.atuin-btn:active:before,

.atuin-btn:focus:after,

.atuin-btn:focus:before {

width: 100%;

left: 0;

}

Олег: 08.11.2024 в 13:30
Для таких блоков новостей я искал свойства чтобы grid адаптивно складывался на маленьких экранов и нашел.
```
.conteyner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
  grid-gap: 1rem;
}
```
Тут автоматически количество колонок сетки меняется в зависимости от размеров помещающихся элементов. Варьировать надо свойством минимальной ширины (в примере 350px) если делаем минимальную ширину блока маленькую, то в страницу влазит 4 или 5 колонок. Если больше, то 3 или 2 колонки.
Ответить
- Олег: 08.11.2024 в 13:39
  
  медиазапросы в таком случае вовсе не нужно прописывать под разную ширину экрана. Код получается компактный и адаптивный.
  
  Ответить
- Alexander: 11.11.2024 в 10:04
  
  Спасибо, за замечание, обновил код.
  
  Ответить
Андрей: 23.02.2023 в 16:43

Кстати говоря пример который приведен с css не совпадает. Изначально стоит 4fr который подразумевает 4 колонки.

Ответить
- СЕРГЕЙ: 16.04.2023 в 14:26
  
  Прекрасно! Мне как раз надо было 4 в 1 ряд! Это для меня по ходу..!)))
  
  Ответить
- СЕРГЕЙ: 16.04.2023 в 14:28
  
  Александр, спасибо! Крутая штука! Всё работает на ура!))
  
  Ответить
Владимир: 18.11.2022 в 13:46

Как ни странно с этого сайта много что юзаю, ставиться легко, а вот эту штуку не могу запилить. Не привязываются свойства. Сам блокнотик ругается, да и в браузере не привязывается. В частности начинается с grid-template-columns: 1fr 1fr 1fr 1fr; Пишет некорректное значение свойства.

Ответить
- Alexander: 18.11.2022 в 15:27
  
  Почему не корректное?
  
  Ответить
  - Владимир: 18.11.2022 в 16:45
    
    Хммм крутил вертел, не сразу полоски увидел которые копировались из кода css. Начал потихоньку оживлять. Раньше такого не было.
    
    Ответить
    - Alexander: 18.11.2022 в 17:09
      
      Код выделяется двойным счелчком мыши 🙂
      
      Ответить
  - Владимир: 18.11.2022 в 20:33
    
    С grid был не очень знаком, довольно интересная вещь. Но в этом примере у меня почему-то дублируется все. Ставишь 1fr 1fr их в оконцовке 4 получается. Если брать пример разметки именно отсюда. Пробовал и чистые новые документы создавать, бесполезно уже как часа 3 репу чешу.
    
    Ответить
  - Владимир: 18.11.2022 в 21:39
    
    Как и полагалось я тут сам решил наворотить.На div поменять все это и т.д. Не знаю как это работает, проверяю вручную просто никак не получается!!!Копирую отсюда заново спустя какое то время, логику понимаю и т.д. Все развернулось на 3 столбца. Сайт огонь!
    
    Ответить
    - Alexander: 18.11.2022 в 22:08
      
      Напишите в ТГ или в ВК группу.
      Подсказки бесплатные 🙂
      
      Ответить
Сергей: 19.10.2021 в 08:16

Побольше бы таких вещей. Для похожих новостей самое то.

Ответить
Владислав: 03.05.2021 в 17:21

Спасибо, решение классное, мне как раз "что то" подобное и было нужно.
Ставлю лайк!!!!

Ответить

Пример:

Название новости

Название новости

Название новости, которое не умещается в одну строку

Название новости

Название новости

Название новости

HTML:

CSS:

Смотрите также:

Добавить комментарий:

Комментарии: