Модуль компоновки сетки CSS представляет новую и универсальную систему позиционирования элементов в макете веб-сайта с использованием настраиваемой сетки. CSS Grid теперь поддерживается двумя последними версиями всех основных браузеров, поэтому пришло время использовать его во всех наших проектах. В этом уроке мы подробно рассмотрим, как использовать основные свойства CSS Grid.
С CSS Grid, дизайнеры могут создавать совершенно разные макеты устройств в чистом CSS
CSS Grid — чрезвычайно мощный инструмент для компоновки элементов. Он представляет собой беспрецедентную гибкость в макете, используя только чистый CSS и без абсолютно позиционирующих элементов (техник е, что может привести ко многим проблемам). CSS Grid позволяет нам получать чрезвычайно разнообразные и специфичные для устройства макеты из одной и той же точной разметки HTML.
Нам больше не нужно полагаться на хаки, абсолютное позиционирование и манипулирование JavaScript DOM для реализации динамических макетов с изменением формы. CSS Grid предоставляет дизайнерам пустой холст для создания любых макетов, которые они желают, не беспокоясь о том, как его достичь, открывая новую эру веб-дизайна и разработки со свободой от ограничений CSS и обходных решений прошлого.
Как определить сетку
Чтобы создать сетку внутри контейнера, ей необходимо предоставить свойство CSS : сетка . Количество столбцов и строк определяется количеством разделенных пробелами размеров, назначенных столбцам grid-template-columns и сетки-шаблонов соответственно .
Размеры могут быть любыми действительными единицами CSS, такими как px или vw или ключевое слово auto которое позволяет столбцам или строкам растягиваться через доступные пространство. Например, grid-template-columns: 10px auto приводит к столбцу 10px, за которым следует второй столбец, который заполняет все доступное пространство.
Сетка также использует «дробную» единицу fr которая заставляет любое оставшееся пространство распределяться по столбцам или строкам на основе соотношений этих единиц. grid-template-rows: 1fr 2fr создает две динамические строки со вторым в два раза размером первого, тогда как grid-template-columns: 1fr 1fr 1fr 1fr определяет четыре равных размера колонны. Последнее можно упростить, используя новую функцию repeat () для grid-template-columns: repeat (4, 1fr) .
Сетка с ячейками одинакового размера, возникающая из столбцов с одинаковым соотношением, динамической ширины и высоких рядов 75px
Таким образом, сетка может создаются внутри контейнера класса grid с четырьмя одинаковыми размерами, динамическими столбцами и четырьмя строками высотой 75 пикселей (как показано на рис. bove) с использованием:
Сложные сетки с ячейками неравного размера могут быть созданы путем объединения различных единиц, упомянутых ранее. Мы также можем использовать функцию minmax () для определения минимальных и максимальных размеров динамических столбцов и строк. Следовательно, grid-template-rows: 40px 2fr repeat (2, minmax (75px, 1fr)) приводит к четырем строкам с первым 40px высоким, остальные три растянуты на оставшееся пространство в 2: 1: 1, а последние два имеют минимальную высоту 75 пикселей, что устанавливает минимальную высоту второй строки до 150 пикселей.
. После создания сетки линии сетки, представленные пунктирными линиями на изображениях, являются автоматически пронумерованы сверху для строк или слева для столбцов. Строкам также присваивается второе отрицательное число относительно их индекса со дна для строк или справа для столбцов.
Например, первая пунктирная вертикальная линия слева в сетках выше 1 и -5 а третья — 3 и -2 . Эти числа могут использоваться как граничные линии предметов, помещенных в сетку. Строки сетки также могут быть названы путем добавления строки между квадратными скобками в объявлениях свойств, например. grid-template-rows: [1st] 1fr [second-line] 1fr [last] .
Сетка с минимальной и максимальной высотой, созданной с использованием комбинации блоков px и fr и функции [minmax() ]
Аналогично Flexbox горизонтальное и вертикальное положение предметов, помещенных в сетку, можно контролировать, установив jus и соответственно, начало центр конец или stretch ,
То же самое применимо для столбцов сетки и позиций строк в контейнере большего размера, используя выравнивание-содержание и align-content соответственно. Допустимые параметры этих свойств также включают пробел между где дополнительное пространство разделено между столбцами / строками, а также пространство вокруг и пространство равномерно где пространство равномерно распределяется между столбцами / строками с тем же или половиной пространства на концах соответственно. Мы также можем определить align-content и justify-content (в указанном порядке) с использованием места-контента и выравнивающих элементов и с использованием позиций .
Позиционирование позиций с использованием номеров строк
Чтобы поместить элемент в сетку, мы можем установить его ] grid-column-start и grid-column-end к номерам вертикальных линий, между которыми элемент должен быть растянут. Для строк свойства: сетка-строка-старт и сетка-строка-конец — и, конечно, числа относятся к горизонтальным линиям.
Items может содержаться в одной ячейке сетки или растягиваться через несколько столбцов и сеток
Мы могли бы также использовать стенограммы grid-column и сетки-строки установив их только в начальную линию сетки, в результате чего элемент автоматически растягивается до следующая линия сетки. В соответствии с изображением выше, используя эти методы, item1 можно поместить между вертикальными линиями 2 и 4 и горизонтальными линиями 3 и -1 (последняя линия или первая снизу) и пункт2 с вертикальной линии 3 и горизонтальной линией 1 на следующие линии сетки, используя:
Чтобы упростить далее, декларации grid-column-start: 2 и конец сетки-столбца: 4 можно объединить вместе как grid-column: 2/4 с тем же значением, что и для строк с использованием строки сетки .
Оговорка с использованием этих методов размещения заключается в том, что некоторые из объявлений являются несколько неправильными. Например, grid-column-end: 4 и grid-column: 2/4 могут быть неверно истолкованы как означающие «размещение конечных элементов в столбце 4» и «место в столбцах 2» , 3 и 4 'соответственно. Это, конечно, не так, поскольку числа представляют собой линии сетки, а не столбцы. Чтобы избежать этого потенциального ловушка, мы можем объявить номер строки стартовой сетки и количество столбцов или строк, которые должен охватывать элемент, используя ключевое слово span.
Используйте ключевое слово span, чтобы определить количество столбцов или строк, которые вы хотели бы использовать для объекта
Используя эти методы, мы можем изменить положение item1 между горизонтальными линиями 2 и 4 и вертикальными линиями 1 и 2, и пункт 2, начиная с вертикальной линии 2 и охватывая три столбца и от горизонтальной линии 3, охватывающей две строки (как показано на рисунке выше), используя:
Верьте или нет, размещение позиций может быть еще более упрощено с помощью свойства сетки что является сокращением для сетки-строки-начала grid-column-start grid-row-end и grid-column-end в этом порядке. Если определены только первые два свойства, элемент будет автоматически помещаться между этими строками и следующими.
Это свойство сетки также позволяет сочетать номера строк с ключевым словом span. Применяя эти методы, мы можем переместить item1 и item2 как таковые:
# item1 {
площадь сетки: 2/1 / span 2 / span 3;
}
# item2 {
площадь сетки: 4/4;
}
Позиционирование элементов с использованием названий областей
Хотя использование номеров линий сетки и ключевого слова — отличный способ позиционирования элементов, есть еще более интуитивно понятный и простой способ размещения элементов в сетке. Это связано с использованием свойств сетки и grid-template-areas .
Чтобы достичь этого, каждый элемент, который должен быть помещен в сетку, должен сначала получить имя, установив его свойство grid-area в строку, которая затем может быть включена в сетку ] [-1959015]. Затем становится возможным определить grid-template-areas с помощью визуальной «карты», в которой строки заключены в кавычки, причем содержимое каждой ячейки сетки представлено строкой, относящейся к сетке -area имена предметов.
Пустые ячейки символизируются полной остановкой (. ), а пробелы обозначают вертикальные линии сетки. Строки могут быть размещены на новых строках, чтобы обеспечить визуальное представление сетки следующим образом:
@media (min-width: 1001px) {
.grid {
Сетка-шаблон-направления:
"меню меню меню заголовка"
"Герой героя героя героя"
"Герой героя героя героя"
«основное главное изображение»
"основной основной.
«баннер баннер баннер»;
}
}
Это еще не все — количество столбцов и строк сетки можно даже изменить, чтобы при необходимости разрешить определенные размеры экрана, переопределив grid-template-columns ] и / или grid-template-rows в медиа-запросах.
Элементы перекрытия также могут быть достигнуты с помощью CSS Grid. Несколько элементов могут занимать одни и те же ячейки сетки и, следовательно, могут перекрываться друг с другом, используя свойства z-index элементов для управления порядком, в котором они складываются.
Разметка CSS-сетки свойства ниже мобильных свойств обеспечивают браузеры, которые все еще не поддерживают Grid, будут игнорировать его и отображать мобильную версию. В качестве альтернативы мы можем добавить базовый резервный макет с использованием @supports — запроса, который применяет правила на основе поддержки браузера для конкретной функции CSS. Таким образом, мы можем установить резервный макет для размеров экрана, превышающий 720px:
Если по какой-то причине вам понадобится этот резерв, который будет показан для Internet Explorer 10 и 11, которые не поддерживают Grid, или, как это ни парадоксально, запрос @supports вы может использовать хорошо известный запрос, который применяет стили только в IE10 и 11:
Если вам нужна поддержка IE9 и старше, загрузите дополнительную таблицу стилей в HTML с соответствующими стилями, используя:
Ресурсы CSS Grid
Для получения дополнительной информации и руководств по CSS-грид-модулю рассмотрим следующие ресурсы.
MDN web docs Как всегда, сайт веб-документации Mozilla Developer Network — отличное место для начала — или постоянного возврата в зависимости от того, насколько сильно ваша память — для ресурсов веб-разработчиков. В его макете страницы сетки CSS, в частности, есть объяснения всех свойств Grid, а также интерактивные примеры для вас.
Scrimba interactive: CSS Grid tutorial Scrimba — это платформа интерактивных курсов кода. Вы можете приостанавливать видео, редактировать код в них и видеть результаты перед возобновлением учебника.
Игра в грид-сад Отличный интерактивный способ обучения коду — это игры. Grid Garden — это онлайн-игра, в которой вы поливаете сад моркови, введя свойства CSS Grid в редактор.
Эта статья изначально была опубликована в net всемирной бестселлером для веб-дизайнеров и разработчиков. номер 309 или подписываются .
Загрузка...
