Начинается компоновка сетки

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

совместимость

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

Позвольте мне перевести для вас приведенные выше браузеры в порядке слева направо:

• ПК: Chrome, Edge, Firefox, IE, Opera, Safari
• Мобильные устройства: Android, Chrome для Android, Edge Mobile, Firefox для Android, Opera, IOS Safari, Samsung Internet

Что ж, вы можете убедиться, взглянув на совместимость браузеров.Теперь основные браузеры уже поддерживают макет Grid, так чего же вы ждете? Сесть в машину.

основная концепция

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

• Container:контейнер сетки, когда мы устанавливаемdisplay: grid;Он превращает контейнер в контейнер сетки, такой как зеленая рамка на внутреннем и внешнем слоях мелкого шрифта выше.
• Item:Элементы сетки, каждый дочерний элемент в установленном нами контейнере сетки является элементом сетки.
• Line:Линии сетки, как следует из названия, — это линии, которые разделяют сетки, просто горизонтальные и вертикальные линии в мелком шрифте.
• Track:Дорожка сетки, пространство между двумя соседними линиями сетки, то есть строкой или столбцом сетки.
• Cell:Ячейка сетки, область между двумя соседними строками и столбцами, подобна каждой ячейке в небольшой печатной книге.
• Area:Область сетки, область, ограниченная четырьмя линиями сетки.

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

Основное использование

Вторая остановка здесь, и мы собираемся продолжать хвастаться.

API, которые будут представлены на этом сайте:

1. grid-template-columnsа такжеgrid-template-rows
2. grid-gap -> grid-row-gap + grid-column-gap

Прежде всего, вытащите код:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

body {
  background: #CCCCCC;
}

.container > div {
  font-size: 35px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background: #666666;
}

.container > div:nth-child(2n) {
  background: #336666;
}

.container > div:nth-child(4n) {
  background: #f37e70;
}

.container {
  display: grid;
  grid-template-columns: 120px 120px 120px;
  grid-template-rows: 50px 50px;
}

Ну, теперь это выглядит так.

Мы можем видеть некоторые ключевые коды CSS выше:

1. использоватьdisplay: grid;Превратите внешний контейнер в контейнер макета сетки.
2. Теперь, когда у нас есть контейнер, что мы будем делать? Да, верно, мы начнем рисовать контейнер как сетку.
3. grid-template-columns: 120px 120px 120px;Нарисуйте контейнер в 3 столбца по 120 пикселей каждый;grid-template-rows: 50px 50px;Нарисуйте 2 линии по 50 пикселей каждая.

Вышеупомянутые два API добавляют две горизонтальные линии и три вертикальные линии к сетке, рисуя контейнеры в сетки одну за другой. Затем заполните элементы сетки по одному, тогда умные ученики еще раз задумаются, вы нарисовали сетку вот так, в ней 6 сеток, что будет, если я добавлю еще один div? Что ж, чтобы удовлетворить любопытство этого одноклассника, добавим в него div.

Тогда это становится таким:

Удивительно, не правда ли, я нарисовал 6 сеток, а появилось 7, и она еще имеет определенную высоту. На самом деле в сетке у него есть неявная дорожка сетки.

Когда наш элемент сетки находится в части сетки, которую мы не определили, он будет иметь значение по умолчанию, и мы также можем определить размер неявной дорожки сетки черезgrid-auto-rowsа такжеgrid-auto-columnsЧтобы определить строки и столбцы, об этой части можно многое сказать, вы можете перейти к этомублогчтобы понять.

讲完这个，我们再看看，每个格子挨得太近了，一点都不美观，咋办呢？ Мы добавляемgrid-gap: 2px 4px;посмотри:

Как видите, с помощью этого свойства мы устанавливаем зазор сетки, этот API на самом деле является комбинацией двух API (grid-column-gapа такжеgrid-row-gap).

Что ж, эта станция является основным использованием, давайте продолжим.

fr единиц и повторить

Выше мы написали страницу с 6 сетками с помощью некоторых основных свойств. В этом разделе мы не говорим о свойствах, мы говорим о значении единицы в сетке — фр. Так что же означает этот фр? Подобные свойства есть и во flex, fr означает единицу, размещенную в свободном пространстве, так что же это значит?

Например, ширина контейнера 1000 пикселей, теперь, еслиgrid-template-columns: 200px 1fr 1fr 2fr. Тогда это означает, что есть 4 столбца, первый столбец 200px, а затем оставшиеся 800px свободное пространство.После расчета можно сделать вывод, что 1fr это 200px, что и является значением fr.

Итак, наш приведенный выше пример на самом деле может быть записан такgrid-template-columns: 1fr 1fr 1fr;. Но теперь другая проблема, этот 1фр так надоедает писать, можно я один напишу.

Хорошая новость: да, мы можем использовать повтор для сокращения, поэтому приведенный выше пример можно изменить наgrid-template-columns: repeat(3, 1fr).

Сказав эти два, давайте перейдем к следующей остановке.

Применение линий сетки

На этой остановке мы поговорим об этих API:

1. grid-column -> grid-column-start + grid-column-end
2. grid-row -> grid-row-start + grid-row-end

