Звездная сетка будущего макета

внешний интерфейс алгоритм CSS flexbox

сетка это тренд

Grid-layout не предназначен для замены flex-layout, это дополнение к flex. Grid хорош для двумерной компоновки, а flex хорош для одномерной компоновки. Им нужно внести свой вклад.

Долгожданный grid-layout наконец начал поддерживаться в марте 2017 года и поддерживался некоторыми браузерами.


flex не соответствует нашим требованиям к общему макету страницы,Don't use flexbox for overall page layoutЭта статья иллюстрирует такой момент: не используйте flexbox для разметки всей страницы. И мы также можем чувствовать, что, когда flex делает общий макет страницы при обычном использовании, все еще есть недостатки, и много inline-box и float по-прежнему необходимы для упорядочения содержимого (// страница сведений о послепродажном заказе TODO как пример); Еще один вопрос, о котором мы поговорим после того, как разберемся с сеткой позже.

grid = table2.0?

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

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

несколько терминов

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

Контейнер сетки устанавливает новый контекст форматирования сетки для своего содержимого, который является границами элементов внутренней сетки.

линия сетки

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

сетка-дорожка сетка-дорожка

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

ячейка сетки ячейка сетки

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

сетка-область

Ограничивает область линиями сетки в качестве границ. Первоначально и NetEase, и Alibaba занимали одну ячейку, но теперь им приходится расширяться, занимая две, и эти две складываются в соответствующие области сетки.

два примера

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

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

  • Общий макет веб-страниц: верхний и нижний колонтитулы, блок основного контента и боковая колонка с обеих сторон.
  • Фиксированная ширина с обеих сторон, переменная ширина посередине
  • Содержимое трех средних столбцов одинаковой высоты
  • Нижний колонтитул всегда находится внизу окна, даже если содержимое не заполняет всю высоту окна.
  • Отзывчивый макет, все модули отображаются со 100% шириной в меньшем окне просмотра.

Вы можете быстро закодировать этот интерфейс в уме и написать стиль, это будет не сложно, но и не просто. мыПосмотрите, как это делает сетка

// key code
.hg__header { grid-area: header;}
.hg__footer { grid-area: footer;}
.hg__main { grid-area: main;}
.hg__left { grid-area: navigation;}
.hg__right { grid-area: ads;}

.hg {
    display: grid;
    grid-template-areas:    "header header header"
                            "navigation main ads"
                            "footer footer footer";
    grid-template-columns: 250px 1fr 300px;
    grid-template-rows: 100px 
                        1fr
                        80px;
    min-height: 100vh;
}

шаг:

  1. определить сетку

    1. Задайте псевдоним области сетки, grid-area: , который удобен для справки при указании области, где находится блок. В предыдущем простом примере grid-area используется для указания того, какие линии сетки находятся сверху, снизу, слева и справа от области сетки.Таким образом, grid-area может не только указывать размер и положение области сетки, но и задавать псевдоним области.
       grid-area: main;
     grid-row-start: main;
     grid-column-start: main;
     grid-row-end: main;
     grid-column-end: main;
    2. grid-template-areas: "- - -" "- - -" "- - -"; Макет сетки можно указать очень интуитивно. Его значение представляет собой массив строк, разделенных пробелами, каждая строка представляет строку. Внутри каждой строки находится список ячеек сетки, разделенных пробелами, а область сетки записывается несколько раз в нескольких столбцах. Например, в примере верхний и нижний колонтитулы написаны три раза, и все они занимают всю ширину области.

  2. Установить высоту и ширину ячейки

    В CSS3 есть новая единица измерения, fr, которая появляется в строке значений для пропорционального распределения оставшегося пространства в определенном направлении. При установке высоты строки она пишется отдельными строками для наглядности.

  3. Установите нижний колонтитул с фиксированным положением

  4. Отзывчивый макет с использованием медиа-запросов. Сбросить макет и высоту строки

