Матвей Земсков

Заметки веб-мастера

Понедельник, 11 мая 2020 13:14

Создание адаптивной сетки, используя всего 3 свойства CSS

Оцените материал
(0 голосов)

Что если я скажу вам, что вам нужно знать только 3 свойства CSS, чтобы создать полностью адаптивную CSS сетку, показанyю ниже:

Схема адаптивной CSS-сетки

Давайте начнем с HTML кода.

Просто контейнер и div, соответствующие статьям, а также header + footer:

HTML

	<div class="container">
	  <div class="header">Header</div>
	  <div class="art first">Article 1</div>
	  <div class="art second">Article 2</div>
	  <div class="art third">Article 3</div>
	  <div class="footer">Footer</div>
	</div>

Во-первых, нам нужно указать, что наш контейнер является CSS сеткой (grid) и добавить небольшой промежуток между ячейками:

CSS

	.container {
		 display: grid;
		 grid-gap: 10px;
	}

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

Схема CSS-сетки в Excel

Это можно перевести на CSS с помощью свойства grid-template-areas:

CSS

	.header { grid-area: h; }
	.art.first { grid-area: a1; }
	.art.second { grid-area: a2; }
	.art.third { grid-area: a3; }
	.footer { grid-area: f; }

Делаем CSS-сетку адаптивной

Чтобы сделать CSS-сетку адаптивной, мы можем просто изменить внешний вид таблицы:

Схема адаптивной CSS-сетки

Таким образом, нам поможет медиа-запрос и снова свойство grid-template-areas.

CSS

@media only screen and (max-width: 600px) {
	  .container {
		grid-template-areas: 
			"h"
			"a1"
			"a2"
			"a3"
			"f";
	  }
	}

Мы могли бы использовать display:block, но наша задача показать каким гибким и полезным может быть свойство grid-template-areas при использовании его при верстке макета.

И это все, ребята! Всего 3 свойства (grid-area, grid-gap и grid-template-area) для создания полностью адаптивного макета на основе CSS-сетки (grid).

Ниже вы можете увидеть полный рабочий код для этого примера. Ура!

Демо: https://codepen.io/js-craft/pen/xjEZVX

Оригинал статьи: Making a responsive CSS grid layout with just 3 properties

Перевод: Земсков Матвей

Прочитано 217 раз

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


Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх