Css grid руководство: Полное руководство по CSS Grid

Что такое единица гибкости fr в CSS, доступным и простым языком | by Stas Bagretsov

Это статья — адаптированный перевод статьи The CSS Fractional Unit (Fr) In Approachable, plain Language

👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️

Первым делом я хочу определиться с терминологией в этой статье и последующих. Самый верный перевод fractional unit в контексте Grid разработки и применения fr в ней же, это единица гибкости. Почему? Это вы поймете прочитав статью.

Сама по себе fr это новая форма единицы измерения, в основном ассоциируемая с CSS Grid.

Давайте на чуток притворимся, что мы забыли про CSS Grid единицы гибкости. Ок? Отлично.

И так, представьте что у нас выходные и у нас есть большой, сочный и пористый торт.

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

Отличная работа!

Но когда вы уже было подумали, что сделали свою работу, приходит ещё один сосед и настаивает на том, чтобы ему тоже дали равную порцию пирога. Реально? Что тогда делать? Собрать все разделенные пироги и волшебным образом связать их снова вместе, чтобы сделать снова равную нарезку?

Я бы не стал этого делать.

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

Обратите внимание на разметку ниже:

<section><div></div><div></div><div></div><div></div><div></div></section>

У нас есть контейнер <section> который хранит в себе 5 <div>

Чтобы разделить 100% ширину равномерно и раздать каждому <div> равную ширину, вам нужно указать для каждого индивидуальную ширину в 20%. Почему?

Потому что у нас пять <div>. 100% разделить на 5 получается 20%.

Но когда вы уже было подумали, что сделали свою работу, приходит ещё один сосед и настаивает на том, чтобы ему тоже дали равную порцию пирога.

Если добавится еще один <div>, то вам придется пересчитывать всё и указывать заново ширину! 100% разделить на 6, ну дальше сами считайте.

И именно это та проблема, которую решает fr — единица гибкости.

С единицей гибкости (fr) вам не нужно что-то больше пересчитывать — вообще не нужно. На то она и единица гибкости, чтобы быть гибкой.

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

Вы не привязаны к целым значениям. Вы можете спокойно указывать такие значения как: 1.5fr 3fr 4.5fr В общем суть тут ясна.

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

В нашем случае, общая доля равна 1.5fr + 3fr + 4.5fr = 9fr

Если родительский контейнер имеет ширину 900px

Первое значение, 1.5fr будет иметь ширину из расчета 1.5fr/9fr * 900px. Что выдает в итоге 150px.

Второе значение, 3fr будет иметь ширину 3fr/9fr * 900px. Что выдаст нам в итоге 300px.

Третье значение, 4.5fr будет иметь ширину 4.5fr/9fr * 900px. Что выдаст в итоге 450px.

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

Основные понятия Grid Layout — CSS

CSS Grid Layout представляет двумерную сетку для CSS. Grid (здесь и далее подразумевается CSS Grid Layout ) можно использовать для размещения основных областей страницы или небольших элементов пользовательского интерфейса. В этой статье описывается компоновка сетки CSS и новая терминология, которая является частью спецификации CSS Grid Layout Level 1. Функции, показанные в этом обзоре, будут более подробно описаны в остальной части данного руководства.

Grid представляет собой пересекающийся набор горизонтальных и вертикальных линий — один набор определяет столбцы, а другой строки. Элементы могут быть помещены в сетку, соответственно строкам и столбцам.  Grid имеет следующие функции:

Фиксированные и гибкие размеры полос

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

Расположение элемента

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

Создание дополнительных полос для хранения контента

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

Управление выравниванием

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

Управление перекрывающимся контентом

В ячейку сетки может быть помещено более одного элемента, или области могут частично перекрывать друг друга. Затем это расслоение можно контролировать с помощью z-index.

Grid — это мощная спецификация и в сочетании с другими частями CSS, такими как flexbox, может помочь вам создать макеты, которые ранее невозможно было построить в CSS. Все начинается с создания сетки в вашем grid контейнере.

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

В этом примере есть div, содержащий класс wrapper с пятью потомками

<div>
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

Сделаем wrapper grid контейнером

.wrapper {
  display: grid;
}

Все прямые потомки теперь являются grid элементами. В веб-браузере вы не увидите никакой разницы в отображении элементов, поскольку Grid создал единую сетку столбцов для элементов. На данный момент вам может оказаться удобным работать в Firefox Developer Edition, в котором есть Grid Inspector, доступный как часть инструментов разработчика. Если вы просмотрите этот пример в Firefox и проверите Grid, вы увидите маленький значок рядом с display: grid. Нажмите этот значок, и сетка на этом элементе будет наложена в окне браузера.

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

Если мы хотим, чтобы это стало более похожим на сетку, нам нужно добавить полосы.

Мы определяем ряды и столбцы в нашей сетке при помощи свойств grid-template-columns и grid-template-rows

Можно дополнить пример выше, добавив свойство grid-template-columns  и  задав размеры полос колонок.

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

<div>
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Единица измерения fr

Размер треков (полос) может быть задан с помощью любой единицы длины. Спецификация также вводит дополнительную единицу длины, позволяющую создавать эластичные (flexible) грид-треки. Новая единица длины fr

<div>
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

В следующем примере мы создаём грид с треком в  2fr и двумя треками по  1fr. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части — два оставшихся. 

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

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

.wrapper {
  display: grid;
  grid-template-columns: 500px 1fr 2fr;
}

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

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

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

можно записать вот так:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Repeat-нотацию можно использовать как часть списка треков. В следующем примере создаётся грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.

.wrapper {
  display: grid;
  grid-template-columns: 20px repeat(6, 1fr) 20px;
}

Repeat-нотация в качестве аргумента принимает список треков, поэтому с её помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной 1fr следует трек шириной 2fr , и все это дело повторяется пять раз.

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr 2fr);
}

Явный и неявный грид

Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства grid-template-columns, в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью grid-template-columns и grid-template-rows. Если вы размещаете что-нибудь вне рамок определённого данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создаёт строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задаётся автоматически в зависимости от находящегося в них контента.

Вы также можете задать размер треков, создаваемых в виде неявного грида с помощью свойств grid-auto-rows (en-US) и grid-auto-columns (en-US).

В примере ниже мы задаём grid-auto-rows , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.

<div>
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

Масштабирование треков и 

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

Для подобных ситуаций в Grid  предусмотрено решение с помощью функции minmax(). В следующем примере  minmax() используется, как значение свойства grid-auto-rows (en-US). Автоматически создаваемые строки будут как минимум 100 пикселей в высоту, а как максимум примут значение auto. Использование auto означает, что размер строки посмотрит на размер контента и растянется таким образом, чтобы вместить самый высокий элемент ячейки в этой строке. 

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

<div>
   <div>One</div>
   <div>Two
   <p>I have some more content in.</p>
   <p>This makes me taller than 100 pixels.</p>
</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>
 

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

Линии нумеруются в соответствии с режимом написания (writing mode) документа. В языках с написанием слева-направо, линия 1 — самая левая линия в гриде. В языках с написанием справа-налево, линия 1 — самая правая линия в гриде. Линиям также можно давать имена, и — не переключайтесь, дальше мы узнаем, как это делать. 

Размещение элементов по линиям

В дальнейшем мы детально рассмотрим размещение элементов с помощью линий, а пока остановимся на простом способе. При размещении элемента мы ссылаемся именно на линию, а не на трек. 

В следующем примере мы размещаем первые два элемента в нашем гриде из трёх колоночных треков с помощью свойств grid-column-start (en-US), grid-column-end (en-US), grid-row-start и grid-row-end (en-US). Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 1, и занимает пространство до колоночной линии 4, которая в нашем случае — самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.