grid-container

1. grid-template-columns | grid-template-rows

grid-template-columns: <track list>,Определить количество строк, столбцов, размер сетки сетки.

Форм много, самые распространенные из них следующие:

grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;    // 定义网格线名字
grid-template-columns: [linename1] 100px [linename2 linename3]; // 一条网格线多个名字
grid-template-columns: minmax(100px, 1fr);  // 最小100px, 最大满屏
grid-template-columns: fit-content(40%);    // 指定最大值不超过屏宽40%
grid-template-columns: repeat(3, 200px);    // 三列200px
// 给网格线指定名字
.box {
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

2. grid-template-areas

Определите область сетки и используйте имя области сетки, объявленное вызовом grid-area, для размещения соответствующего элемента сетки. Определите явную область сетки.

3. сетка-ряд-разрыв, сетка-столбец-разрыв

Определяет расстояние между сетками (исключая расстояние между элементом сетки и краем контейнера)

4. justify-items: start | end | center | stretch (по умолчанию);

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

1bc096d4ee73927e.png
1bc096d4ee73927e.png

35fecd4fbf754a84.png
35fecd4fbf754a84.png

9a2b4b82c9b6a65b.png
9a2b4b82c9b6a65b.png

85e7fb64351898e4.png
85e7fb64351898e4.png

5. align-items: start | end | center | stretch (по умолчанию);

Определяет вертикальное выравнивание содержимого дочерних элементов сетки, аналогично элементам выравнивания flex-контейнера.

7a410b6d17acd72e.png
7a410b6d17acd72e.png

20f8f733235797ea.png
20f8f733235797ea.png

9e1f32b77d573d04.png
9e1f32b77d573d04.png
85e7fb64351898e4.png
85e7fb64351898e4.png

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

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

  1. пространство вокруг: расстояние между началом и концом составляет половину расстояния сетки
  2. space-between: Пространство между началом и концом равно нулю

  3. пространственно-равномерно: расстояние между началом и концом равно шагу сетки




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

По вертикали к направлению выравнивания justify-content, указывающего выравнивание сетки и горизонтальной оси.

e14e12bdfbf2e3e4.png
e14e12bdfbf2e3e4.png

8006fb09977ce5c8.png
8006fb09977ce5c8.png

61ffebd9e0da3f0b.png
61ffebd9e0da3f0b.png
28e49f66a9c4455a.png
28e49f66a9c4455a.png

b9bfc04642c818d7.png
b9bfc04642c818d7.png

f1845a4b578d8191.png
f1845a4b578d8191.png

f06633de75642a36.png
f06633de75642a36.png

8. сетка-авто-столбцы, сетка-авто-строки, сетка-авто-поток

grid-auto-columns | grid-auto-rows используется для создания элемента сетки неявного размещения сетки, когда ячеек сетки недостаточно. посмотри на одинпример

Мы определяем только грид-контейнер 1×1, в него помещается box1, а как насчет остальных трех? протекать. box2 отображается в правой части экрана после того, как box1, box3 и box4 отображаются внизу, а высота — это только высота содержимого.

указанныйgrid-auto-columns： 200px; grid-auto-rows: 200px;, что эквивалентно созданию большего количества неявных ячеек сетки размером 200*200 по горизонтали и вертикали в контейнере для хранения возможных дополнительных элементов.

С ним связано еще одно свойство: grid-auto-flow.Когда мы не устанавливаем это свойство, лишние элементы также располагаются в порядке слева направо и сверху вниз.Это свойство управляет алгоритмом автоматической компоновки.

grid-auto-flow: row | column | row dense | column dense;

  1. row является значением по умолчанию, что означает, что алгоритм Auto Layout заполняет каждую строку по очереди, добавляя новые строки только при необходимости.
  2. столбец означает, что алгоритм Auto Layout заполняет каждый столбец по очереди, добавляя новые строки только при необходимости.
  3. Плотное представление сообщает алгоритму автоматической компоновки, чтобы он пытался заполнить дыры в сетке, если появляются меньшие дочерние элементы. (Не рекомендуется, может загромождать макет)

grid-item

1. grid-column-start | grid-column-end | grid-row-start | grid-row-end

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

f0988aebf7ce8786.png
f0988aebf7ce8786.png

Если grid-column-end/grid-row-end не задан явно, дочерние элементы сетки по умолчанию охватывают одну ячейку сетки. Кроме того, дочерние элементы сетки могут перекрывать друг друга, а порядок их размещения можно контролировать с помощью z-index.

Есть некоторые элементы, которые мы хотим охватить всю область просмотра, например, верхний и нижний колонтитулы, а для маленьких экранов — двухколоночный макет:

.header, .footer {
  grid-column: 1 / 3;
}

К сожалению, когда мы переключаемся на большой экран, ряд из 12 столбцов, эти элементы будут заполнять только первые два столбца, а не 12 столбцов, нам нужно определить новый конец столбца сетки и установить значение равное 13. Этот способ более хлопотный, и есть простой способ, grid-column:1/-1;, так что независимо от размера экрана они будут занимать всю строку. Как следующее:

.header, .footer {
  grid-column: 1 / -1;
}

2. grid-area

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

3. justify-self: start | end | center | stretch Выравнивание содержимого ячейки сетки в горизонтальном направлении. с оправданием себя во flex.

c096a95f6300d932.png
c096a95f6300d932.png

bb01f2f4ea312d78.png
bb01f2f4ea312d78.png

3ca2ef564834e834.png
3ca2ef564834e834.png

caddebe3320088bf.png
caddebe3320088bf.png

4. align-self: start | end | center | stretch Вертикальное выравнивание содержимого ячейки сетки. Подобно align-self во flex.

1f1b1806e925fe2b.png
1f1b1806e925fe2b.png

grid-align-self-end.png
grid-align-self-end.png

0ad87bbf53ecc6a3.png
0ad87bbf53ecc6a3.png

caddebe3320088bf.png
caddebe3320088bf.png

Функции, предоставляемые сеткой

1. repeat()

Repeat() обеспечивает компактное объявление. Если строк и столбцов слишком много, а распределение регулярное, мы можем использовать функции для упорядочивания линий сетки.

grid-template-columns: repeat(3, 20px [col-start]) 5%;
// 等价于
grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

2. minmax()

Minmax () эквивалентен уточнением минимума к наибольшему интервалу для линии сетки. Если MIN> MAX, этот интервал недействителен, показывает мин.

3. fit-content()

fit-content() эквивалентен min('max-content', max('auto', arguments));

Еще одна проблема с гибкой версткой

Еще одна проблема с макетами flex-layout заключается в том, что когда на страницу нарисовано много контента, или контент меняется, страница работает нестабильно, когда 2g или загрузка сети нестабильна.Flexbox vs Grid page layout. Контент загружается с сервера в потоке, пользователь может видеть контент до полной загрузки страницы, но в случае гибкой верстки верстка будет перестроена. Именно потому, что flex сам по себе является гибким макетом. Но сетка не полностью свободна от проблемы перестановки макета — есть предпосылки:

必须让你的网格划分是可以预先确定的，比如是根据视窗宽高确定的。如果是根据内容而定，那么也是会崩坏的。

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

.container {
    display: grid;
    grid-template-columns:
    (foo)   max-content,
    (bar)   min-content,
    (hello) auto;
}

aside {
    grid-column: 4;
}

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

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

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

Ссылаться на

Don't use flexbox for overall page layout

(Перевод) Примечания к изучению CSS Grid Layout

Краткое введение в CSS Grid Layout

CSS Grid Layout

Примите будущее CSS-макета: flex и grid-макет

A Complete Guide to CSS Grid Layout

Категории