Во второй половине 2019 года пришло время использовать сетку!

CSS

предисловие

Сейчас, в реальной разработке, мы можем больше всего использовать flex layout, и конечно floating и positioning.Кроме того, мы слышали, что grid layout — это тренд последних двух лет, то есть grid layout, но нет такое дело в проекте.Приложений слишком много, поэтому я их обобщу здесь, в надежде помочь всем и себе.

Чтобы дать вам опыт прямого эффекта:

Макет сетки: это двухмерный макет, состоящий из элементов внутри контейнера. Далее мы будем вращаться вокругконтейнера такжепроектЧтобы ввести сетку,

содержание

свойства контейнера

  1. grid | inline-grid
  2. grid-template-rows | grid-template-columns
  3. grid-template-areas
  4. grid-row-gap | grid-column-gap | grid-gap
  5. justify-items | align-items | place-items
  6. grid-auto-rows | grid-auto-columns | grid-auto-flow

Свойства проекта

  1. grid-row-start | grid-row-end | grid-column-start | grid-column-end
  2. grid-row | grid-column
  3. justify-self | align-self | place-self

свойства, связанные с контейнером

grid | inline-grid

  1. display: grid;
  2. отображение: встроенная сетка; Примечание: Подобно разнице между блоком и встроенным блоком, разница между сеткой и встроенной сеткой такая же, последняя может отображаться на той же строке, что и другие встроенные элементы.

grid-template-rows | grid-template-columns

  1. grid-template-rows: установить высоту строки
  2. grid-template-columns: установить ширину столбца

Вышеупомянутые три значения атрибута могут быть разными:

  1. Фиксированное значение: 50px и т. д.
  2. повторять и автоматически заполнять
  3. фр ключевое слово
  4. автоматическое ключевое слово
  5. функция минмакс()

Давайте попробуем 5 форм выше:

Во-первых, html-контент выглядит следующим образом:

//html
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>

//公共css
.container{
    display: grid;
    grid-gap: 10px 10px;
}
.container .item{
    background: dodgerblue;
}

1. Фиксированное значение

//css
.container{
    grid-template-rows: 50px 50px 50px;
    grid-template-columns: 50px 50px 50px;
}

Эффект следующий:

2. Функция повтора()

Из приведенного выше примера мы видим, что если есть повторяющиеся фиксированные значения, то мы можем использовать функцию повтора для замены

//css
.container{
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
}

Иногда размер ячейки фиксирован, но размер контейнера не определен. Если вы хотите, чтобы каждая строка (или каждый столбец) вмещала как можно больше ячеек, вы можете использовать ключевое слово auto-fill для обозначения автоматического заполнения.

.container{
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(auto-fill, 50px);
}

Эффект следующий:

Красная часть пустая, но занимает место.Чтобы увидеть эффект нагляднее, правым кликом открываем "Inspect" и проверяем тег элемента.Мы видим следующий эффект:
Голубые ячейки генерируются автоматически, а темно-синие ячейки генерируются нашим кодом.

3.fr ключевое слово

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

Следующие эффекты:

код показывает, как показано ниже:

.container{
    width: 200px;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: 1fr 2fr 1fr;
}

На этом этапе мы устанавливаем общую ширину контейнера в 200px, а затем распределяем ее в соотношении 1:2:1, то есть средняя ячейка 100px, а две стороны 50px.

4. Автоматическое ключевое слово

Давайте реализуем обычный макет из трех колонок, то есть по 200 пикселей слева и справа, а оставшуюся ширину посередине.

код показывает, как показано ниже:

 .container{
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: 200px auto 200px;
}

То есть ячейка, соответствующая auto, автоматически заполнит оставшуюся ширину

5. функция минмакс()

Как следует из названия, устанавливает диапазон, максимальное и минимальное значения

.container{
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: 50px 50px minmax(50px, 100px);
}

Давайте посмотрим на эффект:

Это время отображается в соответствии с максимальной шириной столбца, почему? Это связано с тем, что в настоящее время для нашего контейнера не задана ширина, по умолчанию установлено значение auto, поэтому он будет отображаться с максимальным значением, но что, если мы установим ширину контейнера менее 150 пикселей? (Поскольку всего 3 столбца, первые два столбца имеют размер 50 пикселей, а третий столбец также имеет размер не менее 50 пикселей.)

