[Макет сетки] - Подойдите к сетке

CSS

Определение компоновки сетки

Модуль CSS Grid Layout предоставляет систему компоновки на основе сетки, которую можно размещать в строках и столбцах, что упрощает разработку веб-страниц без использования плавающих элементов и позиционирования.
Просто установите display:grid на элементы блочного уровня. Или установите display:inline-grid для встроенных элементов, Можно создать сетку

Первый взгляд на эффект

Свойство отображения установлено в сетку или сетку интрасети.

Главное, что нужно сделать с макетом сетки, — установить отображение в сетку (элементы уровня блока) или встроенную сетку (встроенные элементы).

// grid-container称为grid容器
<div class="grid-container">
  // grid-item称为grid子项
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div> 
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>

image

Введение основных атрибутов

Чтобы сделать HTML-элемент ведут себя в качестве контейнера сетки, вы должны установить свойство отображения на сетку или сеть INTRANET. Контейнер сетки состоит из элементов сетки, которые, в свою очередь, помещают в строки и колонны.

grid-template-columns

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

грамматика:
grid-template-columns: <track-size> ... | <line-name> <track-size>...

.grid-container {
  display: grid;
  //网格布局有4列,所占宽度分别为50px 40px 30nepx 20px
  grid-template-columns: 50px 40px 30px 20px;
  //网格布局有5列,所占宽度分别如下
  grid-template-columns: 50px 40px 30px 20px 10px;
  // 容器分成3列，一列宽度为50px，然后将容器剩下的部分成2个部分,第二列和第三列各占1个部分
  grid-template-columns: 50px 1fr 1fr;
  // 自定义命名
  grid-template-columns: [第一纵线] 80px [纵线2] auto [纵线3] 100px [最后的结束线];
}

grid-template-rows

Этот атрибут определяет высоту каждой строки.
грамматика:
grid-template-rows: <track-size> ... | <line-name> <track-size> ...

  • : размер ширины. Может быть значением длины, процентным значением и единицами fr (единицы масштаба оставшегося пространства в сетке).
  • : Пользовательское наименование.
.grid-container {
  display: grid;
  // 网格布局有2行,所占高度分别如下80px 200px
  grid-template-rows: 80px 200px;
  // 容器分成3行，一行高度为50px，然后将容器剩下的高度分为2个部分,第二行和第三行高度各占1个部分
  grid-template-rows: 50px 1fr 1fr;
  // 任意命名
  grid-template-rows: [第一行开始] 25% [第一行结束] 100px [行3] auto [行4] 60px [行末];
}

justify-content

Это свойство используется для горизонтального выравнивания всей сетки внутри контейнера.
грамматика:

justify-content: stretch | start | end | center | space-between | space-around | space-evenly

возможное значение

  • растянуть: значение по умолчанию. Растяжение, ширина заполняет контейнер сетки, эффект растяжения действителен только тогда, когда целевой размер сетки установлен на автоматический Если ширина фиксирована, ее нельзя растянуть.
  • Пространство между: производительность оправдания. Промежуточное соединение между средним, среднее дополнительное белое пространство выделяется только в средней области элемента.
  • center: производительность выровнена по центру.
  • start: значение логического свойства CSS относительно направления потока документа. Выровняйте начальную границу контейнера, по умолчанию выравнивается по левому краю.
  • end: значение логического свойства CSS относительно направления потока документа. Выровняйте конечную границу контейнера, которая по умолчанию выровнена по правому краю.
.grid-container {
  display: grid;
  justify-content: end;
}
space-evenly space-around space-between center start end

align-content

Это свойство используется для вертикального выравнивания всей сетки внутри контейнера.
грамматика:

align-content: stretch | start | end | center | space-between | space-around | space-evenly

возможное значение

  • растянуть: значение по умолчанию. Каждый ряд гибких дочерних элементов растягивается пропорционально. Например, если есть два ряда гибких дочерних элементов, каждый ряд будет растягиваться на 50%.
  • start: Логическое значение свойства CSS, связанное с направлением потока документа. Поведение по умолчанию — начать сверху.
  • end: значение логического свойства CSS относительно направления потока документа.默认表现为底部开始。
  • center: показывает общее вертикальное выравнивание по центру.
  • space-between: Выровняйте верхнюю и нижнюю линии с обоих концов. Каждый ряд элементов оставлен, чтобы разделить оставшееся пространство поровну.
  • пространство вокруг: Каждая строка элементов имеет независимое неперекрывающееся белое пространство сверху и снизу.
  • пространственно-равномерно: Каждый ряд элементов полностью делится поровну вверх и вниз.
.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

place-content

Это свойство позволяет сокращать свойства align-content и justify-content в одном объявлении CSS. грамматика:

// 由于兼容性问题， 不建议合在一起
place-items: <align-content> / <justify-content>