Второй элемент начинается с колоночной линии 1 и занимает один трек. Это поведение по умолчанию, поэтому не нужно задавать конечную линию. Элемент также занимает два строчных трека — со строчной линии 3 до строчной линии 5. Остальные элементы самостоятельно размещаются в пустых пространствах грида. 

 <div>
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px;
}
.box1 {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}
.box2 {
    grid-column-start: 1;
    grid-row-start: 3;
    grid-row-end: 5;
}

Не забывайте, что вы можете использовать Grid Inspector в Firefox Developer Tools, чтобы посмотреть, как элементы размещаются по линиям грида.

Грид-ячейка (grid cell) — наименьшая единица измерения грида, концептуально похожая на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определён для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке нашего заданного грида. На рисунке ниже первая ячейка грида выделена цветом.

Элементы могут занимать одну или несколько ячеек внутри строки или колонки, и подобное поведение создаёт грид-область (grid area). Грид-области должны быть перпендикулярными, — невозможно создать область, например, в форме буквы L. Выделенная цветом грид-область на рисунке ниже занимает два строчных трека и два колоночных. 

Зазоры (Gutters) или аллеи (alleys) между грид-ячейками можно создать с помощью свойств grid-column-gap (en-US) и grid-row-gap (en-US), или с помощью сокращённого свойства grid-gap (en-US). В примере ниже мы создаём зазор в 10 пикселей между колонками и в 1em между строками.

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-column-gap: 10px;
   grid-row-gap: 1em;
}

<div>
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

Любое пространство, которое занимают зазоры, добавляется в начало эластичных треков, задаваемых с помощью fr, поэтому зазоры используются для регулирования размеров и действуют как регулярные грид-треки, хотя что-то разместить в них нельзя. В терминах расположения элементов по грид-линиям (line-based positioning) зазоры ведут себя так, как если бы самой грид-линии была добавлена толщина.

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

<div>
   <div>
       <div>a</div>
       <div>b</div>
       <div>c</div>
    </div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
</div>

Если мы задаём для box1 значение display: grid , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.

.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
}

В данном случае вложенный грид не связан с родительским. Как вы можете видеть, он не наследует значение свойства grid-gap (en-US) родительского элемента и линии вложенного грида не выравниваются по линиям родительского грида.

Подгрид (Subgrid)

В спецификации гридов уровня 2 есть функциональность, называемая подгридом (subgrid) , которая позволит нам создавать вложенные гриды, использующие структуру треков родительского грида.

Примечание. Эта функция поставляется в браузере Firefox 71, который в настоящее время является единственным браузером для реализации subgrid.

В приведённом выше примере мы можем отредактировать вложенный грид, изменив grid-template-columns: repeat(3, 1fr), на grid-template-columns: subgrid. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.

.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   display: grid;
   grid-template-columns: subgrid;
}

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

<div>
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
}
.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
}
.box2 {
   grid-column-start: 1;
   grid-row-start: 2;
   grid-row-end: 4;
}

Элемент box2 теперь перекрывает box1, и отображается сверху, поскольку в исходном коде находится ниже.

Управление порядком отображения

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

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
}
.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   z-index: 2;
}
.box2 {
   grid-column-start: 1;
   grid-row-start: 2;
   grid-row-end: 4;
   z-index: 1;
}

CSS Grid: Пятиминутное руководство

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

Модуль CSS Grid получил поддержку множества современных браузеров (Safari, Chrome, Firefox) в этом году, так что всем фронтенд разработчикам так или иначе придется освоить эту технологию в брижайшем будущем.

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

Ваша первая сетка

Два главных ингридиента CSS Grid – это обертка (wrapper) и элементы, которые она содержит. Обертка – это и есть сетка, а элементы выполняют роль содержимого. Вот пример разметки wrapper’а с шестью элементами:

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Чтобы превратить наш div элемент в сетку нужно всего лишь отобразить его как grid.

Используем CSS свойство display: grid:

.wrapper {
    display: grid;
}

Но пока что ничего не происходит, потому что мы еще не определились с внешним видом нашей сетки. На данный момент этот код просто накладывает 6 div’ов друг на друга.

Колонки и ряды

Чтобы сделать сетку сеткой нам нужно определить колонки (columns) и ряды (rows). Давайте создадим три колонки и два ряда используя свойства grid-template-row и grid-template-column.

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

Введя три значения для grid-template-columns, мы получаем сетку, состоящую из трех колонок. Аналогично для grid-template-rows: 2 значения и две строки.

Значение определяет насколько широкими мы хотим сделать наши колонки (100px) и какой высоты будут наши ряды (50px). Вот результат:

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

.wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 100px 30px;
}

Теперь наша сетка выглядит так:

Расположение элементов

Теперь вам необходимо научиться располагать элементы внутри сетки. Здесь во всей красе предстает главная супер-сила CSS Grid – возможность легко и просто создавать разметку страниц.

Давайте создадим сетку 3х3, используя ту же разметку, что и ранее.

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

Вот что получилось:

Обратите внимание, что мы видим сетку 3х2 вместо 3х3. Это потому, что в нашей сетке всего 6 элементов, и если мы добавим еще 3 элемента, то третий ряд также заполнится.

Чтобы позиционировать и изменять размеры наших элементов мы используем grid-column и grid-row свойства:

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

Этот код делает так, чтобы item1 начинался в первой строке и первой колонке сетки и заканчивался в четвертой колонке. Иными словами, item1 теперь будет занимать весь ряд.

Наверное, вас немного сбивает с толку, почему у нас 4 разделения на колонки, но самих колонок всего 3? Взгляните на эту картинку:

Когда item1 занял весь первый ряд, он вытеснил остальные элементы вниз.

А вот таким образом можно записать этот синтаксис в упрощенном виде:

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

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

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}
.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}

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

Вот и все! Конечно же, в этом руководстве не рассмотрено еще огромное количество концептов CSS Grid, но мы вернемся к ним в следующих туториалах.

Перевод статьи Learn CSS Grid in 5 Minutes

Автор оригинального текста: Per Harald Borgen

Читайте также: 

Все про grid. Наиболее полное руководство по css grid.

Все про grid. Наиболее полное руководство по css grid.

Здравствуйте! В этой статье я хотел бы обобщить все те свойства grid  layout,  которые были рассмотрены в предыдущих уроках по верстки на  grid.  Система grid  позволяет задавать направление элементам на странице сразу в 2-х направлениях в отличие от того же Flexboxa где можно задавать только в одном направлении.

Терминология CSS Grid

Прежде чем мы  начнем разбираться со свойствами Grid layput давайте познакомимся с некоторыми терминами  верстки на гридах.

Контейнер сетки

Контейнер представляет из себя родительский элемент к которому применено свойство display: grid.  Например:

  <div>
    <div>Item1</div>
    <div>Item2</div>
    <div>Item3</div>
</div>

В примере в качестве контейнера используется div с классом container.

Элемент сетки

Каждый вложенный элемент в родительский является элементом сетки. Например:

  <div>
    <div>Item1</div>
    <div>Item2</div>
    <div>Item3</div>
</div>

В примере каждый div с классом item будет являться элементом сетки.

Линии сетки

Это разделительные  линии которые проведены между всеми элементами в сетке. Они могут быть как горизонтальные так и вертикальные.

Трек сетки

Представляет из себя некое пространство между двумя линиями сетки.

Ячейка грида или сетки

Это пространство между двумя соседними клетками в сетке.

Область сетки.

Эта область ограниченная  4-мя линиями в сетке грид.

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

Содержание

Свойства для контейнера

Свойства для  дочерних элементов

Свойства для родительского элемента сетки (контейнера).

display

Задает сетку для родительского элемента. Принимает следующие значения:

• grid — формирует сетку как грид
• inline-grid — делает инлайновую сетку на практике  это свойство редко применяется
• subgrid — используется в том случае если ваш элемент также является и вложенным элементом в другой сетки, то при задании этого свойства размеры будут взяты у родительского элемента а не буду определять собственный.

.cont {
  display: grid | inline-grid | subgrid;
}

