Макет сетки (Grid) — самая мощная схема компоновки CSS. —— Руан Ифэн
Уже почти 2020 год, вы еще не использовали сетку? Хотя импульс развития js в последние годы был сильным и затмил развитие css, на самом деле css также добился большого прогресса. Гибкая компоновка и компоновка сетки поддерживаются основными основными браузерами один за другим, что значительно облегчает нам вырезание изображений, и нам больше не нужно использовать систему сетки начальной загрузки, макет сетки поддерживается изначально! ТАК ПРОСТО ~
В этой статье основное внимание уделяется представлению примеров применения сетки, поэтому вводная часть представляет собой просто краткое введение в некоторые атрибуты (в основном удобные для вашего собственного запроса и использования).Учебное пособие по компоновке сетки CSS Grid.
Введение
Компоновка Grid делит контейнер на «строки» и «столбцы», что приводит к ячейкам, в которых расположены элементы.
контейнер
Контейнер установленdisplay: grid;илиdisplay: inline-grid;Элементы.
проект
Элемент является дочерним элементом контейнера верхнего уровня.
Линии сетки
Линии сетки — это линии по краям элемента.
свойства контейнера
Свойства контейнера должны быть установлены в контейнере.
Установите контейнер в виде строки или встроенной сетки:
display: grid;
display: inline-grid;
После настройки макета сетки настройки float, display: inline-block, display: table-cell, vertical-align и column-* дочерних элементов (элементов) контейнера будут недействительными.
grid-template-columns: 100px 100px 100px; // 将容器设为三列，每列的列宽为100px
grid-template-rows: 100px 100px 100px; // 将容器设为三行，每列的行高为100px
grid-template-areas: 'a a a'
'b b b'
'c c c'; // 定义区域名，由单个或多个单元格组成
grid-template // 上面三个属性的合并简写形式，不易读易写，不建议使用
grid // 多属性合并，不易读易写，不建议使用
Обратите внимание, что наименование регионов влияет на линии сетки. Начальной линии сетки каждой области автоматически присваивается имя области -start, а конечной линии сетки автоматически присваивается имя области -end. Например, если область называется заголовком, горизонтальные и вертикальные линии сетки в начальной позиции называются заголовком-началом, а горизонтальные и вертикальные линии сетки в конечной позиции называются заголовком-концом.
Установите интервал между элементами
grid-row-gap: 20px; // 设置行与行的间隔
grid-column-gap: 20px; // 设置列与列的间隔
grid-gap: <grid-row-gap> <grid-column-gap>; // grid-column-gap和grid-row-gap的合并简写形式，也可直径写做 gap
Горизонтальное/вертикальное положение всей области содержимого внутри контейнера
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content: <align-content> <justify-content>; // align-content属性和justify-content属性的合并简写形式
Горизонтальное/вертикальное положение содержимого элемента в ячейке
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: start | end | center | stretch;
функции repeat()/minmax() и ключевые слова auto-fill/auto-fill/auto/fr
grid-template-columns: repeat(3, 100px); // 3列， 每列100px
grid-template-columns: repeat(auto-fit, 100px); // 自适应列数， 每列100px
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); // 自适应列数， 每列最小100px
grid-template-columns: repeat(3, 1fr); // 3列，每列等宽
grid-template-columns: 100px 1fr 2fr; // 第一列100px，剩余空间 1 : 2 分配给第二第三列
grid-template-columns: 100px auto; // 第一列100px，第二列自适应剩余空间
grid-template-columns: 1fr 1fr minmax(200px, 2fr); // 前两列 1 等宽 ，最后一列最小 200px ，正常情况下是前一列的 2 倍
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; // [c1] 为网格线名
Иногда некоторым элементам назначаются позиции за пределами существующей сетки. Например, в сетке всего 3 столбца, но некий элемент указан в 5-й строке. На этом этапе браузер автоматически создает лишние сетки для размещения элементов.
grid-auto-columns: 50px 50px 50px; // 超出所定义网格行的列宽
grid-auto-rows: 50px 50px 50px; // 超出所定义网格行的行高
grid-auto-flow // 容器的子元素会排列顺序: row"先行后列"、 column"先列后行"、 row dense 和 column dense
Свойства проекта
Свойства проекта должны быть установлены в проекте.
Положение элемента можно указать, указав четыре границы элемента и линию сетки, на которой они расположены.
grid-column-start: 1; // 左边框所在的垂直网格线
grid-column-end: 2; // 右边框所在的垂直网格线
grid-row-start: 1; // 上边框所在的水平网格线
grid-row-end: 2; // 下边框所在的水平网格线
grid-column: 1 / 2; // grid-column-start和grid-column-end的合并简写形式 也可以结合网格线和span关键字
grid-row:1 / 2; // grid-row-start属性和grid-row-end的合并简写形式 也可以结合网格线和span关键字
grid-area: a // 指定项目放在哪一个区域 由容器上的grid-template-area划分区域
justify-self: start | end | center | stretch; // 设置单元格内容的水平位置
align-self: start | end | center | stretch; // 设置单元格内容的垂直位置
place-self: <align-self> <justify-self>; // align-self属性和justify-self属性的合并简写形式
пример макета
макет в два столбца
Одна сторона фиксированная, одна сторона адаптивная:адрес
<style>
.container{
display: grid;
grid-template-columns: 100px auto; // 或者 100px 1fr
}
</style>
<div class="container">
<aside></aside>
<main></main>
</div>
Двенадцать сеток
<style>
.container{
display: grid;
grid-template-columns: repeat(12, 1fr);
}
</style>
<div class="container">
<div>1</div>
...
</div>
Центрируется по горизонтали и вертикали
В настоящее время макет сетки — единственный способ добиться горизонтального и вертикального центрирования с помощью одной строки кода CSS:адрес
<style>
.container{
display: grid;
place-content: center;
}
</style>
<div class="container">
<div>asdf</div>
</div>
Адаптивное обоснование
Этот эффект трудно добиться эффекта выравнивания по левому краю последней строки. При использованииflexмакет илиtext-align: justify(Ссылаться наздесь) необходимо использовать пустое пространство меток равных столбцов, и если вы не уверены, сколько всего столбцов, трудно добиться эффекта выравнивания по левому краю последней строки. а такжеgridВ макете можно прекрасно добиться эффекта выравнивания последней строки по левому краю.
Ширина элемента фиксирована:адрес
Ширина элемента не фиксирована:адрес
Таблица с ограниченной шириной столбца
Третий столбец представляет собой сумму первых двух столбцов, когда ширина достаточна (то есть первые два столбца больше 100 пикселей), а минимум равен200px:адрес
.container {
display: grid;
grid-template-columns: 1fr 1fr minmax(200px, 2fr);
}
Макет Святого Грааля
Макет Святого Грааля для адаптивных мобильных устройств:адрес
Компоновка на основе сетки
Используйте различные средства для достижения следующего простого макета:
Чтобы разместить элементы на основе номеров линий сетки:адрес
также можно использоватьspanКлючевые слова:адрес
Компоновка с использованием именованных линий сетки:адрес
Макет 2 с именованными линиями сетки:адрес
использоватьrepeat()Функция используется для многократного создания сеток с одним и тем же определением:адрес
Используйте именованные области и неявно именованные линии сетки:адрес
Суммировать
Недавно я случайно ударился ногой, когда перемещал кирпичи... О нет, недавно я столкнулся с макетом, в котором несколько строк выровнены по обоим концам и оставлены в конце, когда я перемещал кирпичи, а затем я попробовал Zhang Xinxu в мире CSS. изtext-align: justifyСхема обоснования, результат убогий Vue'sv-forВ сгенерированном коде нет пробелов между элементами, что делает этот метод выравнивания недействительным.Это замечательная вещь, чтобы быстро изучить макет сетки~~
Поскольку я только изучаю макет сетки, статья немного сырая, пожалуйста, потерпите меня. Я обновлю статью, когда буду сталкиваться с интересными макетами сетки в будущем.
Скоро 2020 год, и пора использовать сетку.