ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивная сетка CSS новостных блоков

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

В статье представлена адаптивная сетка на чистом CSS, которая идет с аналогичной высотой в блоках, что отлично подойдет для размещения новостей. Где если вы напишите краткое пояснение, то не будет зависеть от знаков, все автоматически по высоте ровняется. Если рассматривать, то это вид материала, который можно поставить в один или несколько блоков по вертикале. Разве, что здесь не нужны операторы различных площадок, все выполнено по конструкции на разные по своей структуре сайты.

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

Так выглядит эта конструкция блока на мобильном устройстве:

Адаптивный блок с красивым эффектом при наведение клика

Где с вертикально веда автоматически переходит в горизонтальный, что все корректно показано, это описание и полностью функционал, который изначально закрепляется для работы.

Установка:

HTML

Код

<section class="meceska_aguseka">
  <article class="kanovada_casuneg">
  <div class="anesun">
  <img src="http://zornet.ru/_fr/56/s2317605.jpg" />
  </div>
  <div class="damatsiya">
  <h2>Первый блог</h2>
  <div class="tekstura_novostey">
  <p>Мы протестировали SEO и PPC одновременно для нескольких наших клиентов из SaaS и электронной коммерции, сделано правильно, вы получите ROI, как только они начнут работать.</p>
  </div>
  <div class="esumaku_dupena">
  <a class="novostn_aposled" href="#link">Подробнее</a>
  </div>
  </div>
  </article>

  

  <article class="kanovada_casuneg">
  <div class="anesun">
  <img src="http://zornet.ru/_fr/56/s9073743.jpg" />
  </div>
  <div class="damatsiya">
  <h2>Второй блог</h2>
  <div class="tekstura_novostey">
  <p>Но как насчет того, чтобы они работали вместе вместо того, чтобы измерять результаты обоих по отдельности, чтобы решить, куда направить ваши деньги исключительно?</p>
  </div>
  <div class="esumaku_dupena">
  <a class="novostn_aposled" href="#link">Подробнее</a>
  </div>
  </div>
  </article>
</section>

CSS

Код