И особенно хочется отметить, что  в гридах не будут работать свойства float, clear, vertical-align.

grid-template-columns grid-template-rows

Собственно задают строки и столбцы сетки, то есть определяют размер сетки.  Можно задавать как фиксированные значения в px, % так и  в относительных единицах, определяющих количество свободного пространства в сетки — fr. Также можно для удобства именовать линии сетки.

.container{
  grid-template-columns: 20px 40px auto 50px 40px;
  grid-template-rows: 35% 200px auto;
}

А вот пример с именованными линиями грид.

  .container {
  grid-template-columns: [first1] 20px [line2] 40px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start1] 25% [row1-end1] 100px [third-line] auto [last-line];
}

Да кстати повторяющиеся части вы всегда сможете заменить с помощью функции repeat().

  .container {
  grid-template-columns: repeat(3, 40px [col-start]) 5%;
}

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

.cont {
  grid-template-columns: 1fr 1fr 1fr;
}

grid-template-areas

Позволяет для вашего шаблона задать именованные области, которые описаны для дочерних элементов с помощью свойства grid-area.  Значения:

• name — имя области
• . — точка означает что ячейка пустая
• none — область не задана

  .container {
  grid-template-areas: 
    "name | . | none | ..."
    "...";
}

Пример:

.item-1 {
  grid-area: header;
}
.item-2 {
  grid-area: main;
}
.item-3 {
  grid-area: sidebar;
}
.item-4 {
  grid-area: footer;
}

.container {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

Пример создаст сетку из 4 колонок и 3 строк.  1-я строка будет состоять из области header, во 2-й строке будут 2 ячейки main, пустая ячейка и ячейка sidebar и 3-я строка будет полностью состоять из footer.

У каждой строки должно быть одинаковое количество ячеек.

grid-template

Представляет собой  сокращенное свойство от свойств grid-template-rows, grid-template-columns, grid-template-areas.   Значения:

• none  — установит все 3 свойства в их начальное значение
• subgrid — установит grid-template-rows и grid-template-columns в subgrid,  а grid-template-areas в начальное значение.
• grid-template-rows/grid-template-columns —  задает значения для строк и столбцов сетки грид соответственно

.container {
  grid-template:
    [row1-start] 35px "header header header" [row1-end]
    [row2-start] "footer footer footer" 35px [row2-end]
    / auto 50px auto;
}

grid-column-gap grid-row-gap

Задает отступы между элементами в сетке.  Значения:

• size — размер отступа для элементов.

.container {
  grid-template-columns: 200px 50px 100px;
  grid-template-rows: 60px auto 80px; 
  grid-column-gap: 20px;
  grid-row-gap: 10px;
}

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

grid-gap

Сокращенное свойство для grid-column-gap  и grid-row-gap.   Пример:

.container{
  grid-template-columns: 120px 100px 100px;
  grid-template-rows: 70px auto 70px; 
  grid-gap: 20px 10px;
}

Если не задать значение для grid-row-gap, то ему присваивается такое же значение как и для grid-column-gap.

justify-items

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

• start — выравнивает содержимое по левому краю
• end — выравнивает содержимое по правому краю
• center — выравнивает содержимое по середине
• stretch — растягивает элементы равномерно

Примеры:

.cont {
  justify-items: start;
}

.cont {
  justify-items: stretch;
}

align-items

Выравнивает содержимое элементов по оси столбцов или по вертикальной оси. Значения:

• start — выравнивает содержимое по верхнему краю
• end — выравнивает содержимое по нижнему краю
• center — выравнивает содержимое по середине
• stretch — растягивает элементы равномерно по высоте, таким образом они заполняют собой всю ячейку по высоте

Примеры:

.cont {
  align-items: start;
}

.cont {
  align-items: stretch;
}

justify-content

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

• start —  выравнивает сетку по левой стороне  контейнера
• end — выравнивает  сетку оп правой стороне контейнера
• center — выравнивает сетку по  центру контейнера
• stretch —  элементы заполняют всю ширину кониейнера
• space-around — задает одинаковые отступы между элементами и полуразмерные отступы по краям
• space-between — задает одинаковое расстояние между элементами без отступов по краям
• space-evenly — задает одинаковые отступы между элементами и полноразмерные отступы по краям

Примеры:

  .cont {
  justify-content: start;
}

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

align-content

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

• start —  выравнивает сетку по верхней стороне  контейнера
• end — выравнивает  сетку оп нижней стороне контейнера
• center — выравнивает сетку по  центру контейнера
• stretch —  элементы заполняют всю ширину кониейнера
• space-around — задает одинаковые отступы между элементами и полуразмерные отступы по краям
• space-between — задает одинаковое расстояние между элементами без отступов по краям
• space-evenly — задает одинаковые отступы между элементами и полноразмерные отступы по краям

Примеры:

.cont{
  align-content: start; 
}

.cont {
  align-content: space-evenly;  
}

grid-auto-columns  grid-auto-rows

Определяет размер созданных элементов, в том случае если они создаются не явно.  Значения:

• size — размер элементов в любой доступной едеинице измерения

Чтобы понять как работают эти свойства давайте рассмотрим сетку 2х2.

А теперь представте, что мы с помощью свойств grid-column и grid-row позиционируем элементы следующим образом:

.item-1 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-2 {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

То есть мы указываем элементу .item-2 чтобы он начинался на 5 линии и заканчивался на 6. Поскольку мы ссылаемся на несуществующие линии, то создаются так называемые неявные треки, чтобы заполнить собой  пространство. Вот для задания ширины этим трекам и используются свойства grid-auto-columns и grid-auto-rows.

.cont {
  grid-auto-columns: 80px;
}

grid-auto-flow

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

• row — строки заполняются поочередно. Новые строки  добавляются при необходимости
• column — столбцв заполняются поочередно. Новые столбцы добавляются в случае необходимости
• dense — пустые пространства в  сетке заполняются в случае появления более мелких элементов позже

Примеры:

Пусть есть такой HTML:

 
     <div>
    <div>item-a</div>
    <div>item-b</div>
    <div>item-c</div>
    <div>item-d</div>
    <div>item-e</div>
</div>

Определим для них сетку с 5 столбцами и 2 строками. Свойство grid-auto-flow установим в row.

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 20px 20px;
  grid-auto-flow: row;
}

И укажем размещения в сетке только для двух элементов.

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

В результате получим такую сетку

Если установить grid-auto-flow в значение column, то получим уже такую сетку.

 .container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 20px 20px;
  grid-auto-flow: column;
}

grid

Сокращенное свойство для всех вышеописанных свойств grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, и grid-auto-flow.  Это свойство также задает  grid-column-gap и grid-row-gap на их значения по умолчанию. Значения:

• none —  задает всем свойствам их значения по умолчанию
• grid-template-rows / grid-template-columns — задает  соотвественно значения для grid-template-rows и grid-template-columns.
• <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ]  — задает значения для свойств  grid-auto-flow, grid-auto-rows и grid-auto-columns соответственно.

Примеры:

.cont{
  grid: 200px auto / 1fr auto 1fr;
}

Свойства дочерних элементов

grid-column-start grid-column-end grid-row-start grid-row-end

Определяют  местоаоложение элемента в сетке grid-column-start/grid-row-start это линия с которой элемент будет начинаться, а grid-column-end/grid-row-end это линия на которой элемент будет заканчиваться.  Значения:

• line —  может быть любым числом, которое ссылается на прономерованную линию
• span число — элемент, который будет распространяться на  некоторое количество ячеек
• spаn имя — элемент будет распространяться до линии с указанным именем
• auto — задает автоматическое расположение элементов

Примеры:

.item-1 {
  grid-column-start: 1;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}

grid-column grid-row

Сокращенное свойство для grid-column-start + grid-column-end, и grid-row-start + grid-row-end.   Значения:

• start/end — значения где начинается элемент и где он заканчивается

