CSS Grid идеально подходит для адаптивной верстки. Используем трюк с display: table
Всем привет! Сегодня мы поговорим про то, что такое 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%;
}
Вот и все! Теперь мы получили гибкую сетку и можем использовать ее при верстке.
Как видите, все очень просто. В основе гибкой сетки, как и гибкого шрифта, лежит все одна и та же формула, запомнив которую, вы сможете без проблем верстать адаптивные сайты.
Заметка! Как вы можете видеть, у нас получились довольно длинные значения процентов. Некоторые могут посоветовать вам округлить их, но этого ни в коем случае делать не надо! Запомните!
А у меня на этом все, спасибо за внимание и удачной адаптивной верстки!
Дэнни Марков
Дизайн довольно простой - он состоит из выровненного по центру контейнера, внутри которого у нас есть шапка, основной раздел, боковая панель и подвал. Вот главные «испытания», которые мы должны провести, сохраняя CSS и HTML по возможности чистыми:
- Разместить четыре основных раздела макета.
- Сделать страницу адаптивной (боковая панель опускается ниже основного содержимого на маленьких экранах).
- Выровнять содержимое шапки - навигация слева, кнопка справа.
Как вы можете видеть, ради сравнения мы оставили всё максимально простым. Начнём с первого испытания.
Испытание 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 , по одному на каждый раздел страницы:
Теперь мы можем настроить нашу сетку и определить расположение каждой области. Вначале код может показаться довольно сложным, но как только вы познакомитесь с системой сетки, он становится проще для понимания.
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; }
Теперь список навигации и кнопка выровнены правильно. Осталось только разместить пункты внутри
Header nav { display: flex; align-items: baseline; }
Только две строки! Совсем неплохо. Давайте посмотрим, как с этим справится CSS Grid.
Решение на CSS Grid
Чтобы разделить навигацию и кнопку, мы должны добавить display: grid к header и настроить двухколоночную сетку. Нам также понадобятся две дополнительные строки в CSS, чтобы позиционировать всё на соответствующих границах.
Header{ display: grid; grid-template-columns: 1fr 1fr; } header nav { justify-self: start; } header button { justify-self: end; }
Что касается ссылок в одну строку внутри навигации, у нас не получилось сделать это корректно с CSS Grid. Вот как выглядит наша лучшая попытка:
Header nav { display: grid; grid-template-columns: auto 1fr 1fr; align-items: end; }
Понятно, что CSS Grid не справилась с этой частью макета, но это и не удивительно - основное внимание уделяется выравниванию контейнеров, а не содержимому внутри них. Эта система не для нанесения последних штрихов.
Выводы
Если вы прочитали статью целиком (а это отличная работа!), выводы не должны вас удивить. На деле нет лучшей системы - и Flexbox и CSS Grid хороши по своему и должны использоваться совместно, а не как альтернатива друг другу.
Для тех из вас, кто перепрыгнул непосредственно к выводам этой статьи (не волнуйтесь, мы тоже так делаем), вот краткий итог сравнения:
- CSS Grid отлично подходит для создания большой картины. Эта система облегчает управление макетом страницы и даже может иметь дело с нестандартным и асимметричным дизайном.
- Flexbox отлично подходит для выравнивания содержимого внутри элементов. Используйте эту систему для размещения мелких деталей дизайна.
- Используйте CSS Grid для двумерных макетов (строк И колонок).
- Flexbox лучше работает только в одном измерении (со строками ИЛИ с колонками).
- Нет причин применять только CSS Grid или только Flexbox. Изучайте их и используйте совместно.
В этой статье вы найдете полный курс по сеткам CSS. Мы разберем что это такое, какие отличая с FlexBox и как с можно работать с CSS Grid.
Сетки CSS это новый подход к созданию адаптивных сайтов с множеством блоков, расположенных в любых местах сайта. Помимо CSS Grid существует также технология , которая очень схожа с сетками. Разбираться в мельчайших различиях между ними мы не будем, так как на это понадобиться отдельная статья, но вкратце опишем основные отличия.
CSS Grid можно назвать более крутой и улучшенной версией FlexBox , ведь FlexBox позволяет работать лишь в одной плоскости: либо создавать столбцы, либо создавать ряды.
Сетки CSS позволяют делать больше, так как они работают в обеих плоскостях одновременно. Таким образом, создание адаптивных блоков сайта происходит намного проще, а возможности для расстановки объектов как вам вздумается - просто безграничны.
Предлагаем вам посмотреть полноценное видео по изучению сеток CSS, чтобы моментально вникнуть в суть CSS Grid :
- Урок по ;
В ходе урока было создано три страницы, код каждой страницы вы можете скопировать ниже.
Первый файл
Второй файл
Третий файл
Принцип работы
Работа с сетками очень проста. Алгоритм действий здесь следующий:
- Создаем один основной блок и помещаем в него другие блоки (секции );
- Добавляем к основному блоку свойство display: grid ;
- Ко всем элементам основного блока теперь можно применять свойства сеток CSS;
- Добавляем различные свойства. Документацию по всем возможным свойствам вы можете ;
Каждому блоку можно устанавливать ширину, высоту, его расположение. Блоки, которые создаются на основе сеток сразу имеют адаптивный дизайн, который подстраивает блоки под различные разрешения экранов.
Таким образом, вы можете писать меньше, а получать больше. Что еще может быть круче? Делитесь своим опытом использования сеток в своих проектах в комментариях к этой статье ⇣
От автора: при создании сложных сайтов сетки имеют огромное значение. Их значимость в современном веб-дизайне становится ясной, стоит только взглянуть на количество фреймворков, в которые внедрена данная технология для ускорения разработки.
После знакомства со спецификацией CSS Grid Layout вам больше не понадобятся отдельные файлы стилей, если вы захотите работать с системой сеток. Не менее важным плюсом будет то, что вы больше не будете полагаться на свойства типа inline и float для позиционирования элементов на странице. В этом уроке мы изучим основные моменты сеточных систем, а также создадим простой макет блога.
Поддержка в браузерах
На данный момент только IE 10+ и Edge поддерживают спецификацию Grid Layout – на коммерческих сайтах данную технологию использовать пока что нельзя.
В Chrome данную опцию можно активировать через флаг «Experimental Web Platform features» в chrome://flags. В Firefox – флаг layout.css.grid.enabled.
Другой вариант – использовать полифил, и да, полифил CSS Grid Polyfill существует! Вы можете воспользоваться любым из трех описанных вариантов и изучать Grid Layout пока он еще на раннем этапе разработки.
Обратите внимание: В IE на данный момент работает старая версия спецификации, что означает, что браузер не полностью поддерживает новую спецификацию. Когда мы дойдем до примеров, я рекомендую вам использовать Chrome или Firefox.
Терминология Grid System
Что касается позиционирования элементов, CSS Grid системы – это те же таблицы. Однако данный инструмент намного мощнее и разнообразнее. В данном разделе я расскажу про несколько терминов, которые необходимо будет помнить при работе с сетками:
Единицы измерения fr: с их помощью задается размер свободного пространства. Используется вместе с grid-rows и grid-columns. Из спецификации: «Распределение пространства происходит только после того, как все «длины» или размеры строк и столбцов с контентом достигнут максимальных размеров»
Линии: Линии отмечают границы других элементов. Они бывают как горизонтальные, так и вертикальные. На рисунке ниже 4 вертикальные и 4 горизонтальные линии.
Треки: Треки – пространство между параллельными линиями. На рисунке ниже 3 вертикальных и 3 горизонтальных трека.
Ячейки: Ячейки – строительные блоки сетки. На рисунке ниже всего 9 ячеек.
Области: Область – прямоугольник из произвольного количества ячеек. Т.е. трек – это одновременно и область и ячейка.
Позиционирование элементов в сетке
Начнем с основ. В этом разделе я покажу вам, как с помощью сетки размещать элементы в определенных местах. Для работы с CSS Grid Layout необходимо создать родительский элемент и один или более дочерних. Для примера я возьму разметку ниже:
< div class = "grid-container" > < div class = "grid-element item-a" > A < / div > < div class = "grid-element item-b" > B < / div > < div class = "grid-element item-c" > C < / div > < div class = "grid-element item-d" > D < / div > < div class = "grid-element item-e" > E < / div > < div class = "grid-element item-f" > F < / div > < / div > |
Для создания сетки контейнеру необходимо указать свойства display:grid или display:inline-grid, а также другие стили:
Grid-container { display: grid; grid-template-columns: 200px 10px 0.3fr 10px 0.7fr; grid-template-rows: auto 20px auto; }
Grid - container { display : grid ; grid - template - columns : 200px 10px 0.3fr 10px 0.7fr ; grid - template - rows : auto 20px auto ; |
С помощью свойств grid-template-columns и grid-template-rows задается ширина строк и колонок. В примере выше я создал 5 колонок. Колонка шириной 10px используется в качестве разделителя между элементами. Первая колонка имеет ширину 200px. Третья колонка занимает 0.3 части от оставшегося пространства. А пятая колонка занимает 0.7 от оставшегося пространства.
Так как первой строке задано свойство grid-template-rows: auto, это позволяет строке расширяться при добавлении контента. Строка в 20px работает как разделитель. В демо ниже видно, что элементы плотно прижаты друг к другу.
Обратите внимание на элемент В – он расположен во второй колонке, которую мы используем как разделитель. Если позиционирование элементов не задано вручную, браузер разместит элементы в ячейках слева направо, и если они не уместились в один ряд, то оставшиеся перепрыгнут на вторую стоку. Вот почему мы оставили 4 запасных колонки на второй строке.
Чтобы переместить элемент в заданную ячейку сетки, необходимо задать позиционирование данного элемента через CSS. Прежде чем я объясню, как двигать элементы сетки, взгляните на рисунок ниже.
В этом примере мы будем использовать линейную систему размещения элементов. Линейная система означает, что линии в сетке будут играть главенствующую роль при размещении элементов. В качестве примера возьмем элемент В. Горизонтально данный блок начинается на третьей линии и заканчивается на 4 линии колонок. Кроме вертикальный линий данный элемент расположен между линий на первом и втором ряду.
Для того, чтобы задать стартовую вертикальную линию элемента мы воспользуемся свойством grid-column-start. В нашем случае значение будет 3. Свойство grid-column-end указывает на конечную вертикальную линию элемента. В нашем случае это 4. Значения для горизонтальных линий выставляются таким же образом.
На основе вышесказанного делаем вывод, что для перемещения элемента В во вторую ячейку необходимо использовать код:
Element-b { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; }
Element - b { grid - column - start : 3 ; grid - column - end : 4 ; grid - row - start : 1 ; grid - row - end : 2 ; |
Точно так же для перемещения элемента F в шестую ячейку необходимо:
Element-f { grid-column-start: 5; grid-column-end: 6; grid-row-start: 3; grid-row-end: 4; }
Element - f { grid - column - start : 5 ; grid - column - end : 6 ; grid - row - start : 3 ; grid - row - end : 4 ; |
Создаем базовый макет
Сейчас мы создадим базовый макет блога, в котором будут хедер, футер, сайдбар и два секции под контент. Сперва разметка:
< div class = "grid-container" > < div class = "grid-element header" > Header < / div > < div class = "grid-element sidebar" > Sidebar < / div > < div class = "grid-element main" > Main Content < / div > < div class = "grid-element extra" > Extra Info < / div > < div class = "grid-element footer" > Footer < / div > < / div > |
Помните, что порядок размещения тегов в разметке никак не влияет на позиционирование элементов на веб-странице. Не меняя CSS, вы можете поставить футер в разметке выше хедера, но позиционирование элементов все равно останется прежним. Но я не советую так делать. Основная мысль тут в том, что разметка больше не говорит вам, где будет расположен элемент.
Нам осталось определить значения свойств типа grid-row-end для всех элементов. Как и в предыдущем примере, мы воспользуемся сеточной диаграммой, чтобы определить значения свойств.
Эта статья показывает, как работает эта сравнительно новая технология, именно работает, а не только описание свойств с поверхностными примерами.
Сама статья является адаптивным дополненным переводом CSS Grid Tutorial
Grid модуль в CSS был разработан CSS Working Group для того, чтобы предоставить наилучший способ создания шаблонов в CSS. Он попал в Candidate Recommendation в феврале 2017 года, а основные бразуеры начали его поддержку в марте 2017 года.
CSS Grid скоро станет неотъемлемой частью набора инструментов любого фронт-энд разработчика. И если вы один из них, то вам придется учить CSS Grid - который практически определенно станет неосопоримым умением для любой позиции во фронтэнд разработке.
С этим мощным функционалом и интуитивно понятным синтаксисом, шаблоны на grid будут несомненно менять то, на чем создается веб.
Введение
CSS Grid это новая модель шаблона, оптимизированная для двумерных шаблонов. Это идеальная модель для шаблонов сайтов, форм, галерей и всего, что требует точного и отзывчивого позиционирования.
С развитием веба в последние годы, разработка шаблонов веб-сайтов стала всё затруднительнее. В ранние годы веба, HTML таблицы зачастую использовались для многоколоночных шаблонов, форм и т.д. Но у этого метода есть свои недостатки. Это означает то, что представление должно было быть сделано на уровне разметки, таким образом не было различий между представлением и контентом. По-факту, таблицы были созданы для того, чтобы содержать табличные данные, а не для создания шаблонов. И не касаясь семантических проблем, табличные шаблоны не созданы для респонсив дизайна.
Флоаты в конечном итоге заменили табличные шаблоны как всеобще приемлемый и рекомендованный метод создания шаблонов, так как он позволяет нам позиционировать элементы вне зависимости от разметки. Тем не менее, пока этот метод считался значительным улучшением на фоне табличной верстки, у него тоже были свои ограничения. Флоаты в основном были разработаны для шаблонов документов и они не были подходящими для сложных шаблонов приложений, которые сейчас распространены в сети. Флоат элементы сложно контролировать, особенно на девайсах и viewport разных размеров. Это привело к различным гридободобным хакам, которые стали нормой, большинство из них требовалась дополнительная разметка, которая отвлекала от всей концепции разделения контента. Таким образом CSS Working Group было в поиске решения получше.
CSS Grid модель рассматривает эти проблемы и даже более. Она позволяет вам создавать продвинутые шаблоны за долю времени от того, которое бы вы потратили на них с флотами и с меньшим написанием кода.
Но конечно же для этого можно было бы использовать разные значения, такие как 100px , 7em , 30% и так далее. Вы также можете назначать имена строкам вместе с их размерами.
grid-template-columns: 1fr 1fr 1fr
Тоже самое, что и выше, только определяет колонки в гридах.
Выставляет разрыв. То есть пробелы между грид элементами. Тут мы используем vw единицу длины, которая относительна ширине viewport, но также мы можем использовать 10px , 1em и т. д. Grid-gap свойство это сокращение для grid-row-gap и grid-column-gap свойств.
Ну, а другая часть кода просто назначает разные стили грид элементам.
#grid >
Функция repeat()
Вы можете использовать функцию repeat() для повторяющихся объявлений значения размера элемента. Для примера, вместо того, чтобы делать это:
Grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
Мы можем сделать это:
Grid-template-rows: repeat(5, 1fr);
Что значительно сократит количество кода, которое вам нужно будет написать, особенно, если вы работаете с большими и повторяющимися гридами.
Создаем шаблон сайта с CSS Grid
Гриды включают в себя интуитивный «ASCII-графический» синтаксис, в котором вы можете виртуально «видеть» шаблон в коде, по-этому становится очень легко создавать и изменять ваш шаблон. Даже значительные изменения могут быть сделаны за несколько секунд. Этот интуитивный синтаксис также помогает с адаптивным веб-дизайном. Создание разных шаблонов для разных устройств становится довольно пустяковым делом при использовании гридов.
Давайте теперь создадим шаблон сайта, который выглядит таким образом:
А вот код этого шаблона:
Давайте ближе посмотрим на наш код. HTML разметка выглядит таким образом:
И так, мы сделаем
грид-контейнером, таким образом все другие элементы станут грид-элементами.А теперь давайте посмотрим на ASCII-графику, о которой мы говорили прежде.
Grid-template-areas: “header header header” “nav article ads” “footer footer footer”;
Этот кусок определяет наш шаблон. Просто смотря на код, мы можем видеть, что это 3х3 грид (три ряда и три колонки). Таким образом у нас получается пять грид областей на девяти грид ячейках, так как некоторые грид-области занимают несколько ячеек.
Мы так же видим, что шапка занимает весь первый ряд в три ячейки, а подвал занимает весь нижний ряд, также забирая три ячейки. Навигационная, контентная и рекламная секции, все вместе делят место во втором ряду, где каждому из этих элементов достается по одной ячейке.
Теперь мы можем назначить каждую из этих грид-областей каждому элементу:
#pageHeader { grid-area: header; } #pageFooter { grid-area: footer; } #mainArticle { grid-area: article; } #mainNav { grid-area: nav; } #siteAds { grid-area: ads; }
Свойство grid-area это сокращение свойства, которое позволяет вам размещать грид-элементы в гриде. В нашем случае, мы просто отсылаемся к названиям, которые мы предварительно указали в grid-template-areas.
Большая часть шаблона уже завершена. Остаток кода просто будет относиться к размерам, пробелам и высотам, в общем скорее к декоративной области.
Следующий код выдает размеры строкам и колонкам:
Grid-template-rows: 60px 1fr 60px; grid-template-columns: 20% 1fr 15%;
Первая и третья строки - обе в 60px высотой, а вторая строка забирает все оставшееся место.
Первый столбец равен 20% , а третий 15% . Второй же забирает все оставшееся место.
Изменяем шаблон
Вы можете изменить шаблон просто перераспределив грид-области в grid-template-areas .
Таким образом, если мы сменим на это:
Grid-template-areas: “nav header header” “nav article ads” “nav footer ads”;
То в результате получим такой шаблон:
Тем не менее, вам может понадобиться регулеровка размеров, если вы двигаете грид поменьше в место побольше.
Для примера, чтобы сделать так:
Навигация теперь занимает место где был контент, следовательно, размеры были отрегулированы. В противном случае, у нас был бы узкий контент и широкая навигация. Таким образом, код сейчас выглядит таким образом.
Grid-template-areas: “header header header” “article nav ads” /* До этого было “nav article ads” */ “footer footer footer”; grid-template-rows: 60px 1fr 60px; grid-template-columns: 1fr 20% 15%; /* До этого было ‘20% 1fr 15%’ */
Создаем адаптивный Grid
В шаблоне на гридах есть такие значения как auto-fill и auto-fit , которые позволяют вам создавать грид с множеством треков определенного размера, которые будут помещаться в контейнер. Это может означать то, что грид является адаптивным, то есть в нем элементы меняют свои позиции с тем, как вы меняете размер окна браузера.
Пример использования Auto-fill:
Вот результат:
Код отвечающий за это:
Grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
В нем колонкам выдается минимальный размер в 150px и максимум по оставшемуся месту. Такие треки будут повторяться столько раз, сколько нужно для того, чтобы уложиться в контейнер.
Repeat() функция повторяет определение трека количество раз, заданное первым параметром. Использование auto-fill заставит треки повторяться столько раз, пока они не заполнят контейнер.
Размер этих треков указан во втором параметре. В нашем случае, мы используем minmax(150px, 1fr) , чтобы указать то, что минимальный размер столбца равен 150px , а максимальный 1fr .
Auto-fit
auto-fit работает практически также, как и auto-fill . Разница тут только в том, что auto-fit стягивает все пустые треки в конце размещения, в то время как auto-fill нет. Лучший способ тут, это демонстрация со сравнением.
Использование двух маленьких грид элементов тут поможет показать всю концепцию работы. Auto-fill оставляет пустые треки в конце по указанным размерам, а auto-fit растягивает пустой трек, что ведёт к заполнению треков растянутыми элементами для заполнения пространства.
Гриды с медиа запросами
Одной из сильных сторон гридов является то, что вы можете создать совершенно отличный шаблон за секунды.
Это делает гриды идеальными для медиа запросов. Мы можем просто переназначить значения в ASCII-графике и обернуть результат в медиа запрос.
Это трех колоночный шаблон на большом viewport и он сжимается в одноколоночный на маленьких устройствах. Таким образом, этот пример будет выглядеть по-другому в зависимости от размера экрана. В любом случае, вот релевантный код для трехколоночного шаблона, для широких вьюпоротов.
Grid-template-areas: “header header header” “nav article ads” “footer footer footer”;
А вот соответствующий код для мобильной версии:
Grid-template-areas: “header” “article” “ads” “nav” “footer”;
Таким образом, все дело состоит в переназначении значений в свойстве grid-template-areas .
В нашем случае мы обернули мобильную версию в медиа запрос, как тут:
@media all and (max-width: 575px) { body { grid-template-areas: “header” “article” “ads” “nav” “footer”; grid-template-rows: 80px 1fr 70px 1fr 70px; grid-template-columns: 1fr; } }
Обратите внимание, что мы также подкорректировали значения в grid-template-rows и в grid-template-columns , чтобы они подходили под новый шаблон. В частности, тут должна быть только одна колонка и она должна занимать все свободное место. А так как все грид элементы будут в одну кучу, мы назначим 5 строк и определим их высоты.
Совмещаем grid c block
В зависимости от требований к вашему шаблону, нет ничего, что остановит вас изменить мобильную версию на display: block . Как тут:
@media all and (max-width: 575px) { body { display: block; } }
Это будет работать также как и в примере выше, но по-дефолту, элементы встанут по своему исходному порядку. В примере выше, мобильная версия имеет nav под ads, но если бы мы использовали display: block , то nav был бы выше ads.
Также используя этот метод, вам также может понадобится добавление несколькоих внешних отступов для компенсации отсутствия разрывов, которые были включены в версию с гридами.
Явные и неявные гриды
CSS Grid использует концепцию явного грида и неявного. Это ключевая концепция, которой вам нужно остерегаться при создании гридов, в противном случае под конец вы увидите скопление строк и колонок, о существовании которых вы даже и не ожидали.
Явный грид, это грид, который вы определяете в grid-template-rows, grid-template-colums и в grid-template-areas.
Тем не менее, вы все еще можете иметь элементы, которые не умещаются в ваш «явно» опредленный грид. Для примера, вы определили грид, который может уместить только шесть элементов, но сам контейнер на самом деле состоит из девяти элементов. Только шесть элементов будут умещаться в явный грид и три останутся. И вот где начинаются неявные гриды.
Неявные гриды автоматически генерируются грид-контейнером, всякий раз когда грид-элементы располагаются за пределами явного грида. Контейнер генерирует неявные грид треки, добавляя неявные строки в грид. Эти строки вместе с явными гридами и формируют неявные. Вот пример :
В этом примере, мы явно определяем две строки и две колонки, что уместит четыре грид элемента. Тем не менее, тут присутствует шесть грид элементов, таким образом был создан неявный грид, для того, чтобы уместить два дополнительный элемента.
И это очень хорошо.Если бы не был создан неявный грид, то два дополнительных элемента создали бы полный беспорядок в сетке.
Выставляем размер трека для неявных гридов
Возможно вы заметили, что дополнительный ряд не такой в высоту, как предидущие два. Это потому что мы выставили высоту строки в grid-template-rows свойстве, но применяется она только для явных гридов. Высота строки на неявных гридах должна выставляться с помощью свойства grid-auto-rows. Но так как мы этого не сделали, выходит, что неявный ряд использует размер трека auto, который основывается на контенте. Вот так располагаются свойства выставления размера трека:
В общем выходит так:
Явный грид использует grid-template-rows и grid-template-columns
Неявный грид использует grid-auto-rows и grid-auto-columns
В это случае нам не обязательно указывать конечные значения на первом элементе, потому что он охватывает только один трек. Тоже самое можно сказать и про второй грид элемент. По-дефолту, если вы не указываете конечную линию, то элемент охватит только один трек.
На самом деле, нам не нужно было указывать любое позиционирование для первого грид элемента, так как он находится на определенной позиции, то он был бы в любом случае. Но если бы мы не указали позиционирование для второго элемента, то он бы находился сразу за первым элементом занимая только 1 трек.
Именование грид линий
Вы также можете проименовать грид линии для облегчения обращения к ним. Это можно делать выставляя свойства grid-template-rows и grid-template-columns , например как тут:
#grid { display: grid; /* Set the tracks and name the lines */ grid-template-rows: 50px 1fr 80px ; grid-template-columns: 120px 1fr 80px ; grid-gap: 5px; height: 90vh; } … /* Now refer to those named lines */ #item2 { grid-row-start: row3-start; grid-column-start: col2-start; grid-row-end: row3-end; grid-column-end: col3-end; }
Проименованные линии могут быть как явными, так и неявными. Неявные проименованные линии создаются всякий раз, когда вы создаете именные грид-области используя grid-template-areas .
Имя берется из грид-области с прибавлением в конце -start и -end, в зависимости от того начало это или конец линии.
Таким образом для каждой проименованной грид области header, будет создано четыре неявных линии. Две названы header-start и column-start в проименованной грид области и две названы header-end соответственно.
Проименованные грид области
Грид области могут быть проименованы в свойстве grid-template-areas самого грид контейнера. Это то, что мы делали до этого, когда создавали шаблон сайта. Чтобы восстановить это в памяти, то это выглядит так:
#grid { display: grid; /* Проименовываем грид области*/ grid-template-areas: “a a” “b c”; … } … /* Теперь применяем каждый грид элемент к проименованной грид области */ #a { grid-area: a; } #b { grid-area: b; } #c { grid-area: c; }
Вы можете указать пустую ячейку, используя точку (.) или серию точек без пробелов. Для примера:
Grid-template-areas: “a a” “. b”; Или grid-template-areas: “header header” “… content”;
Свойства размещения гридов
Есть три коротких свойства, которые можно использовать вместо длинных свойств для размещения гридов, упомянутых в примерах выше. Вот куда они все помещаются.
grid-area - это свойство является сокращением для для:
grid-column - это свойство является сокращением для:
grid-column-start - указывает какая колоночная линия грид элемента стартовая и на сколько треков тянется.
grid-column-end - указывает то, на каких колоночных линиях заканчивается грид элемент и на сколько треков тянется.
grid-row - это свойство является сокращением для:
grid-row-start - указывает с какой строчной линии начинается грид элемент и на сколько треков он тянется.
grid-row-end - указывает какая строчная линия будет последней для элемента и насколько треков она будет тянуться.
Вы также можете использовать grid-auto-flow свойство, которое упоминалось в главе перед этой. Оно указывает как автоматически размещенные grid элементы должны помещаться в гриде. Автоматически размещенные элементы это те, которые не явно размещены с использованием любого свойства выше.
Создаем вложенный грид
Грид элементы могут сами становиться гридами в CSS Grid. То есть вы сможете вкладывать грид-элемент в другой грид-элемент, тем самым создавая вложенный грид.
Чтобы создать такой вложенный грид, все что вам нужно сделать - это применить display: grid (или display: inline-grid) к грид элементу и он сам станет гридом. Вы также можете использовать display: subgrid для создания подгрида. , как это происходит.
Наследование
Большинство грид свойств не наследуются, что означает то, что ваш вложенный грид не будет наследовать значения своего родительского грида. Это позволяет вам делать вносить изменения в родительский грид, без непреднамеренного влияния на вложенный грид.
Для примера, вы выставили grid-auto-flow: column на родительском гриде, но вы не выставили свойство на вложенный грид. В этом случае , вложенному гриду будет выставлено значение row, потому что это изначальное значение для этого свойства.
Обратите внимание, что на родительском гриде, числа идут вертикально вниз по колонкам, вместо того, чтобы располагаться горизонтально вдоль строки, но вложенный грид все таки идет в горизонтальном направлении вдоль строки.
Подгриды
CSS Grid модуль задает значение subgrid для свойства display . Тем не менее, не все браузеры его ещё поддерживают. Это значение должно оказаться довольно полезным.
Subgrid это вложенный грид, но с display: subgrid . Это делает его особенным типом грид-контейнера, который участвует в выставлении размера грида родительского грид контейнера. Другими словами, контент подгрида влияет на размер родительского грида, позволяя контенту расставляться по двум гридам. Ниже пример того, где это свойство могло бы быть полезным.
Вот список элементов:
А вот CSS, где список является гридом, а элементы списка являются подгридами.
Ul { display: grid; grid: auto-flow / auto 1fr; } li { display: subgrid; grid-column: span 2; margin: 0.5em; border: solid; padding: 0.5em; } label { grid-column: 1; } input { grid-column: 2; }
Этот пример показал бы label и input в ряд, а бордер бы был выставлен вокруг каждого элемента списка. Выставление каждому элементу списка subgrid означает то, что не должно возникнуть каких либо проблем с выравниванием форм ввода, потому что каждый элемент списка будет участвовать в формировании размера родительского грида.
Формы с авто-размещением
Вы можете использовать явные гриды как приемущество при создании форм или любого другого скопления элементов, которым требуется выравнивание в виде гридов. Для примера, вы можете использовать явные гриды для создания такой формы:
И когда вы будете добавлять элементы формы в разметку, явный грид будет добавлять строки, чтобы уместить их. Таким образом, чтобы создать форму сверху, нам нужна такая разметка.
Не нужды в дополнительной разметке, чтобы правильно все расставить. И также тут нет нужды в добавлении дополнительных классов для элементов формы. Мы добавляем только один класс для
Вы автоматически можете добавлять новые элементы формы и они будут автоматически подстроены под друие, так как они будут размещены в явном гриде.
Это является возможным, так как мы сделали саму форму гридом (к.myForm применено display: grid). И потом указали, что labels идут в одну колонку, а controls в другую.
Вот ещё один пример, на этот раз с ещё большим количеством элементов:
Когда подгриды получат широкое распространение среди браузеров, станет возможным выравнивать элементы формы, которые не прямые потомки
Скачать бесплатно звуковой эквалайзер на русском языке Эквалайзер и звуковые эффекты для windows
Программы для Windows Скачать виндовс 7 zip файл
Отключение антенны разных операторов Не работает антенна акадо