Самый мощный макет CSS — макет сетки

Что такое макет сетки?

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

Макет сетки и планировка Flex

Когда дело доходит до макета, мы будем думать оflexмакет, некоторые люди даже думают, что естьflexМакет, похоже, разбираться не надоGridмакет. ноflexмакет иGridВ компоновке есть существенная разница, т.flexМакет представляет собой одномерный макет,GridМакет представляет собой двухмерный макет.flexМакет может обрабатывать макет элементов только в одном измерении за раз, либо в строке, либо в столбце.GridМакет состоит в том, чтобы разделить контейнер на «строки» и «столбцы», в результате чего появляются сетки одна за другой. Мы можем размещать элементы сетки в позициях, связанных с этими строками и столбцами, чтобы достичь цели нашего макета.

Gridмакет намного лучше, чемflexСхема мощная!

Пример гибкого макета:

Пример макета сетки:

Некоторые основные концепции Grid

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

<div class="wrapper">
  <div class="one item">One</div>
  <div class="two item">Two</div>
  <div class="three item">Three</div>
  <div class="four item">Four</div>
  <div class="five item">Five</div>
  <div class="six item">Six</div>
</div>

.wrapper {
  margin: 60px;
  /* 声明一个容器 */
  display: grid;
  /*  声明列的宽度  */
  grid-template-columns: repeat(3, 200px);
  /*  声明行间距和列间距  */
  grid-gap: 20px;
  /*  声明行的高度  */
  grid-template-rows: 100px 200px;
}
.one {
  background: #19CAAD;
}
.two { 
  background: #8CC7B5;
}
.three {
  background: #D1BA74;
}
.four {
  background: #BEE7E9;
}
.five {
  background: #E6CEAC;
}
.six {
  background: #ECAD9E;
}
.item {
  text-align: center;
  font-size: 200%;
  color: #fff;
}

Контейнеры и предметы: объявляем на элементеdisplay：gridилиdisplay：inline-gridдля создания контейнера сетки. Как только мы это сделаем, все непосредственные дочерние элементы этого элемента станут элементами сетки. как выше.wrapperТам, где элемент - это сетчатый контейнер, его немедленные дочерние элементы станут проектом сетки.

Трек сетки:grid-template-columnsа такжеgrid-template-rowsсвойства для определения строк и столбцов в сетке. Горизонтальные области внутри контейнера называются строками, а вертикальные области — столбцами. На фото вышеOne,Two,Threeсформировать линию,One,Fourэто колонна

Ячейка сетки. Ячейка сетки — это наименьшая единица элемента сетки, концептуально аналогичная ячейке таблицы. На фото вышеOne,Two,Three,Four...все ячейки сетки одна за другой

Линии сетки: линии, которые делят сетку, называемые «линиями сетки». Следует отметить, что когда мы определяем сетку, мы определяем дорожки сетки, а не линии сетки. Grid создаст для нас пронумерованные линии сетки, чтобы мы могли расположить каждый элемент сетки. m столбцов имеют m + 1 вертикальную линию сетки, n строк имеют n + 1 горизонтальную линию сетки. Например, в приведенном выше примере есть 4 вертикальные линии сетки. Вообще говоря, числа сортируются слева направо, сверху вниз, 1, 2 и 3. Конечно, его также можно отсортировать справа налево, снизу вверх, в порядке -1, -2, -3...

Введение в свойства контейнера

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

GridСвойства макета можно разделить на две категории: свойства контейнера и свойства элементов. Давайте сначала посмотрим на свойства контейнера

отображать свойство

показать демонстрацию свойства

Мы делаем это, объявляя элементdisplay：gridилиdisplay：inline-gridдля создания контейнера сетки. утверждениеdisplay：gridтогда контейнер является элементом блочного уровня, установленным вdisplay: inline-gridэлемент контейнера является встроенным элементом

.wrapper {
  display: grid;
}

.wrapper-1 {
  display: inline-grid;
}

Свойство grid-template-columns и свойство grid-template-rows

Демонстрационный адрес свойства grid-template-columns и grid-template-rows

grid-template-columnsсвойство устанавливает ширину столбца,grid-template-rowsСвойство устанавливает высоту строки, эти два свойства находятся вGridВ раскладке это особенно важно.Значения у них разные, а настройки относительно схожи.Следующее дляgrid-template-columnsсвойства объяснить

Фиксированная ширина столбца и высота строки

.wrapper {
  display: grid;
  /*  声明了三列，宽度分别为 200px 100px 200px */
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  /*  声明了两行，行高分别为 50px 50px  */
  grid-template-rows: 50px 50px;
}

Вышеприведенное означает, что фиксированная ширина столбца составляет 200 пикселей 100 пикселей 200 пикселей, а высота строки — 50 пикселей 50 пикселей.

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

.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  /*  2行，而且行高都为 50px  */
  grid-template-rows: repeat(2, 50px);
}

ключевое слово автозаполнения: Указывает на автоматическое заполнение, чтобы строка (или столбец) могла вместить как можно больше ячеек.grid-template-columns: repeat(auto-fill, 200px)Указывает, что ширина столбца составляет 200 пикселей, но количество столбцов не фиксировано. Пока браузер может его разместить, элементы можно размещать. Код и эффект показаны на следующем рисунке:

.wrapper-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

фр ключевое слово:GridМакеты также вводят дополнительную единицу длины, чтобы помочь нам создавать гибкие треки сетки.frЕдиницы представляют часть пространства, доступного в контейнере сетки.grid-template-columns: 200px 1fr 2frЭто означает, что ширина первого столбца установлена ​​в 200 пикселей, а оставшаяся ширина разделена на две части, ширина составляет 1/3 и 2/3 оставшейся ширины соответственно. Код и эффект показаны на следующем рисунке:

.wrapper-3 {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

функция минмакс(): иногда мы хотим задать элементам сетки минимальный и максимальный размер,minmax()Функция выдает диапазон длин, в пределах которых длины могут быть применены к элементам сетки. Он принимает два параметра, минимальное и максимальное значения.grid-template-columns: 1fr 1fr minmax(300px, 2fr)Это означает, что ширина третьего столбца составляет не менее 300 пикселей, но максимальное значение не может превышать удвоенную ширину первого и второго столбцов. Код и эффект следующие:

.wrapper-4 {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(300px, 2fr);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

автоматическое ключевое слово: Длина определяется браузером. пройти черезautoключевое слово, мы можем легко реализовать макет с тремя или двумя столбцами.grid-template-columns: 100px auto 100pxУказывает, что первый и третий столбцы имеют размер 100 пикселей, а браузер определяет длину посередине. Код и эффект следующие:

.wrapper-5 {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

свойство grid-row-gap, свойство grid-column-gap и свойство grid-gap

Свойство grid-row-gap, свойство grid-column-gap и демонстрационный адрес свойства grid-gap

grid-row-gapАтрибуты,grid-column-gapСвойства задают интервалы между строками и между столбцами соответственно.grid-gapАтрибут является сокращенной формой обоих.

grid-row-gap: 10pxУказывает, что межстрочный интервал составляет 10 пикселей,grid-column-gap: 20pxУказывает, что интервал между столбцами составляет 20 пикселей.grid-gap: 10px 20pxДостигнутый эффект тот же

.wrapper {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-auto-rows: 50px;
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}

Приведенные выше два варианта написания имеют одинаковый эффект.

Свойство grid-template-areas

демонстрационный адрес grid-area и grid-template-areas

grid-template-areasАтрибуты используются для определения регионов, регион состоит из одной или нескольких ячеек

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

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px  120px  120px;
  grid-template-areas:
    ". header  header"
    "sidebar content content";
  background-color: #fff;
  color: #444;
}

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

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

Приведенный выше код указывает, что класс.sidebar .content .headerэлемент, на котором он расположен сверхуgrid-template-areasопределено вsidebar content headerв области

свойство grid-auto-flow

демонстрационный адрес свойства grid-auto-flow

grid-auto-flowСвойства управляют работой алгоритма Auto Layout, точно определяя, как автоматически размещаемые элементы располагаются в сетке. Порядок размещения по умолчанию «сначала строка, затем столбец», то есть сначала заполните первую строку, а затем начните размещать вторую строку, то есть порядок английских чисел на следующем рисунке.one,two,three.... Этот приказ отданgrid-auto-flowрешение атрибута, значение по умолчаниюrow.

.wrapper {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

Внимательные учащиеся могли обнаружить проблему, а именно между пятым и шестым элементами имеется зазор (как показано на рисунке ниже), поскольку длина шестого блока больше длины пустого места. , и сжимается в самый низ, вызванный одной строкой. В практических приложениях мы можем захотеть заполнить пробел соответствующей длины ниже.На данный момент мы можем установитьgrid-auto-flow: row dense, указывая на то, что форма заполнена максимально. Код и эффект следующие:

.wrapper-2 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row dense;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

можно установитьgrid-auto-flow: column, что означает сначала столбец, а затем строку, код и эффект показаны на следующем рисунке:

.wrapper-1 {
  display: grid;
  grid-auto-columns: 100px;
  grid-auto-flow: column;
  grid-gap: 5px;
  grid-template-rows:  50px 50px;
}

свойство justify-items, свойство align-items и свойство place-items

свойство justify-items, демонстрационный адрес свойства align-items

justify-itemsСвойство задает горизонтальное положение содержимого ячейки (слева и справа),align-itemsСвойство задает положение ячейки по вертикали (сверху, посередине, снизу)

Ниже в качестве примера для объяснения используется свойство justify-items.Свойство align-items такое же, но направление вертикальное. Все они обладают следующими свойствами:

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

Его кодовая реализация и эффект следующие:

.wrapper, .wrapper-1, .wrapper-2, .wrapper-3 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  justify-items: start;
}
.wrapper-1 {
  justify-items: end;
}
.wrapper-2 {
  justify-items: center;
}
.wrapper-3 {
  justify-items: stretch;
}

• start: выравнивает начальный край ячейки

• end: Выровнять конечный край ячейки

• Центр: Центр клетки внутри

• растянуть: растянуть, занять всю ширину ячейки (по умолчанию)

свойство justify-content, свойство align-content и свойство place-content

свойство justify-content, демонстрационный адрес свойства align-content

justify-contentАтрибут представляет собой горизонтальное положение (слева, посередине, справа) всей области содержимого внутри контейнера,align-contentСвойство представляет собой вертикальное положение (сверху, посередине, снизу) всей области содержимого. Все они имеют следующие значения свойств.

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

Ниже сjustify-contentсвойства в качестве примера для объяснения,align-contentСвойства те же, но направление вертикальное

• start - начальная граница выровненного контейнера
• end - конечная граница выровненного контейнера
• center - Центрировать внутреннюю часть контейнера

.wrapper, .wrapper-1, .wrapper-2, .wrapper-3, .wrapper-4, .wrapper-5, .wrapper-6 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  justify-content: start;
}
.wrapper-1 {
  justify-content: end;
}
.wrapper-2 {
  justify-content: center;
}

• space-round - равный интервал с обеих сторон каждого элемента. Таким образом, расстояние между элементами в два раза больше, чем расстояние между элементами и границей контейнера.
• space-between - равное расстояние между элементами, без пробелов между элементами и границами контейнера
• space-evenly — элементы располагаются на одинаковом расстоянии от элемента к элементу, а пространство между элементами и границами контейнера имеет одинаковую длину.
• растянуть - если размер элемента не указан, растянуть, чтобы занять весь контейнер сетки

.wrapper-3 {
  justify-content: space-around;
}
.wrapper-4 {
  justify-content: space-between;
}
.wrapper-5 {
  justify-content: space-evenly;
}
.wrapper-6 {
  justify-content: stretch;
}

свойство grid-auto-columns и свойство grid-auto-rows

Свойство Grid-auto-columns и демонстрационный адрес свойства grid-auto-rows

говорящийgrid-auto-columnsсвойства иgrid-auto-rowsПрежде чем перейти к свойствам, давайте рассмотрим концепции неявных и явных сеток.

Неявные и явные сетки: явная сетка содержитgrid-template-columnsа такжеgrid-template-rowsСтроки и столбцы, определенные в свойствах. Если вы помещаете что-то за пределы определения сетки или вам нужно больше дорожек сетки из-за количества контента, сетка создаст строки и столбцы в неявной сетке.

Если есть лишняя сетка (т. е. упомянутая выше неявная сетка), то ее высоту строки и ширину столбца можно определить по формулеgrid-auto-columnsсвойства иgrid-auto-rowsнастройки свойств. их письменность иgrid-template-columnsа такжеgrid-template-rowsТочно так же. Если не указывать эти атрибуты, браузер полностью определяет содержимое ячейки в соответствии с размером новой сетки, определяет ширину столбца и высоту строки.

.wrapper {
  display: grid;
  grid-template-columns: 200px 100px;
/*  只设置了两行，但实际的数量会超出两行，超出的行高会以 grid-auto-rows 算 */
  grid-template-rows: 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

grid-template-columnsсвойства иgrid-template-rowsСвойство просто указывает две строки и два столбца, но на самом деле элементов девять, что приводит к неявной сетке. пройти черезgrid-auto-rowsДля неявной сетки можно указать высоту строки 50 пикселей.

Введение в свойства проекта

свойство grid-column-start, свойство grid-column-end, свойство grid-row-start и свойство grid-row-end

демонстрационный адрес

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

• свойство grid-column-start: вертикальная линия сетки, где расположена левая граница
• свойство grid-column-end: вертикальная линия сетки, где расположена правая граница
• свойство grid-row-start: горизонтальная линия сетки, где расположена верхняя граница
• свойство grid-row-end: горизонтальная линия сетки, где расположена нижняя граница

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column-start: 1;
  grid-column-end: 2;
  background: #19CAAD;
}
.two { 
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  /*   如果有重叠，就使用 z-index */
  z-index: 1;
  background: #8CC7B5;
}
.three {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
  background: #D1BA74;
}
.four {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #BEE7E9;
}
.five {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #E6CEAC;
}
.six {
  grid-column: 3;
  grid-row: 4;
  background: #ECAD9E;
}

В приведенном выше коде класс.twoТам, где расположен элемент сетки, вертикальные линии сетки имеют номера от 2 до 4, а горизонтальные линии сетки — от 1 до 2. из чего следует.three(вертикальные линии сетки от 3 до 4, горизонтальные линии сетки от 1 до 4) конфликтуют. можно установитьz-indexопределить их иерархическую взаимосвязь

свойство области сетки

grid-areaАтрибут указывает, в какой области находится элемент, как описано выше.grid-template-areasЭто было упомянуто, когда я упоминал об этом, и это не будет здесь расширяться.Для конкретного использования, пожалуйста, обратитесь к демонстрационному адресу:

Демонстрационный адрес свойств grid-area и grid-template-areas

свойство justify-self, свойство align-self и свойство place-self

атрибут justify-self / атрибут align-self / демонстрационный адрес атрибута place-self

justify-selfСвойство задает горизонтальное положение содержимого ячейки (слева, по центру, справа), за которым следуетjustify-itemsСвойства используются точно так же, но только на одном элементе

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

Они очень похожи, вот только возьмитеjustify-selfдемонстрация недвижимости,align-selfСвойства одинаковы, но только в вертикальном направлении.place-selfНастраиватьalign-selfа такжеjustify-selfСокращенная форма , и здесь повторяться не будет.

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

.item {
  justify-self: start;
}
.item-1 {
  justify-self: end;
}
.item-2 {
  justify-self: center;
}
.item-3 {
  justify-self: stretch;
}

• start: выравнивает начальный край ячейки

• end: Выровнять конечный край ячейки

• center: Центрировать ячейку внутри

  

• растянуть: растянуть, занять всю ширину ячейки (по умолчанию)

  

Сетевой бой — реализация адаптивного макета

После приведенного выше введения, я думаю, каждый может увидеть, что Grid очень мощен. Некоторые общие макеты CSS, такие как центрирование, макет с двумя столбцами, макет с тремя столбцами и т. Д., Легко реализовать. Давайте посмотрим, как макет Grid реализует адаптивный макет.

fr реализует отзывчивость с равным делением

fr реализует отзывчивость с равным делением

frБлок Divide, который может разделить доступное пространство контейнера на любое количество равных частей. Используя эту функцию, мы можем легко реализовать разделенный ответ.grid-template-columns: 1fr 1fr 1frУказывает, что контейнер разделен на трети

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

Repeat + auto-fit - фиксированная ширина столбца, изменение количества столбцов

Компоновка равных частей — это не толькоGridтолько макет, напримерflexМакет также может быть легко реализован, давайте взглянем на более продвинутый адаптивный

В приведенном выше примере всегда три столбца, но требования часто требуют, чтобы наша сетка могла фиксировать ширину столбца и изменять количество столбцов в соответствии с шириной контейнера. В настоящее время мы можем использовать вышеупомянутыйrepeat()функция иauto-fitключевые слова.grid-template-columns: repeat(auto-fit, 200px)Указывает, что фиксированная ширина столбца составляет 200 пикселей, а число является адаптивным. Пока оно может поместиться, оно будет расположено вверх. Код и эффект следующие:

демонстрационный адрес

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

Повторите + автоматически Fit + Minmax Снимите правый пустой

В показанном выше эффекте правая сторона обычно остается пустой, чего мы не хотим видеть. Было бы неплохо, если бы ширина столбцов тоже могла быть адаптивной в определенном диапазоне.minmax()В этом нам помогают функции. Будуgrid-template-columns: repeat(auto-fit, 200px)изменить наgrid-template-columns: repeat(auto-fit, minmax(200px, 1fr))Указывает, что ширина столбца составляет не менее 200 пикселей, и если есть место, разделите их поровну. Код и эффект следующие:

демонстрационный адрес

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

Repeat+auto-fit+minmax-span-dense решает проблему вакансий

Вроде бы все идет хорошо, но когда-нибудь UI может быть не одинаковой длины для каждого элемента сетки, что тоже просто, поspanключевое слово, чтобы установить диапазон элементов сетки,grid-column-start: span 3, указывая, что этот элемент сетки охватывает 3. Конкретный код и эффект следующие:

.item-3 {
  grid-column-start: span 3;
}

демонстрационный адрес

Нет, а почему справа пустое место? Оказывается, часть длины слишком длинная, чтобы влезть, на этот раз она будет наша.denseПоявляется ключевое слово.grid-auto-flow: row denseЭто означает заполнить как можно больше, не оставляя пробелов Код и эффект следующие:

.wrapper, .wrapper-1 {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

.wrapper-1 {
  grid-auto-flow: row dense;
}

Совместимость с сеткой

Наконец, поговоримGridПроблемы совместимости макетов, вcaniuse, результаты мы видим следующие, в целом совместимость неплохая, но не поддерживается под IE 10. Лично я без проблем использую внутреннюю систему компании, но TOC может не подойти в настоящее время.

Ссылаться на

Распространенные варианты использования макета сетки

Учебное пособие по компоновке сетки CSS Grid

Проект макета сетки

Адаптивный макет с одной строкой CSS — Адаптивный макет с сеткой

MDN

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