Примеры:

.item-3 {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

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

grid-area

Задает название элементу, чтобы можно было на него сослаться с помощью свойства grid-template-areas. Значения:

• name — задает имя для элемента
• <row-start> / <column-start> / <row-end> / <column-end> — можно задавать нумерацию и название линий

Примеры:

.item-4 {
  grid-area: 1 / col4-start / last-line / 6
}

justify-self

Позволяет выравнивать содержимое элемента вдоль оси строки.  Применяется непосредственно к содержимому элемента.  Значения:

• start — выравнивает содержимое по левому краю
• end — выравнивает содержимое по правому краю
• center — выравнивает содержимое по середине
• stretch — растягивает элементы равномерно

Примеры:

  .item-1 {
  justify-self: start;
}

.item-1 {
  justify-self: stretch;
}

align-self

Позволяет выровнить элемент вдоль столбца. Выравнивается содержимое элемента. Значения

• start — выравнивает содержимое по верхнему краю
• end — выравнивает содержимое по нижнему краю
• center — выравнивает содержимое по середине
• stretch — растягивает элементы равномерно по высоте, таким образом они заполняют собой всю ячейку по высоте

Примеры:

.item-1 {
  align-self: start;
}

.item-1{
  align-self: stretch;
}

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

Также читайте

(Visited 31 times, 1 visits today)

Полное руководство по CSS Grid layout (иллюстрированное руководство по Grid)

CSS Grid layout — самая мощная система макетов в CSS. В отличие от системы одномерного макета flexbox, CSS Grid представляет собой систему двумерного макета, что означает, что он может обрабатывать столбцы и строки одновременно. Применяя правила CSSРодительский элемент(Стать сетчатым контейнером) и егоДочерний элемент(Стать элементами сетки), вы можете легко использовать макет сетки.

Если вы новичок в CSS Grid layout, то я настоятельно рекомендую вам сначала прочитать «Изучите макет CSS Grid за 5 минутArticle Эта статья — ваша самая простая запись. После того, как вы освоите основы CSS Grid, прочитайте это руководство, а затем прочитайтеКак использовать CSS Grid для быстрой и гибкой версткиПозвольте вам ощутить реальную силу и гибкость макета сетки.

Краткое введение

CSS Grid layout (также известный как «Grid») — это двумерная система макетов на основе сетки, целью которой является полное изменение макета нашего пользовательского интерфейса на основе сетки. CSS всегда использовался для размещения наших веб-страниц, но были проблемы, так или иначе. Сначала мы использовали таблицы, затем плавающие, затем позиционирующие и встроенные блоки, но все эти методы, по сути, просто хаки и пропускают много важных Особенности (например, вертикальное центрирование). Появление Flexbox значительно улучшило нашу разметку, но ее цель — решить более простую одномерную разметку, а не сложную двумерную разметку (фактически Flexbox и Grid могут работать вместе и хорошо работать вместе. Очень хорошо). Grid layout — это первый CSS-модуль, созданный специально для решения проблем с макетом, и нам, наконец, не нужно делать все, чтобы взломать стиль макета страницы.

Две главные вещи вдохновили меня на создание этого руководства. Первая — отличная книга Рэйчел ЭндрюПодготовьтесь к CSS сетке, Эта книга является подробным и понятным введением в CSS Grid и является основой этого руководства. Я настоятельно рекомендую вам купить и прочитать. Еще одно вдохновение приходит отFlexbox Полное руководство(Примечание: если у вас проблемы с чтением по-английски, вы можете пройтиCSS3 Руководство по визуализации свойств FlexboxЯ прихожу учиться, и это очень легко понять) Это также ресурс, на который я часто хожу, чтобы изучать flexbox. Эта статья помогла многим людям, по-видимому, потому что Google Flexbox занял первое место. Вы найдете много общего с моей статьей, почему бы не следовать за лучшим?

Цель данного руководства — представить концепцию Grid, которая существует в последней версии спецификации. Поэтому я не буду рассматривать устаревший синтаксис IE, и по мере развития спецификации я сделаю все возможное, чтобы обновить это руководство.

Основы и поддержка браузера

Во-первых, вы должны использоватьdisplay: gridОпределите элемент контейнера как макет сетки, используяgrid-template-columnsиgrid-template-rowsУстановите размер столбцов и строк, а затем передайтеgrid-columnиgrid-rowПоложите своих детей в эту сетку. Подобно flexbox, исходный порядок элементов сетки не имеет значения. Ваш CSS может размещать их в любом порядке, что позволяет очень легко переставить сетку с помощью медиа-запросов. Определяя макет всей страницы, а затем полностью перестраивая макет, чтобы он соответствовал разной ширине экрана, для этого требуется всего несколько строк CSS, и это интересно представить. Макет Grid — один из самых мощных CSS-модулей.

По состоянию на март 2017 года многие браузеры предоставляют встроенную поддержку CSS Grid без префиксов браузера: Chrome (включая Android), Firefox, Safari (включая iOS) и Opera. С другой стороны, Internet Explorer 10 и 11 поддерживают его, но это устаревшая реализация синтаксиса. Edge объявил о поддержке, но еще не пришел. (April Fools ‘Note: Edge 16 уже поддерживается при переводе этой статьи).

Этот браузер поддерживает данные изCaniuseВы можете просмотреть более подробную информацию. Номер указывает номер версии браузера, который поддерживает вышеуказанные функции.

Настольный браузер

Мобильный / планшетный браузер

За исключением Microsoft, поставщики браузеров, похоже, не имеют своего собственного набора реализаций Grid (таких как префиксы), пока спецификация не станет полностью зрелой. Это хорошо, потому что это означает, что нам не нужно беспокоиться об изучении нескольких грамматик.

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

Важный термин

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

Сетка Контейнер

приложениеdisplay: gridЭлементы. Это всеЭлемент сетки(Элементы сетки) Прямой родительский элемент. В этом примереcontainerЭтоСетка Контейнер。

HTML код:

1. <div>
2. <div></div>
3. <div></div>
4. <div></div>
5. </div>

Элемент сетки

Дочерние элементы (например, прямые дочерние элементы) контейнера Grid здесьitemЭлементом является элемент сетки, ноsub-itemНет.

HTML код:

1. <div>
2. <div></div>
3. <div>
4. <p></p>
5. </div>
6. <div></div>
7. </div>

Сетка Линия

Разделительные линии, составляющие структуру сетки. Они могут быть вертикальными («линии сетки столбцов») или горизонтальными («линии сетки столбцов») и могут располагаться с любой стороны строки или столбца. Например, желтая линия здесь является линией сетки столбца.

Сетка Трек

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

Сетка Ячейка

Пространство между линиями сетки двух соседних строк и двух соседних столбцов. Это «единица» грид-системы. На рисунке ниже показана ячейка сетки, образованная пересечением линий сетки первого-второго ряда и линий сетки второго-третьего столбца.

Площадь сетки

Общая площадь окружена 4 линиями сетки. Область сетки может состоять из любого количества клеток сетки. На рисунке ниже показана область сетки между линиями сетки строк 1 и 3 и линиями сетки столбцов 1 и 3.

Каталог свойств сетки

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

Свойство Grid Items

Свойства родительского элемента Grid Container

display

Определите элементы как сеточные контейнеры и создайте новый контент для их содержимого.Контекст формата сетки。

Значение:

• gridСоздать сетку на уровне блоков
• inline-grid： Создайте встроенную сетку
• subgridЕсли ваш контейнер сетки сам является элементом сетки другой сетки (то есть вложенной сетки), вы можете использовать это свойство для представления
  Вы хотите, чтобы размер строки / столбца наследовался от родительского контейнера сетки, а не указывался вами самостоятельно.

Если вы хотите установитьСетка контейнерСам элемент ужеЭлемент сетки(Вложенная сетка), используйте это свойство, чтобы указать внутреннюю часть этого контейнераЭлемент сеткиРазмеры строки и столбца напрямуюНаследованиеЕго родительСетка контейнерНедвижимость.

Код CSS:

1. .container {
2. display: grid | inline-grid | subgrid;
3. }

Примечание: использовать на сетке контейнераcolumn，float，clear， vertical-alignНет эффекта

Вернуться к содержанию

grid-template-columns / grid-template-rows

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

Значение:
— <track-size>: может быть значением длины, процентом или свободным пространством в контейнере равной сетки (используяfrUnit)
— <line-name>: любое имя, которое вы можете выбрать

Код CSS:

1. .container {
2. grid-template-columns: <track-size> … | <line-name> <track-size> …;
3. grid-template-rows: <track-size> … | <line-name> <track-size> …;
4. }

Пример:

Когда вы оставляете пробел между значениями дорожки сетки, линиям сетки автоматически присваиваются числовые имена:

Код CSS:

1. .container{
2. grid-template-columns: 40px 50px auto 50px 40px;
3. grid-template-rows: 25% 100px auto;
4. }

Но вы можете явно указать имя строки сетки, которое является значением <line-name>. Обратите внимание на синтаксис скобок для имен линий сетки:

Код CSS:

1. .container {
2. grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
3. grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
4. }

Обратите внимание, что линия сетки может иметь несколько имен. Например, линии сетки второй строки здесь будут иметь два имени: row1-end и row2-start:

Код CSS:

1. .container{
2. grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
3. }

Если ваше определение содержит несколько повторяющихся значений, вы можете использоватьrepeat()Обозначения для упрощения определения:

Код CSS:

1. .container {
2. grid-template-columns: repeat(3, 20px [col-start]) 5%;
3. }

Приведенный выше код эквивалентен:

Код CSS:

1. .container {
2. grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
3. }

frУстройство позволяет вам установить размер дорожки сетки с оставшимся свободным пространством контейнера сетки. Например, следующий код устанавливает каждый элемент сетки на одну треть ширины контейнера сетки:

Код CSS:

1. .container {
2. grid-template-columns: 1fr 1fr 1fr;
3. }

Оставшееся свободное пространство рассчитывается после удаления всех негибких элементов сетки. В этом примере, после вычитания 50px из общего доступного пространства,frСтоимость единицы делится на три равные части:

Код CSS:

1. .container {
2. grid-template-columns: 1fr 50px 1fr 1fr;
3. }

Вернуться к содержанию

grid-template-areas

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

Значение:

• <grid-area-name>: По элементу сеткиgrid-areaУказанное имя области сетки
• .(Точка): представляет пустую ячейку сетки
• none: Неопределенная область сетки

Код CSS:

1. .container {
2. grid-template-areas:
3. » | . | none | …»
4. «…»;
5. }

Пример:

Код CSS:

1. .item-a {
2. grid-area: header;
3. }
4. .item-b {
5. grid-area: main;
6. }
7. .item-c {
8. grid-area: sidebar;
9. }
10. .item-d {
11. grid-area: footer;
12. }
13. .container {
14. grid-template-columns: 50px 50px 50px 50px;
15. grid-template-rows: auto;
16. grid-template-areas:
17. «header header header header»
18. «main main . sidebar»
19. «footer footer footer footer»;
20. }

Приведенный выше код создаст сетку с 4 столбцами и 3 строками. Весь верхний ряд будет состоять изheaderРегиональный состав. Средний ряд будет состоять из двухmainRange, одна пустая ячейка, а другаяsidebarРегиональный состав. Последняя строка всеfooterРегиональный состав.

Каждая строка в вашей декларации должна иметь одинаковое количество ячеек.

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

Обратите внимание на васНеИспользуйте этот синтаксис для имен линий сетки, просто назовитеПлощадь сетки, Когда вы используете этот синтаксис, линии сетки на концах области фактически автоматически именуются. Если имя вашей области сеткиfoo, Имя линии сетки начального ряда и линии сетки начального столбца области будетfoo-startИ имя последней строки сетки и последней строки сетки столбцаfoo-end, Это означает, что некоторые линии сетки могут иметь несколько имен, например крайнюю левую линию сетки в приведенном выше примере, которая будет иметь три имени: header-start, main-start и footer-start

Вернуться к содержанию

grid-template

Используется для определенияgrid-template-rows ，grid-template-columns ，grid-template-areasАббревиатура (сокращение) атрибут.

Значение:

Код CSS:

1. .container {
2. grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
3. }

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

Код CSS:

1. .container {
2. grid-template:
3. [row1-start] «header header header» 25px [row1-end]
4. [row2-start] «footer footer footer» 25px [row2-end]
5. / auto 50px auto;
6. }

Эквивалентно:

Код CSS:

1. .container {
2. grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
3. grid-template-columns: auto 50px auto;
4. grid-template-areas:
5. «header header header»
6. «footer footer footer»;
7. }

Из-заgrid-templateНе будет сбрасыватьнеявныйАтрибуты сетки (grid-auto-columns， grid-auto-rowsИgrid-auto-flow），
Это, вероятно, то, что вы хотите сделать в большинстве случаев, рекомендуется использоватьgridАтрибуты вместоgrid-template。

Вернуться к содержанию

grid-column-gap / grid-row-gap

Укажите размер линий сетки. Вы можете думать об этом как об установке ширины пространства между столбцами / строками.

Значение:

• <размер строки>: значение длины

Код CSS:

1. .container {
2. grid-column-gap: <line-size>;
3. grid-row-gap: <line-size>;
4. }

Пример:

Код CSS:

1. .container {
2. grid-template-columns: 100px 50px 100px;
3. grid-template-rows: 80px auto 80px;
4. grid-column-gap: 10px;
5. grid-row-gap: 15px;
6. }

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

Вернуться к содержанию

grid-gap

grid-column-gapиgrid-row-gapСокращенный синтаксис

Значение:

• <grid-row-gap> <grid-column-gap>: значение длины

Код CSS:

1. .container {
2. grid-gap: <grid-row-gap> <grid-column-gap>;
3. }

Пример:

Код CSS:

1. .container{
2. grid-template-columns: 100px 50px 100px;
3. grid-template-rows: 80px auto 80px;
4. grid-gap: 10px 15px;
5. }

еслиgrid-row-gapЕсли он не определен, он будет установлен равнымgrid-column-gapЗначение. Например, следующий код эквивалентен:

Код CSS:

1. .container{
2. / * Установить [`grid-column-gap`] (http://www.css88.com/archives/8510#prop-grid-column-row-gap) и [` grid-row-gap`] (http: //www.css88.com/archives/8510#prop-grid-column-row-gap) * /
3. grid-column-gap: 10px;
4. grid-column-gap: 10px;
5. / * Эквивалентно * /
6. grid-gap: 10px 10px;
7. / * Эквивалентно * /
8. grid-gap: 10px;
9. }

Вернуться к содержанию

justify-items

Выровняйте содержимое элементов сетки вдоль оси строки (противоположное свойствоalign-items(Выровнено по оси столбцов). Это значение применяется ко всем элементам сетки внутри контейнера.

Значение:

• start: Выровнять содержимое слева от области сетки
• end: Выровнять содержимое справа от области сетки
• center: Выровнять содержимое по центру области сетки (горизонтальный центр)
• stretch: Заполнить ширину области сетки (по умолчанию)

Код CSS:

1. .container {
2. justify-items: start | end | center | stretch;
3. }

Пример:

Код CSS:

1. .container {
2. justify-items: start;
3. }

Код CSS:

1. .container{
2. justify-items: end;
3. }

Код CSS:

1. .container{
2. justify-items: center;
3. }

Код CSS:

1. .container{
2. justify-items: stretch;
3. }

Эти поведения также доступны через отдельные элементы сетки.justify-selfНастройки атрибутов.

Вернуться к содержанию

align-items

Выровнять по содержимому оси столбца в элементах сетки (противоположное свойствоjustify-items(Выровнено вдоль оси ряда). Это значение применяется ко всем элементам сетки внутри контейнера.

Значение:

• start: Выравнивание содержимого по верху области сетки
• end: Выровнять содержимое по нижней части области сетки
• center: Выравнивание содержимого по центру области сетки (по центру по вертикали)
• stretch: Заполнить высоту области сетки (по умолчанию)

Код CSS:

1. .container {
2. align-items: start | end | center | stretch;
3. }

Пример:

Код CSS:

1. .container {
2. align-items: start;
3. }

Код CSS:

1. .container {
2. align-items: end;
3. }

Код CSS:

1. .container {
2. align-items: center;
3. }

Код CSS:

1. .container {
2. align-items: stretch;
3. }

Эти поведения также доступны через отдельные элементы сетки.align-selfНастройки атрибутов.

Вернуться к содержанию

justify-content

Иногда ваш общий размер сетки может быть меньше размера ее контейнера. Если все ваши элементы сетки используют что-то вродеpxВы устанавливаете размер негибких единиц, как этот, в этом случае вы можете установить выравнивание сетки внутри контейнера сетки. Это свойство выравнивает сетку вдоль оси строки (противоположное свойствоalign-content(Выровняйте сетку вдоль оси столбца).

Значение:

• start: Выровняйте сетку слева от контейнера сетки
• end: Выровняйте сетку справа от контейнера сетки
• center: Выровняйте сетку по центру контейнера сетки (по центру по горизонтали)
• stretch: Отрегулируйте ширину элементов сетки, чтобы позволить сетке заполнить ширину всего контейнера сетки
• space-around: Поместите равномерное пространство между каждым элементом сетки и половиной пространства на левом и правом концах
• space-between: Поместите равномерное пространство между каждым элементом сетки, без пробелов слева и справа
• space-evenly: Поместите равномерное пространство между каждым элементом сетки и равномерное пространство на левом и правом концах

Код CSS:

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

Пример:

Код CSS:

1. .container {
2. justify-content: start;
3. }

Код CSS:

1. .container {
2. justify-content: end;
3. }

Код CSS:

1. .container {
2. justify-content: center;
3. }

Код CSS:

1. .container {
2. justify-content: stretch;
3. }

Код CSS:

1. .container {
2. justify-content: space-around;
3. }

Код CSS:

1. .container {
2. justify-content: space-between;
3. }

Код CSS:

1. .container {
2. justify-content: space-evenly;
3. }

Вернуться к содержанию

align-content

Иногда ваш общий размер сетки может быть меньше размера ее контейнера. Если все ваши элементы сетки используют что-то вродеpxРазмер такого негибкого блока задается, в этом случае вы можете установить выравнивание сетки внутри контейнера сетки. Это свойство выравнивает сетку по оси столбца (противоположное свойствоjustify-content(Выровняйте сетку вдоль оси ряда).

Значение:

• start: Выровнять сетку по верху контейнера сетки
• end: Выровнять сетку по низу контейнера
• center: Выровняйте сетку по центру контейнера сетки (вертикальный центр)
• stretch: Отрегулируйте высоту элементов сетки, чтобы позволить сетке заполнить высоту всего контейнера сетки
• space-around: Поместите равномерное пространство между каждым элементом сетки и половину пространства сверху и снизу
• space-between: Поместите равномерное пространство между каждым элементом сетки, без пробелов сверху и снизу
• space-evenly: Поместите равномерное пространство между каждым элементом сетки и равномерное пространство сверху и снизу

Код CSS:

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

Пример:

Код CSS:

1. .container {
2. align-content: start;
3. }

Код CSS:

1. .container {
2. align-content: end;
3. }

Код CSS:

1. .container {
2. align-content: center;
3. }

Код CSS:

1. .container {
2. align-content: stretch;
3. }

Код CSS:

1. .container {
2. align-content: space-around;
3. }

Код CSS:

1. .container {
2. align-content: space-between;
3. }

Код CSS:

1. .container {
2. align-content: space-evenly;
3. }

Вернуться к содержанию

grid-auto-columns / grid-auto-rows

Укажите размер любых автоматически генерируемых дорожек сетки (или неявных дорожек сетки). В строках или столбцах вы явно позиционируете (черезgrid-template-rows / grid-template-columnsКогда заданный диапазон сетки превышен, создается неявная дорожка сетки.

Значение:
— <track-size>: может быть значением длины, процентом или свободным пространством в контейнере равной сетки (используяfrUnit)

Код CSS:

1. .container {
2. grid-auto-columns: <track-size> …;
3. grid-auto-rows: <track-size> …;
4. }

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

Код CSS:

1. .container {
2. grid-template-columns: 60px 60px;
3. grid-template-rows: 90px 90px
4. }

Сетка 2 × 2 генерируется.

Но теперь представьте, что вы используетеgrid-columnиgrid-rowЧтобы найти элементы сетки, как это:

Код CSS:

1. .item-a {
2. grid-column: 1 / 2;
3. grid-row: 2 / 3;
4. }
5. .item-b {
6. grid-column: 5 / 6;
7. grid-row: 2 / 3;
8. }

Мы говорим.item-bОн начинается с линии сетки 5-го столбца и заканчивается на линии сетки 6-го столбца, но мы никогда не определяли линию сетки 5-го или 6-го столбца.
Поскольку линии сетки, на которые мы ссылаемся, не существуют, создайте неявную дорожку сетки шириной 0, чтобы заполнить пробел. Мы можем использоватьgrid-auto-columnsиgrid-auto-rowsЧтобы указать размер этих неявных дорожек:

Код CSS:

1. .container {
2. grid-auto-columns: 60px;
3. }

Вернуться к содержанию

grid-auto-flow

Если у вас есть элементы сетки, которые явно не помещены в сетку,Алгоритм автоматического размещенияЭти элементы сетки автоматически размещаются. Это свойство управляет работой алгоритма автоматической разметки.

Значение:

• row: Указать алгоритму автоматического размещения, чтобы заполнить каждую строку по очереди, добавляя новые строки по мере необходимости
• column: Указать алгоритму автоматического размещения, чтобы заполнить каждый столбец по очереди, добавить новые столбцы по мере необходимости
• dense: Говорит алгоритму автоматического размещения, чтобы попытаться заполнить более ранние промежутки в сетке, когда более мелкие элементы сетки появятся позже

Код CSS:

1. .container {
2. grid-auto-flow: row | column | row dense | column dense
3. }

Обратите внимание, чтоdenseНаборы могут заставить ваши элементы сетки появляться не в порядке.

Пример:

Рассмотрим следующий HTML:

HTML код:

1. <section>
2. <div>item-a</div>
3. <div>item-b</div>
4. <div>item-c</div>
5. <div>item-d</div>
6. <div>item-e</div>
7. </section>

Вы определяете сетку с 5 столбцами и 2 строками, иgrid-auto-flowУстановите вrow(То есть значение по умолчанию):

Код CSS:

1. .container {
2. display: grid;
3. grid-template-columns: 60px 60px 60px 60px 60px;
4. grid-template-rows: 30px 30px;
5. grid-auto-flow: row;
6. }

Когда вы помещаете элемент сетки в сетку, вы можете указать только два из них:

Код CSS:

1. .item-a {
2. grid-column: 1;
3. grid-row: 1 / 3;
4. }
5. .item-e {
6. grid-column: 5;
7. grid-row: 1 / 3;
8. }

Потому что мы ставимgrid-auto-flowУстановите вrowТак что наша сетка будет выглядеть так.Обратите вниманиеУ нас нет элемента сетки для позиционирования (item-b，item-c，item-d) Будет располагаться в доступных строках так:

И наоборот, если мы положимgrid-auto-flowУстановите вcolumn ，item-b，item-c，item-dВыровняю колонку:

Код CSS:

1. .container {
2. display: grid;
3. grid-template-columns: 60px 60px 60px 60px 60px;
4. grid-template-rows: 30px 30px;
5. grid-auto-flow: column;
6. }

Вернуться к содержанию

grid

Установите сокращение для всех следующих свойств в одном объявлении:grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columnsИgrid-auto-flow, Это будет такжеgrid-column-gapиgrid-column-gapУстановите начальные значения, даже если они не могут пройтиgridСвойство установлено явно.

Значение:

• none: Установить все дочерние атрибуты в их начальные значения
• <grid-template-columns> / <grid-template-columns>: будетgrid-template-rowsиgrid-template-columnsУстановите указанные значения отдельно и установите для всех других под-свойств их начальные значения
• <grid-auto-flow> [<grid-auto-columns> [/ <grid-auto-columns>]]: принять все иgrid-auto-flow ，grid-auto-rowsиgrid-auto-columnsТо же значение. Если опущеноgrid-auto-columnsЭто установленоgrid-auto-rowsУказанное значение. Если оба опущены, они будут установлены в свои начальные значения

Код CSS:

1. .container {
2. grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
3. }

Примеры:

Следующие два кодовых блока эквивалентны:

Код CSS:

1. .container {
2. grid: 200px auto / 1fr auto 1fr;
3. }

Код CSS:

1. .container {
2. grid-template-rows: 200px auto;
3. grid-template-columns: 1fr auto 1fr;
4. grid-template-areas: none;
5. }

Следующие два кодовых блока также эквивалентны:

Код CSS:

1. .container {
2. grid: column 1fr / auto;
3. }

Код CSS:

1. .container {
2. grid-auto-flow: column;
3. grid-auto-rows: 1fr;
4. grid-auto-columns: auto;
5. }

Он также принимает более сложный, но довольно удобный синтаксис, чтобы установить все сразу. Вы можетеgrid-template-areas，grid-template-rowsиgrid-template-columnsИ все остальные подсвойства устанавливаются в свои начальные значения. При этом соответственно указываются имена линий сетки и размеры дорожек сетки в их областях сетки. Используйте самый простой пример для описания:

Код CSS:

1. .container {
2. grid: [row1-start] «header header header» 1fr [row1-end]
3. [row2-start] «footer footer footer» 25px [row2-end]
4. / auto 50px auto;
5. }

Эквивалентно:

Код CSS:

1. .container {
2. grid-template-areas:
3. «header header header»
4. «footer footer footer»;
5. grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
6. grid-template-columns: auto 50px auto;
7. }

Вернуться к содержанию

Свойство дочерних элементов Grid Items

grid-column-start / grid-column-end / grid-row-start / grid-row-end

Определите положение элемента сетки в сетке, указав линии сетки.grid-column-start / grid-row-startЛиния сетки в начале проекта сетки,grid-column-end / grid-row-endЛиния сетки, на которой заканчивается элемент сетки.

Значение:

• <line>Это может быть число, которое относится к пронумерованной линии сетки, или имя, которое относится к именованной линии сетки
• span <number>Количество дорожек сетки, которые охватит этот элемент сетки
• span <name>Элемент сетки будет охватывать его с указанным именем
• auto： Представляет автоматическое размещение, автоматический диапазон и по умолчанию расширяет ширину или высоту дорожки сетки.

Код CSS:

1. .item {
2. grid-column-start: <number> | <name> | span <number> | span <name> | auto
3. grid-column-end: <number> | <name> | span <number> | span <name> | auto
4. grid-row-start: <number> | <name> | span <number> | span <name> | auto
5. grid-row-end: <number> | <name> | span <number> | span <name> | auto
6. }

Пример:

Код CSS:

1. .item-a {
2. grid-column-start: 2;
3. grid-column-end: five;
4. grid-row-start: row1-start
5. grid-row-end: 3
6. }

Код CSS:

1. .item-b {
2. grid-column-start: 1;
3. grid-column-end: span col4-start;
4. grid-row-start: 2
5. grid-row-end: span 2
6. }

Если декларация не указанаgrid-column-end / grid-row-endПо умолчанию этот элемент сетки будет занимать 1 дорожку.

Элементы могут перекрывать друг друга. Вы можете использоватьz-indexКонтролировать их перекрывающийся порядок.

Вернуться к содержанию

grid-column / grid-row

соответственноgrid-column-start + grid-column-endиgrid-row-start + grid-row-endСокращенная форма.

Значение:

• <start-line> / <end-line>: каждый элемент сетки принимает все те же значения, что и обычная письменная версия, включая промежутки

Код CSS:

1. .item {
2. grid-column: <start-line> / <end-line> | <start-line> / span <value>;
3. grid-row: <start-line> / <end-line> | <start-line> / span <value>;
4. }

Пример:

Код CSS:

1. .item-c {
2. grid-column: 3 / span 2;
3. grid-row: third-line / 4;
4. }

Если конец делителя не объявлен, элемент сетки по умолчанию занимает 1 дорожку сетки.

Вернуться к содержанию

grid-area

Укажите имя для элемента сетки, чтобы он мог использоваться контейнером сеткиgrid-template-areasСсылка на шаблон, созданный свойством. В качестве альтернативы этот атрибут можно использовать какgrid-row-start + grid-column-start + grid-row-end + grid-column-endАкроним.

Значение:

• <имя>: имя по вашему выбору
• <row-start> / <column-start> / <row-end> / <column-end>: номер или имя разделителя

Код CSS:

1. .item {
2. grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
3. }

Пример:

Как способ присвоения имен элементам сетки:

Код CSS:

1. .item-d {
2. grid-area: header
3. }

в качествеgrid-row-start + grid-column-start + grid-row-end + grid-column-endКраткая форма атрибута

Код CSS:

1. .item-d {
2. grid-area: 1 / col4-start / last-line / 6
3. }

Вернуться к содержанию

justify-self

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

Значение:

• start: Выровнять содержимое слева от области сетки
• end: Выровнять содержимое справа от области сетки
• center: Выровнять содержимое по центру области сетки (горизонтальный центр)
• stretch: Заполнить ширину всей области сетки (это по умолчанию)

Пример:

Код CSS:

1. .item-a {
2. justify-self: start;
3. }

Код CSS:

1. .item-a {
2. justify-self: end;
3. }

Код CSS:

1. .item-a {
2. justify-self: center;
3. }

Код CSS:

1. .item-a {
2. justify-self: stretch;
3. }

Чтобы установить выравнивание оси строки для всех элементов сетки в сетке, вы также можете установить его в контейнере сетки.justify-itemsНедвижимость.

Вернуться к содержанию

align-self

Выровняйте содержимое элемента сетки вдоль оси столбца (противоположное свойствоjustify-self(Выровнено вдоль оси ряда). Это значение применяется к контенту в пределах одного элемента сетки.

Значение:

• start: Выравнивание содержимого по верху области сетки
• end: Выровнять содержимое по нижней части области сетки
• center: Выравнивание содержимого по центру области сетки (по центру по вертикали)
• stretch: Заполняет высоту всей области сетки (по умолчанию)

Код CSS:

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

Пример:

Код CSS:

1. .item-a {
2. align-self: start;
3. }

Код CSS:

1. .item-a {
2. align-self: end;
3. }

Код CSS:

1. .item-a {
2. align-self: center;
3. }

Код CSS:

1. .item-a {
2. align-self: stretch;
3. }

Чтобы установить выравнивание по оси столбца для всех элементов сетки в сетке, вы также можете установить его в контейнере сетки.align-itemsНедвижимость.

Технология CSS Grid. Руководство по адаптивной верстке​ — vsepo100

Описание

Описание курса:

Верстка — это создание веб-страниц с помощью специальных языков. Верстка — это также интересная, постоянно меняющаяся область деятельности в создании сайтов. Это процесс перевода макета сайта, созданного дизайнером в графической программе, в HTML-страницу. При этом используются специальные языки, которые для этого предназначены: HTML, CSS, JavaScript. Соответственно, верстальщик — это человек, который занимается кодированием HTML-страницы.

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

CSS Grid — это мощная новая технология в верстке. Она позволяет быстро создавать динамические, отзывчивые, современные макеты на чистом CSS. При этом код чище и проще в поддержке, по сравнению с традиционными методами верстки.

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

Курс включает в себя 52 урока общей продолжительностью чуть более 13 часов без учета бонусов, в которых содержится все необходимая и исчерпывающая теоретическая база для старта в изучении материалов курса! Вы получите два практических блока в которых показана верстка двух PSD-макетов с нуля с использованием последних Web-технологий.

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

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

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

Бонусом идет 2 курса:

• «Верстка-Мастер. От теории до верстки популярных шаблонов»
• «Веб-дизайнер – профессионал. Создание востребованных макетов»

Проверка сетки CSS в Microsoft Edge DevTools — Microsoft Edge Development

• 05/04/2021
• Чтение занимает 3 мин

В этой статье

В этой статье вы можете определить сетки CSS на веб-сайте и отладить проблемы макета сетки с помощью настраиваемых накладок сетки.

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

Перед началом работы

CSS Grid — это мощная парадигма макета для Интернета. Отличное место для начала изучения CSS Grid и многих функций — руководство по макету сетки CSS на MDN.

Откройте для себя сетки CSS

Если элемент HTML на вашей странице имеет или применяется к ней, рядом с ней в панели Elements отображается display: grid display: inline-grid grid значок.

Откройте сетку

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

Значок сетки toggle

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

Области макета

Раздел Grid в области Макет содержит следующие 2 под раздела.

• Параметры отображения наложения
• Наложения сетки

Параметры отображения наложения

Параметры отображения overlay состоят из следующих 2 частей.

В следующих разделах представлены сведения для каждого из параметров отображения overlay.

Показать номера строк

По умолчанию на накладке сетки отображаются номера положительных и отрицательных строк.

Дополнительные сведения о отрицательных номерах в сетке наложения перейдите к размещению на основе строки с CSS Grid.

Отображение номеров строк

Скрыть метки строки

Выберите метки hide line, чтобы скрыть номера строк.

Скрыть метки строки

Показать имена строк

Дополнительные сведения о именах строк в накладке сетки перейдите в Макет с помощью именных линий сетки.

Выберите имена строк Show, чтобы просмотреть имена строк, а не числа. В примере 4 строки имеют имена: left middle1 , и middle2 right .

Показать имена строк

Показать размеры трека

Включить контрольный ящик Размеров трассы Show для просмотра размеров трассы сетки.

DevTools отображает [authored size] и [computed size] на каждой метке строки.

В демонстрации размеры snack-box столбцов определяются в grid-template-columns:1fr 2fr; CSS. Поэтому метки строк столбцов отображают как авторские, так и вычислительные размеры.

Метки строк отображают только вычисляемые размеры, так как в таблице стилей нет размеров строк.

Показать размеры трека

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

Чтобы просмотреть имена области, вкажите почтовый ящик Имена области Показать. В примере в сетке 3 области: верхняя, нижняя и нижняя 2.

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

Расширение линий сетки

Вдайте контрольный ящик Extend grid lines для расширения линий сетки до края представления на каждой оси.

Расширение линий сетки

Наложения сетки

Раздел Grid overlays содержит список сетки, которые присутствуют на странице, каждая из которых имеет почтовый ящик, а также различные параметры.

Включить представления наложения нескольких сеток

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

Включить представления наложения нескольких сеток

Настройка цвета наложения сетки

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

Настройка цвета наложения сетки

Выделение сетки

Чтобы выделить элемент HTML в средстве Elements и прокрутите его на веб-странице, выберите элемент Show в панели Elements ( Элемент Show в значке панели ) .

Выделение сетки

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

• Отправляйте свои отзывы с помощью значка Отправить отзыв либо путем выбора Alt+Shift+I (Windows, Linux) или Option+Shift+I (macOS) в средствах разработчика.
• Отправьте твит с упоминанием @EdgeDevTools.
• Отправьте предложение в разделе The Web We Want.
• Чтобы сообщить об ошибках в этой статье, используйте следующий раздел Отзывы.

Значок Отправить отзыв в средствах разработчика Microsoft Edge

Эта работа предоставляется в рамках международной лицензии Creative Commons Attribution 4.0 International License.

Заменяет ли CSS Grid Flexbox?

Нет. Хорошо. Преимущественно №

Grid намного новее, чем Flexbox, и имеет немного меньшую поддержку браузера. Вот почему это имеет смысл, если люди задаются вопросом, может ли CSS-сетка заменить Flexbox.

Чтобы поставить точку:

1. Grid может делать то, чего не может делать Flexbox.
2. Flexbox может делать то, чего не может Grid.
3. Они могут работать вместе: элемент сетки может быть контейнером flexbox. Гибкий элемент может быть контейнером сетки.

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

Если вы не слышали труб, то март 2017 года стал знаменательным месяцем для Grid. Он был выпущен полностью без префиксов и готов к работе в Chrome, Opera, Firefox и Safari. Даже Edge поддерживает его, или более старую версию спецификации, которую вы можете получить с помощью Autoprefixer.

Итак.

Заменяет ли Grid Flexbox?

Сначала это кажется немного сложным. Особенно, если вы только начинаете понимать странный, чужеродный синтаксис Flexbox. Теперь нужно изучить и другой синтаксис ? Блин.

Вот некоторые вещи, в которых Grid на лучше, чем Flexbox:

• Создание макетов целых страниц. Для этого лучше даже с учетом соображений производительности макета.
• Изготовление буквенных сеток.Как столбцы X с промежутком Y между ними, самодельный каркас. grid-gap замечательно, так как желоба — основная проблема решетчатых систем.
• Требуется меньшее вмешательство в медиа-запросы с действительно мощными функциями, такими как автоматический макет, minmax () , repeat () и автозаполнение . Вот отличная идея.

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

Flexbox предназначен для размещения элементов в одном измерении — в строке ИЛИ столбце.Сетка предназначена для размещения элементов в двух измерениях — строках И столбцах.

Давайте посмотрим несколько демонстраций.

Допустим, мы создаем компонент горизонтальной навигации — это идеальный вариант использования Flexbox, поскольку он устанавливает контент только в одном направлении. В демонстрации Криса ниже вы можете повозиться с этими свойствами и увидеть, насколько мощен Flexbox:

См. Навигацию по панели пера с помощью значков Flexbox и SVG Криса Койера (@chriscoyier) на CodePen.

Но есть некоторые случаи, когда эти свойства flexbox, такие как justify-content или align-items , должны использоваться вместе со свойствами Grid.Возьмем, к примеру, эту демонстрацию:

См. Pen Flexbox и Grid — первая демонстрация Робина Рендла (@robinrendle) на CodePen.

Сначала мы создали .wrapper, для которого задано значение display: flex; . Таким образом, мы можем установить максимальную ширину для нашего .grid и использовать justify-content: center; , чтобы разместить его в центре области просмотра. Затем мы можем сделать нашу сетку с нужным количеством столбцов:

  .wrapper {
  дисплей: гибкий;
  justify-content: center;
}

.сетка {
  дисплей: сетка;
  максимальная ширина: 800 пикселей;
  сетка-шаблон-столбцы: 1fr 2fr;
}  

Это только первый шаг.

Теперь давайте сделаем так, чтобы .ad занимали всю строку нашей сетки. Что ж, мы можем сделать это, специально нацелив наш

  .ad {
  начало столбца сетки: 1;
  конец столбца сетки: 3;
}  

  .grid {
  дисплей: сетка;
  максимальная ширина: 800 пикселей;
  сетка-шаблон-столбцы: 1fr 2fr;
  сетка-шаблон-строки: 1fr 2fr 1fr;
}