.meceska_aguseka * {
  box-sizing: border-box;
}
.meceska_aguseka {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 28px;
  row-gap: 26px;
  padding: 18px 0;
}
/* Кол-во блоков на разных экранах */
@media only screen and (max-width: 1200px) {
  .meceska_aguseka {
  grid-template-columns: 1fr 1fr 1fr;
  }
}
@media only screen and (max-width: 900px) {
  .meceska_aguseka {
  grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 600px) {
  .meceska_aguseka {
  grid-template-columns: 1fr;
  }
}
.kanovada_casuneg {
  box-shadow: 0px 2px 2px rgb(37 37 37 / 24%), 0 3px 9px rgb(25 24 24 / 28%);
  transition: box-shadow .3s;
  width: 100%;
  height: 100%;
}
.kanovada_casuneg .anesun {
  height: 200px;
  overflow: hidden;
}
.kanovada_casuneg .damatsiya {
  position: relative;
  height: calc(100% - 200px);
  padding: 16px 14px 80px 14px;
}
.kanovada_casuneg:hover {
  box-shadow: 0 2px 7px rgb(21 21 21 / 20%), 0px 9px 17px rgb(21 21 21 / 20%);
}
.kanovada_casuneg .anesun img {
  transition: transform 280ms ease-in-out;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.kanovada_casuneg:hover .anesun img {
  transform: scale(1.1);
}
.damatsiya h2 {
  font-family: 'Roboto Condensed', Тahoma, sans-serif;
  color: #337AB7;
  font-size: 24px;
  font-weight: normal;
  margin: 0;
  text-align: center;
}
.tekstura_novostey p {
  font-size: 15px;
  line-height: 20px;
  font-family: Verdana, sans-serif;
  margin-bottom: 10px;
  text-align: justify;
}
.tekstura_novostey p:last-child {
  margin-bottom: 0;
}
.kanovada_casuneg .esumaku_dupena {
  display: block;
  width: 100%;
  position: absolute;
  bottom: 14px;
  left: 0;
  text-align: center;
}
/* Кнопка подробнее */
.novostn_aposled {
  display: inline-flex;
  text-decoration: none;
  position: relative;
  font-size: 15px;
  line-height: 15px;
  padding: 8px 24px;
  color: #f5f5f5;
  /* font-weight: bold; */
  text-transform: uppercase;
  font-family: 'Roboto Condensed', Тahoma, sans-serif;
  background: #1360a2;
  cursor: pointer;
  border: 2px solid #86b9e2;
  border-radius: 2px;
  text-shadow: 0 1px 0 #2d2b2b;
}
.novostn_aposled:hover,
.novostn_aposled:active,
.novostn_aposled:focus {
  color: #f5f5f5;
}
.novostn_aposled:after, .novostn_aposled:before {
  position: absolute;
  height: 2px;
  left: 50%;
  background: #3a97e8;
  bottom: -5px;
  content: "";
  transition: all 280ms ease-in-out;
  width: 0;
}
.novostn_aposled:before {
  top: -5px;
}
.novostn_aposled:hover:after,
.novostn_aposled:hover:before,
.novostn_aposled:active:after,
.novostn_aposled:active:before,
.novostn_aposled:focus:after,
.novostn_aposled:focus:before {
  width: 100%;
  left: 0;
}

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

Но в этом стиле дизайн больше сделано для современного дизайна, чтоб раз написать и поставить эти блоки под информационный поток на интернет площадке, как сайт или блог.

Демонстрация
Источник: atuin.ru

Добавление:

Вот так у меня получилось, где на этот материал демонстрация на сайте в каталоге файлов, что должно корректно подойти под мобильные аппараты. Также классы изменил, чтоб не с кем они не сношались, переменил отступы, почему то они стали не работать, что просветился, и поставил другой элемент.

Вообщем смотрите, на сайте установлена эта сетка под информацию.

HTML

Код

<section class="osnovan_setku">
  <article class="maket">
  <div class="skrin_shot">
  <img src="http://zornet.ru/_fr/56/1743515.jpg" />
  </div>
  <div class="amatsiu">
  <h2>Название</h2>
  <div class="ekstse_nacun">
  <p>Текст</p>
  </div>
  <div class="pugovu_salodes">
  <a class="apode_kades" href="#link">Подробнее</a>
  </div>
  </div>
  </article>

  

  <article class="maket">
  <div class="skrin_shot">
  <img src="http://zornet.ru/_fr/56/3982445.jpg" />
  </div>
  <div class="amatsiu">
  <h2>Название</h2>
  <div class="ekstse_nacun">
  <p>Текст</p>
  </div>
  <div class="pugovu_salodes">
  <a class="apode_kades" href="#link">Подробнее</a>
  </div>
  </div>
  </article>
</section>

CSS

Код

.osnovan_setku * {
box-sizing: border-box;
}
.osnovan_setku {
display: grid;
  grid-template-columns: 2fr 2fr;
  column-gap: 30px;
  grid-gap: 10px;
  padding: 20px 0;
}

/* Кол-во блоков на разных экранах */

@media only screen and (max-width: 1200px) {
  .osnovan_setku {
grid-template-columns: 2fr 2fr;
  }
}
@media only screen and (max-width: 900px) {
  .osnovan_setku {
  grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 600px) {
  .osnovan_setku {
  grid-template-columns: 1fr;
  }
}
.maket {
  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%;
}
.maket .skrin_shot {
  height: 200px;
  overflow: hidden;
}
.maket .amatsiu {
  position: relative;
  height: calc(100% - 200px);
  padding: 16px 14px 80px 14px;
}
.maket:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.maket .skrin_shot img {
  transition: transform 280ms ease-in-out;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.maket:hover .skrin_shot img {
  transform: scale(1.1);
}
.amatsiu h2 {
  font-family: 'Roboto Condensed', Тahoma, sans-serif;
  color: #337AB7;
  font-size: 24px;
  font-weight: normal;
  margin: 0;
  text-align: center;
}
.ekstse_nacun p {
  font-size: 15px;
  line-height: 20px;
  font-family: Verdana, sans-serif;
  margin-bottom: 10px;
}
.ekstse_nacun p:last-child {
  margin-bottom: 0;
}
.maket .pugovu_salodes {
  display: block;
  width: 100%;
  position: absolute;
  bottom: 14px;
  left: 0;
  text-align: center;
}
/* Кнопка подробнее */
.apode_kades {
  display: inline-flex;
  /* text-decoration: none; */
  position: relative;
  font-size: 18px;
  line-height: 20px;
  padding: 8px 24px;
  color: #FFF;
  /* font-weight: bold; */
  /* text-transform: uppercase; */
  background: #215888;
  cursor: pointer;
  border: 2px solid #ccdce8;
}


.apode_kades:hover,
.apode_kades:active,
.apode_kades:focus {
  color: #FFF;
}
.apode_kades:after,
.apode_kades:before {
  position: absolute;
  height: 4px;
  left: 50%;
  background: #337AB7;
  bottom: -6px;
  content: "";
  transition: all 280ms ease-in-out;
  width: 0;
}
.apode_kades:before {
  top: -6px;
}
.apode_kades:hover:after,
.apode_kades:hover:before,
.apode_kades:active:after,
.apode_kades:active:before,
.apode_kades:focus:after,
.apode_kades:focus:before {
  width: 100%;
  left: 0;
}

PS - что по формату, виде размера шрифт изменил, то все оставил прописанным в стилистике, что не трудно все самостоятельно сделать по умолчанию.

15 Августа 2020 Загрузок: 4 Просмотров: 3063 Комментариев: (10)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 10
Порядок вывода комментариев: viponipo 28 Октября 2020 16:46¹ 0 А как от края браузера отступ сделать? Kosten 28 Октября 2020 17:35² +1 Если нужно сделать отступ от края, то прописываем в стилях CSS margin: 0px 0px 0px 0px; где ставим значение, это на все четыре стороны, выбираем, где вам нужно. viponipo 28 Октября 2020 18:17³ 0 Спасибо получилось: .meceska_aguseka * { box-sizing: border-box; } .meceska_aguseka { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 28px; row-gap: 26px; padding: 18px 0; margin: 0px 15px 0px 15px; - вот в этом месте правильно? } Kosten 28 Октября 2020 19:50⁴ +1 Но и отлично, но считаю главным, что вы поняли как можно редактировать и делать все корректно. dtrkhv 20 Октября 2021 08:59⁵ 0 как поменять их рассположение но что бы при этом на телефоне все так же корркетно отображались? Kosten 20 Октября 2021 18:01⁶ 0 Вот здесь посмотрите сейчас все нормально, это демо площадка, там выставил сетку http://zornet.ru/load....0-10322 Kosten 20 Октября 2021 18:50⁷ 0 Что по вашему вопросу, то в самом материале сделал добавление. tberius86 08 Августа 2022 03:43⁸ 0 а как подогнать сетку под книжный формат картинки? под постер фильма например, я пробовал увеличит область куда вставляется картинка, но тогда кнопка подробнее уезжает вниз за пределы( и можно ещё как то сделать так чтоб текст ограничивался каким то количеством символов? Просто если текст большой то сетка растягивается вниз( -SAM- 12 Августа 2022 01:46⁹ 0 Это смотреть нужно по месту, чтобы точный ответ был (то есть как именно вы там у себя на сайте переписали) - можете ссылку в ЛС мне прислать, посмотрю. Что касается ограничения текста, то можно задать фиксированную высоту, что всё что не помещается - будет обрезаться визуально, допустим, .tekstura_novostey p {max-height:200px;overflow:hidden}. Если это касается uCoz, то можно условным оператором системы обрезать - оставить нужное количество символов, пример: <p><?if(len($MESSAGE$)>=203)?><?substr($MESSAGE$,0,200)?>...<?else?>$MESSAGE$<?endif?></p> (только желательно краткий текст материала резать, чтобы в нём не было html-тегов, а именно без использования в нём bb-кодов и смайлов - чтобы подрезка не сделала в итоге незакрытый тег). P.S.: в uCoz опять обнова была какая-то, что в моём старом браузере теперь вообще комментарий-ответ отказывается добавлять через всплывающее окно. //upd: хорошо хоть правка пока работает в этом окне. Это я к тому, что теперь свой ответ под пользовательскими оставить не ясно как (к сожалению, браузер обновить нет возможности на этом старом ПК... в общем, только новый нужно покупать). UPD.: Cпасибо конечно, но про всё это я и так знаю. Проверка с отключенным ABP делалась - не работает. Вводишь свой текст в качестве ответа на комментарий (во всплывающем окне), после нажимаешь на кнопку "Добавить" - страница материала просто перезагружается, а в адресную строку дописывается, к примеру, такое: ?message=%D0%9F%D1%80%D0%BE%D0%B2%D0%B5%D1%80%D0%BA%D0%B0.&a=36&pid=35845&ssid=BvbTLVMk&sos=2251111834&soc_type=0&data=#comEnt35844 ... то есть запрос этот не проходит, оно не отсылает куда нужно в итоге. Он ранее 7 числа добавлял ответ - без проблем, с того момента естественно конфигурацию браузера никак не менял со своей стороны, что теперь оно перестало работать. Kosten 12 Августа 2022 18:19¹⁰ 0 -СЭМ-, по причине, что не показывает, то на браузер я бы подумал не в первую очередь, у меня так было, только кнопки не показывало, все разрешено, но кнопки не то показывает, но они не активны. А все дело было в приложение браузера, который убирает рекламу, в исключение сайт закинул и все заработало. Если есть подключенные приложение, то по началу все отключите, и потом посмотрите, если также, то смело обратно подключает, если все же виновато приложение, то здесь уже методом тыка ищем то, что не дает функции выполнять свои прямые обязательство.