.container{
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: 50px 50px minmax(50px, 100px);
    width: 140px;
}

Эффект следующий:

Желтая часть является дополнительной, потому что ширина контейнера составляет 140 пикселей, первые два столбца - 50 пикселей, а третий столбец - не менее 50 пикселей, плюс интервал между столбцами, поэтому общая ширина ячейки превышает 140 пикселей, если вы не хотите чтобы превзойти, вы можете попробовать это сами. Попробуйте добавить overflow: hidden, чтобы увидеть другой эффект:

Выше мы говорили о формах значений общих свойств grid-template-rows и grid-template-columns, и эти формы можно использовать вместе друг с другом.

grid-template-areas

Это свойство используется для установки области.Из вышеизложенного мы знаем, что контейнер состоит из ячеек (или элементов), и мы хотим дополнительно разделить эти ячейки.Разные одна или несколько ячеек образуют область, таким образом формируя:Контейнер > Область > Ячейкаосновная форма.

код показывает, как показано ниже:

//html
<div class="container">
    <div class="item item-a">a</div>
    <div class="item item-b">b</div>
    <div class="item item-c">c</div>
    <div class="item item-d">d</div>
</div>

//css
.container{
        display: grid;
        width: 150px;
        height: 150px;
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
                "a a a"
                "b c c"
                "b d d"
    }
    .container .item-a {
        grid-area: a;
        background: dodgerblue;
    }
    .container .item-b {
        grid-area: b;
        background: green;
    }
    .container .item-c {
        grid-area: c;
        background: yellow;
    }
    .container .item-d {
        grid-area: d;
        background: red;
    }

Достигаемый эффект следующий:

Давайте проанализируем, какова роль grid-template-areas? Очевидно, что он может классифицировать ячейки, а разные классы представляют разные области.В то же время в исходном макете сетки 3x3 нужно указать 9 меток ячеек, но теперь нам нужно только четыре метки, и тогда каждая метка проходит через наборы сеток-областей. имя области и, наконец, где находится каждая область и как она организована, генерируется grid-tempate-areas.

То есть: установить имя области для указанной метки через grid-area, а затем установить, как область набирается и отображается через grid-template-areas.

Примечание. Заданная нами область сетки должна представлять собой обычную прямоугольную область Любые L-образные, вогнутые или выпуклые формы не поддерживаются и будут считаться недопустимыми значениями свойств.

В предыдущем введении мы узнали отдельно: grid-template-rows grid-template-columns grid-template-areas, разумеется, эти три свойства также можно объединить в одно свойство, а именно grid-template

grid-row-gap | grid-column-gap | grid-gap

  1. grid-row-gap: установить межстрочный интервал
  2. grid-column-gap: Установите интервал между столбцами
  3. grid-gap:

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

justify-items | align-items | place-items

Используется для установки того, будут ли элементы сетки (или содержимое каждой ячейки) выровнены по горизонтали и вертикали вверх, вниз, влево и вправо или растянуты.

  1. justify-items: start | end | center | stretch
  2. align-items:start | end | center | stretch
  3. place-items: |

Давайте посмотрим на пример:

 .container {
    justify-items: stretch; //默认值
    align-items: stretch; // 默认值
 }

Эффект следующий:

Посмотрим на другие значения:

.container {
    justify-items: start;
    align-items: end; 
 }

Эффект следующий:

Взгляните на эффект центрирования:

.container {
    justify-items: center;
    align-items: center; 
 }

justify-content | align-content | place-content

  1. justify-content: stretch | start | end | center | space-between | space-around | space-evenly;
  2. align-content: stretch | start | end | center | space-between | space-around | space-evenly;
  3. место-содержание: комбинированное написание

Во-первых, давайте взглянем на эффекты по умолчанию:

.container {
    justify-content: start; 
    align-content: start;    
}

Эффект следующий:

Взгляните на эффект центрирования:

.container {
    justify-content: center; 
}

Эффект следующий:

Точно так же, если это: justify-content: end, он будет отображаться справа.

Давайте снова посмотрим на пространство-вокруг:

.container {
    justify-content: space-around; 
}

Эффект следующий:

Продолжайте смотреть: пространственно-равномерно

.container {
    justify-content: space-evenly;
}

Эффект следующий:

Примечание: Внимательно посмотрите на разницу между пространством вокруг и пространством равномерно. Первое нужно для того, чтобы левый и правый интервал каждого столбца был одинаковым. В этом случае, например, левый интервал второго столбца и правый интервал первого столбца в сумме удваивает расстояние. , но space-evenly — это просто чистый контроль интервала между столбцами.

Наконец, давайте посмотрим на: пробел между

.container {
    justify-content: space-between;
}

Эффект следующий:

Вышеупомянутые свойства аналогичны свойствам гибкого макета, вы можете попробовать сравнить их, чтобы увидеть эффект.

grid-auto-rows | grid-auto-columns | grid-auto-flow

Иногда некоторым элементам назначаются позиции за пределами существующей сетки. Например, в сетке всего 3 столбца, но некий элемент указан в 5-й строке. На этом этапе браузер автоматически создает лишние сетки для размещения элементов.

Например: сетка 3x3 выглядит следующим образом:

Мы хотим поместить третий элемент в четвертую строку и третий столбец, как с этим быть?

.container .item:nth-child(3){
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column: 3/4; //是grid-column-start和grid-column-end的缩写
    background: red;
}

Эффект следующий:

В этот момент мы видим третий элемент.После размещения его в четвертой строке и третьем столбце высота становится автоматически оборачиваемым содержимым.Как установить стиль этого отдельно выпущенного элемента? сетка-авто-строки и сетка-авто-столбцы

.container {
    grid-auto-rows: 100px;
}
.container .item:nth-child(3){
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column: 3/4; //是grid-column-start和grid-column-end的缩写
    background: red;
}

//注意：此处的grid-row-start grid-column-start grid-column都是项目的属性，用于设置项目在水平和垂直方向上的起始网格线和网格线，即项目的位置处于哪一行，那一列。 下面我们会详细介绍

Эффект следующий:

Наконец, давайте взглянем на последнее свойство контейнера: grid-auto-flow, которое используется для установки направления расположения элементов.По умолчанию используется горизонтальное направление или вертикальное направление.

.container {
    grid-auto-flow: row//默认值
}

Изменить на вертикальную ориентацию:

.container {
    grid-auto-flow: column
}

Эффект следующий:

Свойства, связанные с проектом

  1. grid-column-start: вертикальная линия сетки, где расположена левая граница
  2. grid-column-end: вертикальная линия сетки, где расположена правая граница
  3. grid-row-start: горизонтальная линия сетки, где расположена верхняя граница
  4. grid-row-end: горизонтальная линия сетки, где расположена нижняя граница
  5. сетка-строка | сетка-столбец: Аббревиатура
  6. grid-area: установить имя области элемента

Например: для достижения следующих эффектов:

.container{
    display: grid;
    grid-template-rows: repeat(4, 50px);
    grid-template-columns: repeat(4, 50px);
    grid-gap: 10px 10px;
    grid-auto-rows: 50px;
}
.container .item:nth-child(5){
    grid-row: 2/4;
    grid-column: 2/4;
}

С помощью этих свойств вы можете управлять положением и размером элемента и можете добиться эффекта, похожего на слияние ячеек.

Следуя приведенному выше примеру, достигаются следующие эффекты:

Когда вы видите этот эффект, вы можете подумать, что элементы justify и align-items можно установить по центру.

Правильно, но justify-items и align-items являются свойствами контейнера и действительны для всех элементов Что, если мы просто хотим установить определенную ячейку?

.container .item:nth-child(5){
    justify-self: center;
    align-self: center;
}

Точно так же это может быть сокращено: место-я: центр центр;

На этом этапе были введены свойства, связанные с компоновкой сетки.Существует много связанных свойств, и их легко запутать.Больше следует использовать на практике в нашем проекте, конечно, предпосылка заключается в том, что требования совместимости не высоки.

Вот некоторые веб-сайты, на которые можно ссылаться в процессе обучения:

  1. Является ли будущее направление развития внешнего интерфейса Flexbox или Grid?Ууху. Call.com/question/28…
  2. Чжан Синьсюй:у-у-у-у. palms.com/WordPress/2…
  3. Руан Ифэн:Уууу. Руан Ифэн.com/blog/2019/0…
  4. flex vs grid: blog.CSDN.net/IAC743 Ваш дом 0 не/…
Категории