От автора: в этом вводном уроке я расскажу вам об этой относительно новой функции CSS, расскажу о текущей поддержке в браузерах и покажу вам несколько примеров того, как работает CSS Grid Layout Module.
Поскольку веб-приложения становятся все более сложными, нам нужен более естественный способ делать расширенные макеты без хакерских решений, которые используют обтекания и другие менее обременительные методы. Увлекательное новое решение для создания макетов идет с CSS Grid Layout Module.
Что такое CSS Grid Layout Module?
Основная идея Grid Layout состоит в том, чтобы разделить веб-страницу на столбцы и строки, а также возможность позиционирования и изменения размера элементов строительного блока на основе строк и столбцов, которые мы создали с точки зрения размера, положения и слоя.
Сетка также дает нам гибкий способ изменить положение элементов только с CSS без каких-либо изменений в HTML. Это можно использовать со медиа запросами для изменения макета на разных контрольных точках.
Поддержка в браузерах
Прежде чем мы сможем больше погрузиться в Grid Layout, важно взглянуть на состояние поддержки в браузерах.
Поддержка в современных браузерах
Как видно из приведенного выше изображения, отличная новость заключается в том, что CSS Grid поддерживается последней версией большинства браузеров.
Если вы нажмете кнопку «Показать все» на Can I use, вы увидите, как далеко назад эта поддержка идет. Поскольку Grid является такой новой функцией, обратная совместимость не распространяется далеко, поэтому вам нужно помнить об этом, если ваша аудитория использует старую версию какого-то основного браузера.
Однако, если навести курсор на версию на Can I use, можно посмотреть скорость глобального использования для этой версии. На момент написания статьи последние версии всех браузеров без поддержки Grid используется гораздо меньше одного процента.
Internet Explorer … и другие не поддерживающие браузеры
Первое предложение Grid Layout было разработано Microsoft, а в IE10 вышла реализация префиксом -ms. Если вы посмотрите на поддержку на Can I use, вы увидите, что IE10 и IE11 поддерживают CSS Grid … с оговоркой, что они поддерживают только более старую версию спецификации. Облом. Это не изменится. Но что изменится, это использование этих браузеров. В июле 2018 года использование IE11 сократилось примерно до 2% в глобальном масштабе, а использование IE10 составляет примерно одну десятую процента.
Can I use также указывает, что несколько других браузеров не поддерживают grid layout. К ним относятся Opera Mini и Blackberry Browser. Opera Mini – единственный браузер, обладающий значительным использованием, но поскольку это мобильный браузер, вы, скорее всего, захотите настроить таргетинг на мобильный, а не макет grid.
Фолбеки для не поддерживающих браузеров
Учитывая, что подавляющее большинство используемых сегодня браузеров поддерживают CSS Grid, стыдно не использовать его на том основании, что некоторые браузеры могут его не поддерживать. Существуют различные варианты использования Grid и обеспечения превосходных резервов для не поддерживающих браузеров.
Возможно, самый простой вариант — предоставить простой mobile first макет. Это будет вполне адекватно для мобильных устройств, которые не поддерживают Grid, а также настольных браузеров, таких как IE.
Другим вариантом является использование более сложных фолбеков и переопределений для получения аналогичных результатов для Grid, как указано Рэйчел Эндрю.
И polyfill также доступен для обеспечения рабочей реализации Grid Module для браузеров, которые его не поддерживают. Обратите внимание, что это может быть немного устаревшим.
Пример Grid Layout
Начнем с примера, чтобы увидеть силу Grid Layout, а затем я объясню некоторые новые концепции более подробно. Представьте, что вы хотите создать приложение Twitter с четырьмя полноразмерными раскладками столбцов (твиты, ответы, поиск и сообщения), что-то абстрагируемое и похожее на снимок экрана ниже.
Вот наш HTML:
<div class="app-layout"> <div class="tweets">Tweets</div> <div class="replies">Replies</div> <div class="search">Search</div> <div class="messages">Messages</div> </div>
Затем мы применим CSS к контейнеру .app-layout:
.app-layout { display: grid; /* 1 */ grid-template-columns: 1fr 1fr 1fr 1fr; /* 2 */ grid-template-rows: 100vh; /* 3 */
}
Вот объяснение того, что мы сделали в предыдущем CSS:
Установили свойство display в grid.
Разделили элемент контейнера на четыре столбца, каждый столбец — 1fr (одна доля) свободного пространства в контейнере сетки.
Создали одну строку и установили высоту равной 100vh (полная высота вьюпорта).
Как вы можете видеть, Grid Layout Module добавляет новое значение в свойство display — grid. Значение grid устанавливает .app-layout контейнером сетки, который также устанавливает новый контекст форматирования сетки для его содержимого. Это свойство необходимо для начала использования Grid Layout.
Свойство grid-template-columns задает ширину каждого столбца сетки внутри Grid, и в нашем случае оно делит контейнер .app-layout на четыре столбца; каждый из них равен 1fr (25%) доступного пространства.
grid-template-rows задает высоту каждой строки сетки, и в нашем примере мы создали только одну строку с высотой 100vh. Макет с двумя столбцами и двумя строками будет выглядеть так:
И мы будем использовать следующий CSS:
.app-layout { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 50vh 50vh;
}
Мы также можем выполнить приведенный выше пример только на небольших экранах, обернув код внутри медиа-запроса. Это открывает отличную возможность для нас настроить макет по-разному в разных вьюпортах. Например, мы можем создать предыдущий макет только для вьюпортов под 1024px следующим образом:
@media screen and (max-width: 1024px) { .app-layout { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 50vh 50vh; }
}
Концепции Grid Layout Module
Теперь, когда вы видели простой пример, есть несколько новых концепций, которые я хотел бы осветить, чтобы вы лучше поняли Grid Layout. Хотя есть много новых концепций, я лишь взгляну на некоторые из них.
Элемент Grid
Элементы сетки — это дочерние элементы контейнера сетки. В приведенном выше примере .tweets и .replies будут элементами сетки.
Линии Grid
Строка сетки — это линия, которая существует по обе стороны столбца или строки. Существует два набора линий сетки: один набор определяющих столбцов (вертикальная ось) и другой набор, определяющий строки (горизонтальная ось).
Из приведенного выше снимка экрана, который представляет первый пример, я создал четыре столбца по 1fr каждый, что даст нам пять вертикальных линий. Я также создал один ряд, который дает нам две горизонтальные линии.
Давайте посмотрим, как мы можем позиционировать элемент сетки внутри контейнера сетки.
Расположение элементов с помощью номера линии
Вы можете ссылаться на точный номер линии в сетке, используя свойства grid-column-start и grid-column-end. Затем мы даем эти свойства номерам начала и конца строки. Если посмотреть на предыдущий пример, это то, как браузер по умолчанию устанавливает элементы по умолчанию:
.tweets { grid-column-start: 1; grid-column-end: 2; grid-row: 1;
} .replies { grid-column-start: 2; grid-column-end: 3; grid-row: 1;
} .search { grid-column-start: 3; grid-column-end: 4; grid-row: 1;
} .messages { grid-column-start: 4; grid-column-end: 5; grid-row: 1;
}
Рассмотрим код для столбца .tweet. Что делает каждая из трех строк в CSS:
Помещает дочерний элемент, начиная с первой вертикальной линии слева.
Завершает положение элемента во второй вертикальной линии.
Помещает элемент внутри всей строки.
Вы можете изменить это, изменив порядок элементов с разными позициями, поэтому порядок элементов будет: .search, .replies, .messages и .tweets.
И мы можем сделать это следующим образом:
.tweets { grid-column-start: 4; grid-column-end: 5; grid-row: 1;
} .replies { grid-column-start: 2; grid-column-end: 3; grid-row: 1;
} .search { grid-column-start: 1; grid-column-end: 2; grid-row: 1;
} .messages { grid-column-start: 3; grid-column-end: 4; grid-row: 1;
}
Мы также можем использовать сокращенное свойство grid-column, чтобы установить начальную и конечную линии в одной строке:
.tweets { grid-column: 4 / 5; grid-row: 1;
} .replies { grid-column: 2 / 3; grid-row: 1;
} .search { grid-column: 1 / 2; grid-row: 1;
} .messages { grid-column: 3 / 4; grid-row: 1;
}
Это изменило структуру компоновки только с помощью CSS, в то время как разметка остается без изменений. Это огромное преимущество использования модуля компоновки сетки. Мы можем изменить расположение элементов независимо от их исходного порядка, чтобы мы могли достичь любой желаемой компоновки для разных размеров экрана и ориентации.
Расположение элементов с помощью именованных областей
Область сетки — это логическое пространство, используемое для выкладки одного или нескольких элементов сетки. Мы можем назвать область сетки явным образом с помощью свойства grid-template-areas, тогда мы можем поместить элемент сетки в определенную область, используя свойство grid-area.
Чтобы сделать эту концепцию более понятной, давайте повторим пример с четырьмя столбцами с первым столбцом search:
.app-layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100vh; grid-template-areas: "search replies messages tweets";
}
В последней строке мы разделим контейнер сетки на четыре именованные области сетки, каждое имя для столбца. Следующий шаг — разместить каждый элемент сетки в именованной области:
.search { grid-area: search;
} .replies { grid-area: replies;
} .messages { grid-area: messages;
} .tweets { grid-area: tweets;
}
Пример Slack
Как насчет использования Grid Layout Module для реализации более сложного примера, например, создания строительных блоков макета Slack. Поскольку мы говорим о макетах, мы будем абстрагироваться и упрощать дизайн Slack до строительных блоков, представленных в сетке. Что-то вроде этого:
Из этого макета мы создадим три вертикальных столбца и три горизонтальные строки, и мы можем визуализировать их с использованием линий сетки следующим образом:
<div class="app-layout"> <div class="teams">Teams</div> <div class="channels">Channels</div> <div class="header">Header</div> <div class="messages"> <ul class="message-list"> <li></li> <li></li> </ul> </div> <div class="input"> <input type="text" placeholder="CSS Grid Layout Module"> </div> </div>
.app-layout { display: grid; height: 100vh; grid-template-columns: 100px 250px 1fr; grid-template-rows: auto 1fr auto;
}
Здесь я использую свойство grid-template-columns для создания трех столбцов в 100px, 250px, а третий столбец занимает оставшееся свободное пространство. Последняя строка создает три строки: первая и третья строки с автоматической высотой, а средняя строка занимает оставшееся свободное пространство. Остальная часть CSS выглядит так:
.teams { grid-column: 1; grid-row: 1 / 4;
} .channels { grid-column: 2; grid-row: 1 / 4;
} .header { grid-column: 3; grid-row: 1;
} .messages { grid-column: 3; grid-row: 2;
} .input { grid-column: 3; grid-row: 3;
}
Мы также можем создать макет Slack с использованием именованных областей, которые вы можете увидеть в этой демонстрации.
Grid Layout Module или Flexbox
Поскольку многие из вас начали использовать Flexbox, вы можете задаться вопросом: когда было бы целесообразно использовать Flexbox, и когда было бы более целесообразно использовать Grid Layout?
Я нашел хорошее объяснение от Tab Atkins: Flexbox подходит для многих макетов и множества элементов (компонент страницы), поскольку большинство из них принципиально линейны. Grid подходит для общего макета страницы и для сложных компонентов страниц, которые не являются линейными по своему дизайну.
Оба могут быть составлены произвольно, поэтому, как только они будут широко поддерживаться, я считаю, что большинство страниц будут состоять из внешней grid для общей компоновки, комбинации вложенных flexbox и grid для компонентов страницы и, наконец, макета block/inline/table на «концах» страницы, где располагается текст и контент.
Также Rachel Andrew поясняет: Grid Layout для основной структуры страниц строк и столбцов. Flexbox для навигации, элементы пользовательского интерфейса, все, что вы можете перевести в линейное пространство.
Заключение
Как вы видели, модуль компоновки сетки CSS является мощным из-за его краткости кода и того факта, что у вас есть возможность изменить порядок макета, не касаясь разметки. Эти функции помогли нам постоянно менять способ создания макетов для Интернета.
Автор: Ahmad Ajmi
Источник: https://www.sitepoint.com/
Редакция: Команда webformyself.
