Пример:

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

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

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

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

Название новости
Текст статьи или новости
Еще текст статьи или новости
И еще текст статьи или новости

Название новости
Текст статьи или новости
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<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> |
CSS:
Стили кнопки "подробнее" взяты из темы: «Оформление кнопок на CSS». При желании можно выбрать другие или использовать свои.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
.grid * { box-sizing: border-box; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 30px; row-gap: 30px; padding: 20px 0; } /* Кол-во блоков на разных экранах */ @media only screen and (max-width: 1200px) { .grid { grid-template-columns: 1fr 1fr 1fr; } } @media only screen and (max-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } } @media only screen and (max-width: 600px) { .grid { grid-template-columns: 1fr; } } .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%; } .grid-item .image { height: 200px; overflow: hidden; } .grid-item .info { position: relative; height: calc(100% - 200px); padding: 16px 14px 80px 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 { font-family: 'Roboto', Тahoma, sans-serif; color: #337AB7; font-size: 24px; font-weight: normal; margin: 0; text-align: center; } .info-text p { font-size: 15px; line-height: 20px; font-family: Verdana, sans-serif; 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: 20px; line-height: 20px; padding: 12px 30px; color: #FFF; font-weight: bold; text-transform: uppercase; font-family: 'Roboto', Тahoma, sans-serif; background: #337AB7; cursor: pointer; border: 2px solid #BFE2FF; } .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; } |
Кстати говоря пример который приведен с css не совпадает. Изначально стоит 4fr который подразумевает 4 колонки.
Прекрасно! Мне как раз надо было 4 в 1 ряд! Это для меня по ходу..!)))
Александр, спасибо! Крутая штука! Всё работает на ура!))
Как ни странно с этого сайта много что юзаю, ставиться легко, а вот эту штуку не могу запилить. Не привязываются свойства. Сам блокнотик ругается, да и в браузере не привязывается. В частности начинается с grid-template-columns: 1fr 1fr 1fr 1fr; Пишет некорректное значение свойства.
Почему не корректное?

Хммм крутил вертел, не сразу полоски увидел которые копировались из кода css. Начал потихоньку оживлять. Раньше такого не было.
Код выделяется двойным счелчком мыши 🙂
С grid был не очень знаком, довольно интересная вещь. Но в этом примере у меня почему-то дублируется все. Ставишь 1fr 1fr их в оконцовке 4 получается. Если брать пример разметки именно отсюда. Пробовал и чистые новые документы создавать, бесполезно уже как часа 3 репу чешу.
Как и полагалось я тут сам решил наворотить.На div поменять все это и т.д. Не знаю как это работает, проверяю вручную просто никак не получается!!!Копирую отсюда заново спустя какое то время, логику понимаю и т.д. Все развернулось на 3 столбца. Сайт огонь!
Напишите в ТГ или в ВК группу.
Подсказки бесплатные 🙂
Побольше бы таких вещей. Для похожих новостей самое то.
Спасибо, решение классное, мне как раз "что то" подобное и было нужно.
Ставлю лайк!!!!