• ×

    • Почему CSS Grid лучше, чем фреймворк Bootstrap? Прототипирование и области макета с CSS Grid. Дополнительные примеры Grid и Flex

    13.05.2019

    Дэнни Марков

    Дизайн довольно простой - он состоит из выровненного по центру контейнера, внутри которого у нас есть шапка, основной раздел, боковая панель и подвал. Вот главные «испытания», которые мы должны провести, сохраняя CSS и HTML по возможности чистыми:

    1. Разместить четыре основных раздела макета.
    2. Сделать страницу адаптивной (боковая панель опускается ниже основного содержимого на маленьких экранах).
    3. Выровнять содержимое шапки - навигация слева, кнопка справа.

    Как вы можете видеть, ради сравнения мы оставили всё максимально простым. Начнём с первого испытания.

    Испытание 1. Размещение разделов страницы

    Решение на Flexbox

    Добавляем display: flex к контейнеру и задаём направление дочерних элементов по вертикали. Это позиционирует все разделы друг под другом.

    Container { display: flex; flex-direction: column; }

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

    Затем мы устанавливаем этому элементу display: flex и flex-direction с противоположным направлением.

    Main-and-sidebar-wrapper { display: flex; flex-direction: row; }

    Последний шаг - задать размеры основного раздела и боковой панели. Мы хотим, чтобы основное содержимое было в три раза шире боковой панели, что несложно сделать с помощью flex или процентов.

    Как вы можете видеть, Flexbox сделал всё хорошо, но нам кроме этого понадобилось довольно много свойств CSS плюс дополнительный элемент HTML. Давайте посмотрим, как будет работать CSS Grid.

    Решение на CSS Grid

    Существует несколько вариантов использования CSS Grid, но мы воспользуемся синтаксисом grid-template-areas , как наиболее подходящего для наших целей.

    Сперва мы определим четыре grid-area , по одному на каждый раздел страницы:

    header { grid-area: header; } .main { grid-area: main; } .sidebar { grid-area: sidebar; } footer { grid-area: footer; }

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

    Container { display: grid; /* Определяем размер и число колонок нашей сетки. Единица fr работает подобно Flexbox: колонки делят свободное пространство в строке согласно их значениям. У нас будет две колонки - первая в три раза больше второй. */ grid-template-columns: 3fr 1fr; /* Связываем сделанные ранее области с местами в сетке. Первая строка - шапка. Вторая строка делится между основным разделом и боковой панелью. Последняя строка - подвал. */ grid-template-areas: "header header" "main sidebar" "footer footer"; /* Интервал между ячейками сетки будет 60 пикселей */ grid-gap: 60px; }

    Вот и всё! Наш макет теперь будет соответствовать указанной выше структуре и мы его настроили так, что нам не придётся иметь дело с margin или padding .

    Испытание 2. Делаем страницу адаптивной

    Решение на Flexbox

    Выполнение этого шага строго связано с предыдущим. Для решения на Flexbox нам придётся изменить flex-direction и отрегулировать margin .

    @media (max-width: 600px) { .main-and-sidebar-wrapper { flex-direction: column; } .main { margin-right: 0; margin-bottom: 60px; } }

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

    Решение на CSS Grid

    Поскольку мы уже определили grid-areas , нам просто нужно переопределить их порядок в медиа-запросе. Мы можем использовать ту же настройку колонок.

    @media (max-width: 600px) { .container { /* Выравнивание областей сетки для мобильного макета */ grid-template-areas: "header header" "main main" "sidebar sidebar" "footer footer"; } }

    Или можем переопределить весь макет с нуля, если считаем, что это решение чище.

    @media (max-width: 600px) { .container { /* Переделываем сетку в одноколоночный макет */ grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" "footer"; } }

    Испытание 3. Выравнивание компонентов шапки

    Решение на Flexbox

    Мы уже делали похожий макет на Flexbox в одной из наших старых статей - . Техника довольно простая:

    Header { display: flex; justify-content: space-between; }

    Теперь список навигации и кнопка выровнены правильно. Осталось только разместить пункты внутри

    Div#navbar ul { list-style: none; display: block; margin: 0 10px; } div#navbar ul li { float: left; margin: 0 1.5em; font: bold 1em Arial; }

    Круто! У нас всё клеится. Всё что осталось, так это блок с постером и презентацией сайта, но перед тем, как мы приступим к их реализации я бы хотел сказать несколько слов о CSS фрэймворках в целом.

    3. CSS фрэймворки не решат все ваши проблемы

    Перед тем, как начать делать вёрстку дизайна на CSS фрэймворке вы должны учесть некоторые минусы данных систем. Читая данную статью вы не могли не заметить, что правила построения страницы очень строги. Всё имеет свой фиксированный размер. При изменении ширины одного блока, приходится менять и другие. В любом случае надо чем-то жертвовать. К примеру, что вы будете делать, если у вас дизайн на 1000px, а 960 Grid позволяет создавать ширину максимум 960px... А вы хотите 1000px! Без массивного изменения кода, это реализовать невозможно. К примеру клиент захотел сайт пошире или дизайнер несогласен с вашей реализацией. Есть ещё одна проблема, касающаяся высоты колонок. Если у трёх колонок один и тот же цвет фона (как у нас в футере), необходимо, чтобы эти колонки были одинаковой высоты. Ещё один существенный минус: использование дополнительных отступов и создание рамок ведёт к разрушению всей вёрстки. Для того, чтобы добавить то, что необходимо и ничего не разрушить нужно компенсировать добавляемые размеры. Сейчас покажу как. Приступаем к отделке верхней части.

    4. Верхняя секция

    Во-первых решим проблему с высотой колонки - сделаем её фиксированной. Далее создадим пустые div в одном и другом блоке. В них будет располагаться рисунок или текстовая информация. Внутренние отступы устанавливать не будем т.к. можно нарушить пропорцию ширины сетки. Создадим небольшой внешний отступ тегам p, для того, чтобы текст красиво смотрелся.

    В данном случае для стиля лучше создать класс, а не ID, т.к. нам надо применить его к нескольким блокам. При необходимости, это так же позволит нам в 2 счёта поменять высоту. Вот так выглядят наши классы:

    Div.topSection div { border: solid 10px #e5e5e6; height: 280px; } div.topSection div p { margin: 10px; }

    Круто! Давайте посмотрим, что у нас получилось:

    Готовы для заполнения? Тогда в левый блок закиньте какой-то текст, но не переусердствуйте, чтобы не превысить высоту. На самом деле в реальных проектах, дизайнер должен всё это рассчитывать (количество символов, которые будет удовлетворять размеры блока); Перед тем, как вставить изображение в правый блок, нужно определиться с его размерами, если вы ещё этого не сделали. Это можно сделать на ранних стадиях разработки дизайна или через FireBug. Нажмите Inspect. Кликните по div, который нам нужен. Выберите вкладку Layout. После этого вы увидите всю необходимую вам информацию. В помощь вам следующее изображение:

    На скриншоте постер имеет размеры 360x280. Найдите изображение и создайте для него стиль:

    Img#poster { width: 360px; height: 280px; }

    Вот и все! Шаблон готов. Теперь осталось только заполнить реальным контентом и выложить в сеть:

    5. Знайте ваши возможности

    Теперь, когда всё готово, подведём некоторый итог. 960 Grid позволила нам за 15 минут наклепать шаблон. Круто? Да! Проверяли ли мы его в IE6, IE7? Нет! Должны? Нет. Это всего лишь начало! Что теперь делать? Теперь необходимо показать его заказчику и посмотреть на реакцию. Если его это устроит, то можно приступить к тестированию, а если нет, и заказчик захочет что-то посложнее, то придётся писать всё с нуля самому. Ещё раз повторю. CSS фрэймворки не решают всех проблем. Несмотря на это тысячи разработчиков пользуются ими как обычным инструментом веб-разработки потому что как и у любого инструмента, у CSS фрэймворков есть своё поле, для широкого применения. В любом случае, если запросы к дизайну не супер специфичные (80% случаев), то с помощью 960 Grid можно сэкономить много времени - а время деньги!

    Всем привет! Сегодня мы поговорим про то, что такое grid systems(система сеток) или просто гибкие сетки в адаптивной верстке .

    Сначала дадим определение тому, что такое Grid System .

    Grid System - коллекция стилей, основанных на классах, которые позволяют пользователю контролировать макет страницы, используя систему строк и колонок.

    Представим, что у нас есть страница блога. Она разделена на 2 колонки: слева основная часть, а справа - сайдбар. Давайте попробуем создать гибкую сетку для такой страницы.

    Ну, для начала мы должны сделать хоть и элементарную, но html разметку.






    Здесь у нас есть блок, который содержит всю страницу, в нем лежит блок с блогом, в котором лежат 2 блока: основная часть страницы и сайдбар.

    Итак, вся наша страница будет размером 960px . Вся сетка разделена на 12 колонок по 69px . каждая. Часть для блога будет шириной 900px . Основная часть страницы будет 566px , сайдбар - 331px .

    Вот, что мы получим в итоге

    #page {
    margin: 36px auto;
    width: 960px;
    }

    Blog {
    margin: 0 auto 53px;
    width: 900px;
    }

    Blog .main {
    float: left;
    width: 566px;
    }

    Blog .sidebar {
    float: right;
    width: 331px;
    }

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

    Для этого есть все та же формула, что и для шрифтов

    цель / контекст = результат

    Переведем блок всей страницы из пикселей в проценты.

    #page {
    margin: 36px auto;
    width: 90%;
    }

    90% выбрано по тому, что в таком случае у нас будут еще и отступы по краям по 5% . Однако вы можете выбрать другое значение.

    Используем нашу формулу: 900 / 960 = 0.9357

    Умножим результат на 100 , чтобы получить проценты, и пропишем в наш css .

    Blog {
    margin: 0 auto 53px;
    width: 93.75%;
    }

    То же самое нужно сделать и с колонками, но заметьте, что контекст изменился. Т.к. колонки находятся внутри блока с классом .blog , то он и будет контекстом. Давайте посчитаем.

    566 ÷ 900 = .628888889

    331 ÷ 900 = .367777778

    Переводим все в проценты и записываем в таблицу стилей.

    Blog .main {
    float: left;
    width: 62.8888889%;
    }

    Blog .sidebar {
    float: right;
    width: 36.7777778%;
    }

    Вот и все! Теперь мы получили гибкую сетку и можем использовать ее при верстке.

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

    Заметка! Как вы можете видеть, у нас получились довольно длинные значения процентов. Некоторые могут посоветовать вам округлить их, но этого ни в коем случае делать не надо! Запомните!

    А у меня на этом все, спасибо за внимание и удачной адаптивной верстки!

    Я думаю, что вы уже в курсе, что Grid превосходит Flexbox для создание макетов. Но как насчет адаптивных макетов? Что лучше использовать Flexbox или Grid? Оба умеют работать с адаптивными макетами. Вы можете подумать, что Flexbox лучше подходит, в конце концов - элементы Flex могут растягиваться, сжиматься, изменять направление и т.д. Но в Grid на самом деле есть несколько новых трюков, которые сэкономит вам много времени и проблем для адаптивных макетов.

    Функция Minmax

    Первый блестящий новый инструмент Grid, функция minmax, который позволяет нам определять диапазоны для столбцов и строк в нашем макете. В этом примере у нас есть оранжевая боковая панель, и мы хотим чтобы ширина была не меньше 100 пикселей, но не более 30% от ширины контейнера. Ширина контейнер 500 пикселей, поэтому наша боковая панель с удовольствием занимает 30% (150 пикселей).

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

    Работа функции minmax просто удивляет, в большинстве случаев вам даже не нужно будет использовать медиа-запросы.

    Мы можем добиться аналогичного эффекта с помощью Flexbox, но для этого требуется немного больше работы и кода. Мы должны использовать комбинацию flex-grow, min-width, max-width:

    Метод с Grid более гибкий и проще адаптируется. Кода меньше почти в два раза.

    Одно правило для всех элементов

    Если вам все-таки нужны медиа-запросы, с макетом Grid, это легко сделать. Предположим, мы хотим изменить этот макет на мобильном устройстве в один столбец. С помощью Flexbox нам нужно будет изменить каждый элемент в макете, чтобы переопределить минимальную ширину. Максимальную ширину отменять не нужно, так как минимальная ширина имеет приоритет.

    Если у вас простой макет этот подход вполне себе рабочий. Но чем сложнее будет ваш макет, тем больше элементов нужно будет переопределять через медио-запросы. С помощью Grid, эту задачу решить намного проще.

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

    Медиа запросы

    Возьмем демо из предыдущего урока.

    Страница состоит из двух сеток: главная сетка и вложенная внутрь одного из элементов. Мы можем контролировать наши сетки с помощью медиа запросов. Это значит, что мы можем полностью перестраивать макет под другую ширину экрана.

    Начнем мы с копирования объявления первой сетки. Обернем дубликат в медиа запрос по технике mobile-first. В качестве точки перехода я взял произвольно 500px.

    Grid-1 { /* стили для сетки */ } @media only screen and (min-width: 500px) { .grid-1 { /* стили для сетки */ } }

    Теперь мы поменяем нашу сетку в первом объявлении, поместив все в один столбец. Задаем один столбец мы с помощью свойства grid-template-columns. Проверьте, чтобы наши четыре строки были заданы через свойство grid-template-rows и соответствовали макету при помощи свойства grid-template-areas:

    Grid-1 { display: grid; width: 100%; margin: 0 auto; grid-template-columns: 1fr; grid-template-rows: 80px auto auto 80px; grid-gap: 10px; grid-template-areas: "header" "main" "sidebar" "footer"; }

    Grid - 1 {

    display : grid ;

    width : 100 % ;

    margin : 0 auto ;

    grid - template - columns : 1fr ;

    grid - template - rows : 80px auto auto 80px ;

    grid - gap : 10px ;

    grid - template - areas : "header"

    "main"

    "sidebar"

    "footer" ;

    Чтобы уместиться в маленькие экраны, мы сделали grid-gap равным 10px по умолчанию. Вот что у нас получилось . Вы также должны заметить, что мы меняем свойства padding и font-size в элементах.grid-1 div с помощью медиа запросов.

    Наша вложенная сетка

    Код выше изменяет наш главный макет. Однако у нас еще есть вложенная сетка, которая упрямо не хочет избавляться от своих двух колонок на любых экранах. Чтобы исправить это, мы сделаем ровно то же самое, но возьмем другую точку перехода по методу content-first:

    Item-2 { /* стили сетка */ } @media only screen and (min-width: 600px) { .item-2 { /* стили сетки */ } }

    Если переделать демо с автозаполнением и изменить ширину колонок на minmax(9em, 1fr), сетка бы пыталась вместить максимально возможное количество треков шириной 9em, а затем расширила бы их до 1fr, пока не заполнится весь контейнер:

    Недостаток: сетка будет пересчитывать треки только после перезагрузки, а не при изменении ширины окна. Попробуйте сузить окно браузера и обновить страницу. Для изменения значений можно подключить медиа запросы, но они плохо дружат с изменением ширины окна браузера.

    Заключение

    Обобщим все вышесказанное в списке:

    Медиа запросы позволяют нам полностью перестроить сетку при помощи изменения свойства grid-template-areas (и других) для различных сценариев.

    Свойство transition никак не влияет на макет сетки.

    Для заполнения контейнера сетки хорошо подходит ключевое слово auto-fill.

    Функция minmax() отлично дополняет автозаполнение, но не дает нам настоящей адаптивности.

    Теперь вы готовы работать с сетками! Следите за новыми статьями по CSS Grid, практическими упражнениями, решениями распространенных проблем с сетками.

    Похожие статьи
     
    Категории
    Видеоматериалы
    Популярное
    Новое