Хорошо, давайте откажемся от приведенного выше примера. Теперь, если мы получим запрос, мы хотим использовать макет из 3 столбцов с фиксированными 200 пикселями слева и справа и адаптивной серединой. Что нам делать? Я считаю, что об этом сразу подумали все, ведь все очень умные.

<div class="container">
  <div>Left</div>
  <div>Main</div>
  <div>Right</div>
</div>

// ...，跟上面相同的代码
.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 500px;
  grid-gap: 2px 4px;
}

Ну, теперь у нас есть это:

Снова идет спрос, нужно добавить шапку и футер, ширина равна ширине основной, что теперь делать? Первый контейнер необходимо изменить:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 100px 500px 100px;
  grid-gap: 2px 4px;
}

Теперь мы можем использовать линии сетки для макета. В приведенном выше макете сетки есть 4 линии сетки по горизонтали и 4 линии сетки по вертикали. Сетка по умолчанию будет пронумерована, начиная с 1, поэтому мы можем использовать линии сетки, чтобы привязать элемент, где он должен быть:

/* 类名就是 html 对应的 div */
.left {
  grid-column: 1 / 2;
}
.main {
  grid-column: 2 / -2;
}
.right {
  grid-column: -2 / -1;
}
.header {
  grid-column: 2 / -2;
}
.footer {
  grid-column: 2 / -2;
}

В этом случае наш макет будет выглядеть так:

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

Использование 1 и 2 выше аналогично, поэтому я не буду здесь вдаваться в подробности.

Обратите внимание, что вы можете дать линиям сетки некоторые семантические имена для вашего удобства, такие как следующие, нижний колонтитул также может быть той же ширины, что и основной:

<div class="container">
  <div class="left">Left</div>
  <div class="main">Main</div>
  <div class="right">Right</div>
  <div class="footer">Footer</div>
</div>

.container {
  display: grid;
  grid-template-columns: 200px [main-start] 1fr [main-end] 200px;
  grid-template-rows: 200px 200px;
  grid-gap: 2px 4px;
}

.footer {
  grid-column: main-start / main-end;
}

Мы можем назвать линии сетки, а затем использовать их.

Применение области сетки

API, представленные в этом разделе:

1. grid-template-areas
2. grid-area

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

.container {
  display: grid;
  grid-template-columns: 200px  1fr  200px;
  grid-template-rows: 50px 300px 50px;
  grid-template-areas: 
    ". h ."
    "l m r"
    ". f .";
  grid-gap: 2px 4px;
}

.header {
  grid-area: h;
}
.left {
  grid-area: l;
}
.right {
  grid-area: r;
}
.main {
  grid-area: m;
}
.footer {
  grid-area: f;
}

Таким образом, мы также можем выполнить вышеуказанную операцию позиционирования, обратите внимание наgrid-template-areasСередина означает, что позиция пуста.

повторить продвинутый

Выше мы упомянули простое использование repeat, повторение заданного количества раз при создании сетки, но иногда мы не хотим указывать количество раз, а хотим заполнить ее автоматически, что нам делать в это время?

В этом месте мы упомянемauto-fitа такжеauto-fill.

Во-первых, мы строим сетку, повторяя:

.container {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: 50px;
  grid-gap: 2px 4px;
}

Таким образом, мы создали систему сеток, основанную на 9 столбцах. Если наше окно просмотра будет уменьшаться, то и каждая из наших сеток будет соответственно сужена. Мы не хотим, чтобы она стала очень узкой. Что нам делать?

Grid имеет функцию minmax(), которую можно использовать.Эта функция принимает два параметра, минимальное значение и максимальное значение.При изменении окна браузера она может гарантировать, что элемент изменяется в пределах этого диапазона. Например:

.container{
  grid-template-columns: repeat(9, minmax(250px, 1fr));
}

когда мы ставимgrid-template-columnsПосле того, как это станет таким, ширина каждого столбца будет между 250px и 1fr, но мы обнаружим, что он не может соответствовать этим сеткам, но он не переносится, потому что вы говорите ему иметь 9 столбцов, поэтому появляется полоса прокрутки, но ты я не хочу, чтобы это произошло, что мне делать?

В это время пришло время для появления двух параметров, о которых мы упоминали выше.

.container{
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

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

Так в чем же разница между fit и fill? Я нашел некоторую информацию, и в ней есть два резюме:

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

auto-fitПредпочитая использовать наименьшее количество столбцов для заполнения текущей строки, браузер сначала делает то же самое, что и автоматическое заполнение, тайно создавая несколько столбцов для заполнения дополнительного пространства строки, а затем сворачивая эти столбцы, чтобы освободить место для оставшихся столбцов. расширять.

Проведите эксперимент, когда ширина достаточно велика, выявится разница между ними:

.container1{
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
}
.container2{
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
}

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

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

Суммировать

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

Кроме того, некоторые атрибуты, которые не были введены, касаются выравнивания и других атрибутов.Вы можете найти следующую информацию, когда она вам понадобится.

больше информации:

• Руководство по изучению CSS Grid Layout
• MDN
• A Complete Guide to CSS Grid Layout (очень подробные инструкции, но на английском языке)

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