зазор сетки

Разрыв между каждым столбцом / ряд называется разрывом

.grid-container {
  display: grid; // 网格布局
  grid-column-gap: 50px; // 列间距50px
  grid-row-gap: 10px; // 行间距10px
  grid-gap: 10px 50px ; // 分别设置行间距10px, 列间距50px
}

image


image

Пример

grid-column-start: <number> | <name> | span <number> | span <name> | auto

: Количество линий сетки, начинающихся и заканчивающихся.
: имя пользовательской линии сетки.
span : текущая сетка автоматически охватит указанное количество сеток.
span : текущая сетка будет автоматически расширяться до тех пор, пока не будет нажато указанное имя линии сетки.
auto: полностью автоматический, включая позиционирование, диапазон и т. д.

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

image

Аналогичным образом укладываем в вытяжную линию (рядную линию) сетку 1 выступа и пускаем в нее конец троса 3

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

Свойства grid-column (grid-column-start + grid-column-end) определяют элемент, на котором размещаются столбцы.

Возможное значение:

grid-column: <start-line> / <end-line> | <start-line> / span <value>;

например: пусть item1 начинается в строке 1 и заканчивается в строке 3:

.item1 {
  grid-column: 1 / 3;
}

image

.item1 {
  grid-column: 1 / span 3;
}

image

.item1 {
  grid-column: 2 / span 3;
}

image

Возможные значения и принципы такие же, как у grid-column

grid-area

Это свойство представляет собой область, занимаемую текущей сеткой, и может использоваться в качестве сокращения для свойств начала строки сетки, начала столбца сетки, отсечки строки сетки и свойств отсечки столбца сетки.

грамматика:

grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>

Возможные значения:

  • : название области. Создается свойством grid-template-areas.
  • // / : Занимает начальную позицию по вертикали и горизонтали области сетки.

например: сделайте "item1" начальной строкой 1 и строкой 2, конечной строкой 4 и строкой 3

.item1 {
  grid-area: 1 / 2 / 4 / 3;
}

image

например: сделайте так, чтобы "item1" заканчивался на строке строки 1 и строке столбца 2, а диапазон 2 строки занимал конец столбца 3

.item1 {
  grid-area: 1 / 2 / span 2 / span 3;
}

image

Именованные элементы сетки

Свойство grid-area также может называть элемент сетки Item.

.item1 {
  // item1将被命名为“myArea”
  grid-area: myArea;
}
.grid-container {
  //item1跨越的3列网格布局所有3列：
  grid-template-areas: 'myArea myArea myArea';
}

image

.item1 {
  // item1将被命名为“myArea”
  grid-area: myArea;
}
.grid-container {
  //item1跨越的5列网格布局中的3列
  grid-template-areas: 'myArea myArea myArea . . ';
}

image

.item1 {
  grid-area: myArea;
}

.grid-container {
  // 让item1跨越两列和两行：
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

image

Неявная сетка

Используйте GRID-AUTO-ROWS, GRID-AUTO-COLLSIONS, GRID-AUTO-TOTE для установки неявной сетки

  • grid-auto-rows: неявно созданный размер строк сетки
  • grid-auto-columns: трек размера для неявно созданных столбцов сетки
.grid-container {
  display: grid;
  background-color: #2196F3;
  padding: 10px;
  grid-gap:5px;
  // 行高度70px
  grid-template-rows: 70px;
  // 2列铺满各站1半
  grid-template-columns: repeat(2, 1fr);
  // 隐含创建的网格行的大小140px
  grid-auto-rows: 140px;
  // 隐含创建的网格的默认流方向: 行方向
  grid-auto-flow: row;
}

image
grid-template-columns (ширина столбца) grid-column-start
grid-template-rows (высота строки) grid-column-end
grid-template-area (именованная сетка) grid-row-start
grid-template grid-row-end
grid-column-gap (расстояние между столбцами) grid-column
grid-row-gap grid-row
grid-gap grid-area
justify-items (горизонтальное представление) justify-self
align-items (вертикальный рендеринг) align-self
место-элементы (горизонтальная и вертикальная отрисовка) place-self
justify-content (горизонтальное распределение)
align-content (распределение по вертикали)
place-content
grid-auto-columns (неявно создает размеры столбцов)
grid-auto-rows
grid-auto-flow
Сетка (сетка)

Основное различие Grid и Flex

  • Макет сетки подходит для крупномасштабного макета (двумерного макета), Обращайтесь с некоторыми неправильными и асимметричными рисунками.
  • Макет Flexbox лучше всего подходит для компонентов приложения и мелкомасштабных макетов (одномерных макетов).

Хотя грид имеет определенную совместимость (как показано на рисунке ниже), в соответствии с тенденцией гибкости неизбежно наступит эра грид.

image

насчет нас

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

Справочная статья:

Категории