Css grid руководство: Полное руководство по CSS Grid (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 представляет собой долю (fraction) доступного пространства в грид-контейнере. Определение грида в коде ниже создаст три трека равной длины, которые будут увеличиваться и уменьшаться в размерах в соответствии с доступным пространством.

<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()

В огромных гридах с большим количеством треков можно использовать нотацию 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 и grid-auto-columns.

В примере ниже мы задаем 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;
}

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

minmax()

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

Для подобных ситуаций в Grid  предусмотрено решение с помощью функции minmax(). В следующем примере  minmax() используется, как значение свойства grid-auto-rows. Автоматически создаваемые строки будут как минимум 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, grid-column-end, grid-row-start и grid-row-end. Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 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 и grid-row-gap, или с помощью сокращенного свойства grid-gap. В примере ниже мы создаем зазор в 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 родительского элемента и линии вложенного грида не выравниваются по линиям родительского грида.

Подгрид (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 Layout — один из самых обсуждаемых инструментов верстальщиков на данный момент. Однако он не является чем-то очень новым. Дело в том, что система приобрела поддержку самых известных браузеров: Firefox, Chrome, Opera, а также Safari. Именно этим и вызван такой ажиотаж в сторону Grid.

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

Что такое CSS Grid Layout?

История инструмента начинается с 2011 года. Именно тогда компания Microsoft отправила предложение группе разработчиков CSS. По этой ссылке вы можете посмотреть, как изначально выглядело предложение от Microsoft об использовании Grid вместе с Flexbox для вёрстки адаптивных макетов.

Данный CSS модуль определяет двумерную систему компоновки на основе сетки, оптимизированной для дизайна пользовательского интерфейса. Дочерние элементы могут быть помещены в произвольные места (слоты) при предопределённой гибкой или фиксированной сетке макета.

Краткое описание Grid от консорциума W3C.

Если у вас есть время и желание углубиться в документацию, можете сделать это на сайте консорциума.

Разница между Flexbox и Grid

Главным отличием Grid от Flexbox является количество измерений (осей). При работе только с последним вам придётся выбирать между осью X и осью Y. Иначе говоря, Flexbox может быть направлен на создание только колонок или только строк. Однако эти инструменты не конкурируют друг с другом, поэтому можно применять их вместе.

На иллюстрации ниже можно наглядно ознакомиться с отличительными чертами инструментов:

Вывод таков: CSS Grid Layout — новая и мощная система компоновки, позволяющая с лёгкостью разделить веб-страницу на столбцы и строки.

Полезные ресурсы, уроки и руководства

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

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

На этом ресурсе вы найдёте введение в работу с Grid, объяснение механизма работы Grid-контейнера, описание размещения элементов внутри контейнеров и многое другое.

Детальное руководство по CSS Grid

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

Grid в примерах

Приглашённый эксперт рабочей группы CSS, Рейчел Эндрю, — давний сторонник внедрения Grid в современный веб. Она делится большим количеством примеров о том, как использовать Grid, а также образцами кода, видеоуроками прочими полезными материалами на своём сайте Grid by Example.

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

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

Рабочий пример: мой первый макет, созданный с CSS Grid

В этом примере Тайлер Стика показывает старый способ построения макетов (с помощью float) и пытается достичь того же результата с помощью Grid.

Особенности CSS Grid, которые заставляют моё сердце биться быстрее

Фронтенд разработчик Уна Кравец рассказывает о трёх функциях Grid, восхищающих её: включение элемента minmax (), использование grid-gap и названные области.

Практическое использование CSS Grid: добавление Grid в существующий проект

Эрик Мейер рассматривает процесс преобразования существующих CSS наработок в Grid без нарушения их работоспособности в браузерах без поддержки Grid.

Grid-огород

Grid Garden — небольшая и забавная браузерная игра, основанная на написании кода для выращивания моркови в огороде. Это замечательный способ для практики и изучения основ CSS.

Цель моей игры не включает в себя охват всех новых аспектов инструмента CSS Grid. Главное предназначение игры — помочь игрокам развить интуицию и признать потенциал инструмента.

Говорит Томас Парк.

Шпаргалка по CSS Grid

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

Заключение

Данные из скриншота с сайта Can I Use выглядят довольно многообещающе, показывая, что большинство современных браузеров готовы к работе с CSS Grid и могут поддерживать его свойства без префиксов:

Однако компания Microsoft снова разочаровала: на данный момент в браузерах IE и Edge присутствует только частичная поддержка Grid через префикс -ms-. Сейчас в Microsoft отправлена заявка на развитие поддержки Grid, и она находится в топе по количеству заявителей.

Несмотря на то, что большинство браузеров поддерживает Grid, он работает только в последних версиях этих браузеров (а в некоторых только частично), что составляет только 30–40 % от общего числа используемых браузеров. Если вы не уверены, что подавляющее большинство ваших пользователей имеет последние сборки браузеров с поддержкой Grid, то желательно не экспериментировать с созданием крупномасштабных проектов.

Перевод статьи «Getting started with CSS Grid Layout»

20+ сервисов для изучения CSS Grid и Flexbox разметки

В последнее время при работе с WordPress шаблонами мне все чаще попадается HTML разметка, где вместо олдскульных DIV блоков используется Grid и Flexbox. Я, признаться, все еще откладываю детальное изучения этих подходов из-за отсутствие свободного времени (скорее лени), но постепенно приходится вникать. Ранее в блоге была статья про основы CSS Grid с реальными примерами, а сегодня хочу запостить перевод подборки полезных сервисов для изучения этих двух веб-технологий.

Если вы совсем уж новичок в данной сфере для начала советую ознакомиться с бесплатным курсом обучения верстке с нуля под названием Interneting is Hard. Проект на английском, но реально очень толковый и наглядный. Хотя, думаю, реально найти какие-то отечественные альтернативы.

А теперь непосредственно к нашей теме. Общая особенность большинства ресурсов и материалов, расположенных ниже, в том, что это “Fun places to learn” (как выражается автор оригинальной статьи). То есть они представляют из себя не сухую методичку с текстовой теорией, а являются плюс-минус интерактивными сервисами с элементами игры, онлайн-конструкторами и видео.

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

Сервисы для обучения Grid Layout

Игры

Grid Garden

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

CSS Diner

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

Онлайн-генераторы

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

Grid Visual Playground

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

Grid by example

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

CSS Grid Generator

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

CSS Grid Layout Generator

Аналогичный предыдущему проект, но с поддержкой каких-то regions (если честно, не знаю, что это).

CSS Grid Experiments

Подборка интересных вариантов использования CSS-сетки. Есть даже весьма сложные и необычные примеры.

Шпаргалки (Cheatsheets) и статьи по теме

A Complete Guide to Grid

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

GRID

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

Learn CSS Grid

Полноценное руководство по нашей теме, созданное в виде одностраничного сайта. Оно состоит из 17ти разделов, помимо текста содержит также и скриншоты.

Introduction to CSS Grid Layout

Кроме теории и примеров здесь интересен пункт про использование Firefox DevTools для работы с Layout-сеткой. В текстах присутствуют примеры кода и анимация/видео. Интересно, есть ли что-то похожее для инструмента разработчиков Chrome Devtools.

Видео

Напоследок не менее полезные материалы – видео.

cssgrid.io

Некто Wes Bos с поддержкой от Firefox создал 25 видео по изучению принципов работы Grid Layout. 4 часа видосов! Супер.

Layout Land – Videos on CSS Grid

Ссылка на Youtube плейлист с уроками по основам Grid-сетки от Jen Simmons. Всего 15 роликов.

How to use CSS Grid layout in 60 seconds!

Достаточно веселая и простая видеодемонстрация определения колонок и рядов за 60 секунд.

Сервисы для изучения Flexbox

Что касается Flexbox, то оригинальная статья с подборой полезных материалов была написана 2 года назад. Однако, не смотря на это, все присутствующие там ссылки все равно оказались рабочими. Базовые понятия по Flexbox можно посмотреть в руководстве Interneting is Hard, которое я упоминал в самом начале статьи.

Типы сервисов здесь аналогичны предыдущему разделу – есть игры, генераторы, Cheatsheets, заметки и т.п.

Flexbox Froggy Game

Начнем с веселых развлекательных ресурсов. Ваша задача «перенести» лягушку на лилии с помощью разных CSS-свойств.

Flexbox Defense Game

Еще одна мини-игра, где нужно будет защищать свою территорию от наступающих врагов.

Visual Guide to CSS3 Flexbox

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

Flexbox Playground

Еще одна площадка для тестирования всевозможных фишек Flexbox – задавайте определенные параметры и смотрите на результат.

Flexplorer

Третий инструмент из той же области, что и предыдущие – тестируйте CSS-Flexbox опции на практике.

Solved By Flexbox

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

Flexbox Patterns

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

Guide to Flexbox

Гайд по теме от портала CSS tricks с красочными иллюстрациями, кодом и пояснениями. Подобные материалы полезны не только для изучения вопроса с нуля, но и пригодятся чтобы вспомнить/подсмотреть некоторые нюансы/синтаксис.

Joni Bologna’s fruity Flexbox Cheatsheet

Кроме веб-версии шпаргалки есть ссылка на PDF книгу для скачивания.

Flexbox Cheatsheet By Yoksel

Еще один простой мини-сайт по свойствам Flexbox – ориентирование, выравнивание и др.

Итого. Этих ссылок/ресурсов вам должно с головой хватить дабы разобраться с Grid и Flexbox. Исходя из увиденного и прочитанного, мне кажется, технология CSS-Grid более перспективная (пусть и новая, но почти все современные браузеры ее поддерживают). От Flexbox она отличается возможностью задавать расположение блоков в двух изменениях строках/столбцах и имеет более широкий и гибкий набор функций. Однако для общего развития можно изучить оба направления – при правке HTML-кода готовых адаптивных шаблонов могут встречаться разные варианты. Больше знаний уж точно не помешает.

Руководство Основные CSS Selectors

1- Что такое CSS Selector?

CSS Selector используется для поиска (или выбора) элементов в HTML докумене, чтобы применить к ним стиль (style).

Простой пример:

/** Select all elements with class contains abc */

.abc  

/** Select element with ID = abc */

#abc 

CSS Selectors разделен на 3 следующие виды:

Basic Selectors

Базовые Selector помогают вам выбрать элементы, основываясь на его Name, ID, Class или Attribute.

Базовые Selector будут упомянуты в данной статье.

Combining selectors

Выбрать элементы, основываясь на отношении между ними.

Pseudo selectors

Universal selector (Универсальный селектор): Выбирает все элементы или все элементы namespace (пространство имен).

Синтаксис:

Например выбрать все элементы и настроить для них границы зеленого цвета.

universal-selector-example1.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Universal Selector: *</title>
      <style>
         *  {
           border: 1px solid green;
           margin: 5px;
         }
      </style>
   </head>
   <body>

     <h2>I am h2 element</h2>

     <div>I am div element</div>

     <p>I am P element</div>

   </body>
</html>

CSS Type Selector помогает вам найти элементы по имени.

Например, выбрать все элементы <div>:

Например, выбрать все элементы​​​​​​​ <span>:

type-selector-example1.css

span  {
   background-color: skyblue;
}

type-selector-example1.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Universal Selector: ns|*</title>
      <link rel="stylesheet" type="text/css" href="type-selector-example1.css" />
   </head>
   <body>

     <span>I am span element</span>

     <p>I am P element</p>

     <span>I am span element</span>

   </body>
</html>

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

type-selector-example2.css

/** Select h2 or h3 */
h2, h3  {
   color: blue;
}

type-selector-example2. html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Type Selector</title>
      <link rel="stylesheet" type="text/css" href="type-selector-example2.css" />
   </head>
   <body>

     <h2>I am h2 element</h2>

     <h3>I am h3 element</h3>

     <h4>I am h4 element</h4>

   </body>
</html>

CSS Class Selector выбирает элементы, основываясь на значении атрибута (attribute) class.

Например, выбрать все элементы с class = «txt-green» ​​​​​​​или включая слово «txt-green».

class-selector-example1.css

.txt-green  {
   color: green;
}
.bg-yellow {
   background-color: yellow;
}

class-selector-example1.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Class Selector</title>
      <link rel="stylesheet" type="text/css" href="class-selector-example1. css" />
   </head>
   <body>

     <h2 class ="txt-green">I am h2 with class = 'txt-green'</h2>

     <p>I am P element</p>

     <h3>I am h3 with class = 'txt-green bg-yellow'</h3>

   </body>
</html>

Пример:

class-selector-example2.css

/* <p> with class 'txt-green' or includes 'text-green' */
p.txt-green  {
   color: green;
}

.bg-yellow {
   background-color: yellow;
}

/* <div> with class inculudes both 'text-green' and 'bg-yellow' */
div.txt-green.bg-yellow  {
    color: green;
    font-style: italic;
}

class-selector-example2.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Class Selector</title>
      <link rel="stylesheet" type="text/css" href="class-selector-example2.css" />
   </head>
   <body>

     <h2 class ="txt-green">I am h2 with class = 'txt-green'</h2>

     <p class ="txt-green">I am P element with</p>

     <div>I am DIV with class = 'txt-green bg-yellow'</div>

     <br/>

     <span>I am SPAN with class = 'txt-green bg-yellow'</span>

   </body>
</html>

CSS ID Selector помогает вам выбрать элементы основываясь на значении атрибута (attribute) ID, значение атрибута ID должно полностью совпадать со значением, данным Selector. Примечание: CSS ID Selector «не различает прописные и строчные буквы» (Case insensitive)

id-selector-example.css

#demo  {
   color: blue;
   font-size: 30px;
}

id-selector-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>ID Selector</title>
      <link rel="stylesheet" type="text/css" href="id-selector-example.css" />
   </head>
   <body>

     <h2 id = "demo">Demo</h2>

     <span>I am span element</span>

     <p>I am P element</p>

   </body>
</html>

6- CSS Attribute Selector

CSS Attribute Selector помогает вам выбрать элементы, основываясь на атрибуте или значении выданного атрибута.

CSS Grid Layout — Фрилансер по жизни

Пример №1 единица fr

Пример №2 проценты

Пример №3 minmax

Пример №4 auto

Пример №5 repeat

Пример №6 repeat + auto-fill
+ minmax

Пример №7 repeat + auto-fit
+ minmax

Пример №8 areas

fr — единица длины, которая позволяет создавать гибкие дорожки. Не является единицей измерения в обычном ее понимании, поэтому не может быть представлена или объединена с другими типами единиц в выражениях calc(). Общий размер фиксированных строк или столбцов вычитается из доступного пространства контейнера-сетки. Оставшееся пространство делится между строками и столбцами с гибкими размерами пропорционально их коэффициенту.

CSS код:

.grid{

background-color: #eee;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;

}

Или:

.grid{

background-color: #eee;
display: grid;
grid-template: 1fr 1fr / 1fr 1fr 1fr;

}

. grid__item{

background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;

}

Размеры в % вычисляются от ширины или высоты контейнера-сетки.

CSS код:

.grid{

background-color: #eee;
display: grid;
grid-template-columns: 20% 30% 20%;
grid-template-rows: 80% 120%;

}

Или:

.grid{

background-color: #eee;
display: grid;
grid-template: 80% 120% / 20% 30% 20%;

}

. grid__item{

background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;

}

Функция minmax(min,max) определяет диапазон размеров, больше или равный min и меньше или равный max. Если max < min, то max игнорируется, а minmax(min,max) обрабатывается как min. Значения в fr можно устанавливать только как максимальное.

CSS код:

.grid{

background-color: #eee;
display: grid;
grid-template-columns: minmax(200px,300px) minmax(100px,200px) minmax(250px,150px);
grid-template-rows: minmax(100px,110%) minmax(50px,1fr);

}

Или:

. grid{

background-color: #eee;
display: grid;
grid-template: minmax(100px,110%) minmax(50px,1fr) / minmax(200px,300px) minmax(100px,200px) minmax(250px,150px);

}

.grid__item{

background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;

}

Значение auto ориентируется на содержимое элементов сетки одной дорожки. Как минимум, рассматривается как минимальный размер элемента сетки, как определено min-width или min-height. Как максимум, обрабатывается так же, как и max-content. Может растягиваться за счет свойств align-content и justify-content.

CSS код:

.grid{

background-color: #eee;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto 1fr;

}

Или:

.grid{

background-color: #eee;
display: grid;
grid-template: auto 1fr / auto 1fr auto;

}

.grid__item{

background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;

}

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

CSS код:

.grid{

background-color: #eee;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(2,1fr);

}

Или:

.grid{

background-color: #eee;
display: grid;
grid-template: repeat(2,1fr) / repeat(3,1fr);

}

.grid__item{

background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;

}

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

CSS код:

.grid{

background-color: #eee;
display: grid;
grid-template-columns: repeat(auto-fill,minmax(150px, 1fr));

}

Или:

.grid{

background-color: #eee;
display: grid;
grid-template: auto / repeat(auto-fill,minmax(150px, 1fr));

}

.grid__item{

background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;

}

Если вы используете auto-fit, то дорожки, которые не содержат элементы сетки, будут сброшены.

CSS код:

.grid{

background-color: #eee;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(150px, 1fr));

}

Или:

.grid{

background-color: #eee;
display: grid;
grid-template: auto / repeat(auto-fit,minmax(150px, 1fr));

}

.grid__item{

background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;

}

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

CSS код:

.grid{

background-color: #eee;
display: grid;
grid-template-columns: 150px 1fr;
grid-template-areas: ‘header header’ ‘sidebar content’ ‘block-1 block-2’ ‘footer footer’;

}

Или:

.grid{

background-color: #eee;
display: grid;
grid-template: auto / 150px 1fr;
grid-template-areas: ‘header header’ ‘sidebar content’ ‘block-1 block-2’ ‘footer footer’;

}

.grid__item{

background-color: #5e5373;
border: 1px dashed #ece89d;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: 700;

}

. grid__item:nth-child(1){

grid-area: header;

}

.grid__item:nth-child(2){

grid-area: sidebar;

}

.grid__item:nth-child(3){

grid-area: content;

}

.grid__item:nth-child(4){

grid-area: block-1;

}

.grid__item:nth-child(5){

grid-area: block-2;

}

.grid__item:nth-child(6){

grid-area: footer;

}

Сетка

CSS: выпуск 2.0 | Webflow Blog

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

Контекст: CSS-сетка 1.0

Запуск сетки CSS еще в октябре 2018 года сделал верстку в Webflow значительным шагом вперед. Но при этом возникли две проблемы:

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

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

Grid 2.0: сделать адаптивный дизайн еще проще

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

Позиционирование с автозапуском: новое значение по умолчанию

Маленький, но мощный: новый вариант «автоматического» положения для элементов сетки.

В частности, сегодняшняя версия представляет новый режим по умолчанию для размещения дочерних элементов сетки: autoflow. Когда дочерний элемент сетки настроен на автоматическое позиционирование, он будет автоматически помещен в следующую доступную ячейку сетки при добавлении в сетку.(Ручное позиционирование, которое позволяет «закрепить» дочерние элементы сетки в определенном фиксированном положении в сетке, по-прежнему может применяться, удерживая Shift при перетаскивании элементов в сетку, или путем переключения настроек дочерних элементов сетки на панели стилей. )

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

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

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

Поддержка списка продуктов для сбора и электронной торговли

Позиционирование

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

Макет сетки: теперь отлично сочетается с макетами, управляемыми содержимым.

Автоматическая подгонка (также известная как «магия реагирования»)

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

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

плотный

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

При включении «плотной» сетки пустые ячейки заполняются путем перераспределения содержимого.

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

Примечание о доступности

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

Где учить сетку

Если вы все еще не играли с сеткой или хотите узнать о последних обновлениях, которые поставляются с этой версией 2.0, лучшее место для вас — наш недавно обновленный курс по сетке в Университете Webflow.

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

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

Что будет дальше

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

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

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

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

Сетка | Webflow University

CSS-сетка используется разработчиками и дизайнерами внешнего интерфейса для создания ВСЕХ видов современных веб-макетов и интерфейсов — по сути, это структура макета для таких приложений, как Slack, и сама панель стилей Webflow. Но его можно использовать для создания чего угодно, от базовых структур целых веб-сайтов.

Мы рассмотрим макеты на основе сетки в 6 частях: мы покажем, как создавать и настраивать сетки, мы поговорим о волшебном блоке div, мы будем использовать положение сетки АВТО для создания макета сетки изображений, мы Мы воспользуемся РУЧНЫМ положением и НАКЛАДКОЙ, чтобы создать четырехквадрантный раздел героя, мы перейдем к многократно используемым макетам с использованием областей шаблона сетки, а затем мы рассмотрим создание макетов сетки, реагирующих на работу на РАЗНЫХ устройствах.

Сейчас. Прежде чем мы начнем — давайте кое-что проясним. Сетки НАПРАВЛЯЮЩИЕ. Это ничем не отличается от размещения приложений и виджетов на iOS. (Вы можете перемещать вещи, но вещи ВНУТРИ сетки будут НАПРАВЛЯТЬСЯ столбцами … и строками.)

И это поведение ПО УМОЛЧАНИЮ для CSS Grid (элементы располагаются АВТОМАТИЧЕСКИ … и переходят к следующему строка, когда в них заканчиваются столбцы). Но это только НАЧАЛО. Потому что вы можете сделать намного больше.

Итак, давайте начнем с основ. Сеткой может быть ВСЕ. Почти все. Вот такой раздел. Щелкните сетку? Теперь у вас есть сетка. Вот блок div. Щелкните сетку? Теперь у вас есть сетка. На панели «Добавить»? Есть сетка, которую можно просто перетащить. Список коллекций заполнен динамическим контентом из CMS? Установить для параметра отображения значение Сетка? Теперь у вас есть сетка. Работаете над ночным проектом и случайно пролили кофе, в результате чего другая рука идеально оперлась на клавиатуру, совместимую с macOS, чтобы одновременно нажать клавиши Command и E? Начните вводить Grid, нажмите Enter.Теперь у вас есть сетка.

Сейчас. Это на Mac. В Windows все по-другому. Гримур?

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

МакГуайр: начните вводить сетку и нажмите Enter. Теперь у него есть сетка.

А как использовать сетку? Ну, мы просто кладем вещи внутрь. По умолчанию вещи занимают доступные ячейки и автоматически переходят к следующей строке.Фактически, новые строки будут созданы автоматически.

И в любое время, чтобы отредактировать сетку … нажмите Edit grid. Теперь вы редактируете сетку. Во время редактирования вы можете добавлять столбцы или строки в свою сетку. И обратите внимание, как содержимое автоматически оборачивается, чтобы заполнить внутреннее пространство. Когда мы закончим редактирование сетки, давайте закроем.

И вот первое, что может показаться странным: хотим ли мы перетащить элемент в нижнюю правую ячейку? Это просто … не работает. Но этого следовало ожидать. Это связано с тем, что элементы, добавленные в сетку, по умолчанию размещаются АВТОМАТИЧЕСКИ.Если мы хотим разместить это вручную? Просто установите его в ручной режим. И теперь мы можем перетащить его куда угодно.

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

Это веб-сайт, который мы создали в сетке CSS. Но это не так. Это Microsoft Excel. А в электронных таблицах или таблицах удаление строки или столбца обычно УНИЧТОЖАЕТ содержимое внутри.

Сетки в сети разные. ПОТОМУ ЧТО они являются руководителями, удаление столбца или строки может изменить ситуацию, но не удаляет фактический контент.

И это основная идея: при создании сетки вы НЕ можете сделать неверный шаг. Сетки являются неразрушающими в том смысле, что они просто НАПРАВЛЯЮЩИЕ для содержания, которое мы будем помещать внутрь.

Давайте продолжим редактировать нашу сетку. Здесь много вариантов. И мы можем просто щелкнуть и перетащить, чтобы мы могли настроить это пространство (вы можете настроить ПРОБЕЛЫ между строками и столбцами).

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

Кстати, FRs (блок FR на этих столбцах)? Это дробные единицы. Потому что до того, как появилась сетка, мы вручную вычисляли такие вещи, как проценты, значения пикселей (и ВЫ все еще можете их использовать) … но FR заменяют всем, кому нужно управлять своими собственными декартовыми системами координат, в пользу чего-то гораздо более простого. И это выглядит так:

Три столбца? Каждый установлен на 1 фр? Это означает, что каждый займет 1/3 ширины. Четыре колонки? По 1 фр? Теперь каждый занимает 1/4.И математика сделана ЗА нас, поэтому, если мы хотим, чтобы этот столбец был В ДВА раза больше ширины других, мы просто устанавливаем его на 2 FR. Обратите внимание, как все остальное масштабируется автоматически. И еще одно замечание: мы упомянули ПРОБЕЛЫ между каждой ячейкой. Вы можете изменить эти зазоры, и FR все еще компенсирует это.

Магия FR? Нет; они наука. А также магия.

Закончив редактирование сетки, помните, что вы ВСЕГДА можете вернуться и изменить что-то, но пока мы можем просто НАЖАТЬ Escape или нажать кнопку с надписью «готово». ”

Итак. Сетки. Мы можем сделать сетку, установить несколько строк и столбцов и начать помещать вещи внутрь. Они будут автоматически позиционироваться, но мы можем отклониться от этого, установив для одного или нескольких элементов положение ВРУЧНУЮ. (Затем мы можем переместить его в любое место сетки.)

Давайте перейдем к волшебному блоку Div. Потому что, если вы еще не заметили, происходит что-то странное. Практичных макетов, похожих на ЭТО, не так много. И нас часто спрашивают: «Да, сетка, но как ее ИСПОЛЬЗОВАТЬ?» Помимо синтаксиса, здесь есть важный момент.Макеты на основе сетки часто требуют ВСТАВЛЕНИЯ вещей (заголовков, абзацев, кнопок, изображений — что угодно) — макеты сетки часто требуют размещения НЕСКОЛЬКИХ вещей внутри отдельных ячеек.

Итак. Мы просто устанавливаем элементы в положение вручную и перетаскиваем их в ту же ячейку? Ну нет. Теперь они все сложены друг на друга в беспорядке.

Введите: магический блок div. Это блок div. Но мы называем это волшебным. Идея такова: мы можем просто перетащить блок div, который ПРИНИМАЕТ ячейку … мы можем разместить его где угодно … и теперь мы можем помещать материал ВНУТРИ блока div.

Итак, если это наша сетка, и мы хотим, чтобы все это было внутри, мы помещаем блок DIV в ячейку. И мы размещаем то, что хотим … внутри блока div. Самый ТОЧНЫЙ способ убедиться, что мы размещаем наши элементы, — использовать навигатор (но мы рассмотрим ярлык для этого на холсте чуть позже).

Но это ВТОРАЯ большая идея (мы рассмотрели, как сетки являются направляющими для нашего контента) … но ВТОРОЙ вывод здесь заключается в том, что ЯЧЕЙКИ сетки не являются настоящими контейнерами (они НЕ блоки div, и по умолчанию они только держите одну вещь за раз).

Таким образом, блоки div дают нам возможность помещать НЕСКОЛЬКО элементов внутри ячейки сетки.

Это два наших вывода: сетки НАПРАВЛЯЮТ наш контент, а блоки div позволяют нам ВСТАВЛЯТЬ несколько вещей внутри любой ЯЧЕЙКИ в нашей сетке.

Но давайте сделаем это НАСТОЯЩИМ и поместим все это в РЕАЛЬНЫЕ макеты. И для этого давайте сначала сделаем автоматическое положение … построив эту сетку изображения.

А этот простой. Для нас у нас есть пустой раздел и пустой контейнер … и мы собираемся использовать сетку (просто перетаскивая сетку с панели добавления, и мы помещаем ее в контейнер — таким образом мы сохраняем сетку и наши изображения находятся в центре нашего дизайна).

А пока давайте добавим наши изображения. Как мы знаем, что добавить в нашу сетку? Мы просто щелкаем и перетаскиваем его. (МЫ ИСПОЛЬЗУЕМ изображения, но это могут быть заголовки, ссылки, блоки div или видео …).

Давайте отредактируем нашу сетку, прежде чем продолжить — давайте сделаем ее 4×4 (помните: мы ВСЕГДА можем это изменить). Когда мы закончим? Давай прекратим редактировать.

И давайте ПРОДОЛЖАЕМ перетаскивать изображения внутрь. Но обратите внимание, как, как мы уже говорили ранее, независимо от того, ЧТО мы отпускаем, контент размещается автоматически. Дочерние элементы сетки (ИЗОБРАЖЕНИЯ внутри) просто оборачивают и заполняют доступные ячейки внутри нашей СЕТКИ. (Это происходит автоматически.)

В самом деле, если мы снова войдем и отредактируем? Мы можем ИЗМЕНИТЬ, например, количество столбцов. И опять же, в Excel, Numbers, Google Sheets или с лотками для кубиков льда — удаление столбца ОЧЕНЬ разрушительно и разрушает содержимое внутри. Но ЗДЕСЬ … наши изображения в порядке. Теперь они просто занимают меньше столбцов (они WRAP автоматически).Как только мы закончим, давайте вернемся.

И кое-что, что нужно отметить здесь относительно РАЗМЕРА … это то, что эти строки (высота КАЖДОЙ строки в нашей сетке) — это размер автоматически. А поскольку Сетка (и Контейнер, и Раздел) — поскольку ни один из них не имеет установленной высоты, ОДИН вариант — просто установить высоту нашей Сетки. Давайте выберем что-то вроде 800 пикселей, но мы ВСЕГДА можем изменить это позже.

Но сейчас это НЕМНОГО непоследовательно — эти изображения имеют разное соотношение сторон; все они выровнены по левому верхнему углу каждой ячейки. .. давайте начнем КОНТРОЛИРОВАТЬ это. Выбрав нашу GRID, давайте рассмотрим наши варианты здесь. Мы можем ВЫРАВНИТЬ … или оправдать любой из элементов ДЕТИ внутри сетки.

Сейчас. В частности, при использовании ИЗОБРАЖЕНИЙ иногда дизайнеры хотят, чтобы подобные изображения соответствовали более единообразию (чтобы они имели одинаковую высоту строк и одинаковое соотношение сторон).

И отличный способ сделать это — fit (подгонка объекта). Это 100% волшебство. И это РАБОТАЕТ (большую часть времени).

Сейчас. Перед съемкой мы предварительно применили один и тот же класс к каждому из этих изображений.Вы можете СКАЗАТЬ … потому что на каждом из изображений буквально написано «Класс, который мы предварительно применили». Если бы мы этого не сделали, мы всегда могли бы добавить класс позже. Но мы СДЕЛАЛИ.

Итак. Равномерно подогнать изображения? Нам нужно сделать только ДВЕ вещи: (1) мы устанавливаем размеры (мы устанавливаем 100% ширину … и 100% высоту). И (2) мы ИСПОЛЬЗУЕМ объектное соответствие. (Все это мы делаем в КЛАССЕ, примененном к изображениям). Мы установим FIT … на Cover.

И вот так, все объекты ВМЕСТЕНЫ внутри своих ячеек.И обратите внимание, насколько ровная высота рядов.

Сейчас. КАК СЕЙЧАС изменяется размер этой сетки? Давайте вернемся на мгновение назад, потому что минуту назад мы установили высоту 800 пикселей. Что произойдет, если мы УДАЛИТЬ эту высоту на СЕТКЕ? Он идет в ноль?

Почти. На самом деле, если вы присмотритесь, у него все еще есть ЗАЗОР (пространство между рядами). Но поскольку мы ОПРЕДЕЛИЛИ высоту КАЖДОГО изображения равной 100%, они будут только такими же высокими, как сами РЯДЫ. У которых нет роста.Вот почему все это рухнуло. Так. Если мы вернем номер? (Если мы зададим сетке высоту?) Она изменится соответственно.

Конечно, синее свойство помечено как ПОВОРОТНО синим, потому что мы что-то изменили в этом классе. И, как мы знаем, метки свойств AMBER показывают, что значение этого класса исходит из другого места. А как насчет РОЗОВЫХ этикеток?

Давайте просто выберем ОДНО из этих изображений и РАЗМЕСТЕМ его (мы захватываем угол . .. щелкаем и перетаскиваем … чтобы охватить). Таким образом, вместо ОДНОЙ ячейки в нашей сетке она охватывает НЕСКОЛЬКО ячеек.И мы видим это на панели «Стиль»: мы видим, СКОЛЬКО столбцов и сколько строк он охватывает. И ЭТА информация хранится в ЭЛЕМЕНТЕ. Это то, что означают розовые метки — это НЕ применяется ко всему классу, который мы предварительно применили ранее и называемому «классом, который мы предварительно применили» — это ТОЛЬКО влияет на ВЫБРАННЫЙ элемент.

Это автоматическое позиционирование с использованием сетки изображений. А как насчет ручного позиционирования и OVERLAP? Чтобы пройти через ЭТО, давайте создадим этот раздел героев. Но чтобы ДОПОЛНИТЬСЯ, давайте сначала сделаем раздел нашего героя параллельным (мы поговорим о ПОЧЕМУ чуть позже).

Для этого мы просто перетащим элемент раздела (перетащив его прямо в тело страницы). И мы установим высоту (давайте установим минимальную высоту 70vh — таким образом, это 70% высоты области просмотра).

И все, что нам нужно сделать, чтобы сделать это бок о бок? Просто установите Раздел . .. на СЕТЬ. (Две колонки … теперь мы можем построить наши рядом.)

Итак, давайте начнем с размещения изображения слева. Давайте перейдем на панель Assets и перетащим нужное изображение слева (поместив его прямо в раздел Grid).И по умолчанию (как мы знаем) он находится в ПЕРВОЙ доступной ячейке (вверху слева). И мы хотим, чтобы изображение занимало все доступное пространство.

Ну, к счастью, мы только что освежили объект FIT. И, как мы делали раньше, мы делаем ДВЕ вещи, чтобы все работало идеально. Мы можем (1) добавить наши размеры (установить ширину и высоту нашего изображения на 100%) … и (2) мы можем установить для FIT значение Cover. (И теперь наше ИЗОБРАЖЕНИЕ … ПОКРЫВАЕТ первую ячейку.)

Но это не то, что мы сказали, что построим.

Выделив изображение, давайте рассмотрим его.(Мы хотим щелкнуть и перетащить этот элемент через обе ячейки в левом столбце.) Вот и все. Опять же, охват ТАК прост. Хотите охватить две ТОП-клетки? Щелкните и перетащите . .. и он растянут. Хотите вернуть? Поверните его обратно.

Пролет. Это слово звучит страннее, чем больше вы его произносите.

Это наша левая сторона бок о бок. А как насчет правильного? Итак, вот где мы вернемся к нашему волшебному блоку Div. Мы перетащим блок div прямо в сетку, и его можно будет разместить в следующей доступной ячейке.Чтобы охватить это? Мы просто охватим это. И это бок о бок.

Если мы хотим поместить внутри заголовок? Давайте продемонстрируем НЕПРАВИЛЬНЫЙ способ сделать это. Перетащите заголовок … сюда вправо? Отпустить? Это … НЕ то, что мы хотели. Помните: перетаскивание чего-либо в сетку ОТЛИЧАЕТСЯ от перетаскивания чего-либо в блок Div ВНУТРИ сетки.

Итак, чтобы убедиться, что мы все поняли правильно, давайте отменим … и попробуем это снова, но на этот раз давайте удержим Command в macOS или Control в Windows … и просто перетащим заголовок в блок Div.Мы можем проверить это в навигаторе. (Заголовок находится в блоке div … который находится в сетке. )

Давайте сделаем то же самое с абзацем — на этот раз мы можем перетащить абзац ВПРАВО в САМОМ навигаторе (прямо под заголовком).

И, наконец, добавим кнопки. На этот раз (и поскольку у нас выработалась привычка показывать РАЗНЫЕ способы добавления вещей) … не снимая выделения с абзаца, мы можем добавить что-то ПРАВИЛЬНО после него. Мы воспользуемся функцией быстрого поиска.

Это можно сделать, нажав Command + E (или Control + E в Windows) и начав вводить кнопку.И это не просто элементы (это даже другие макеты, которые мы разработали и сохранили). Как только мы его выберем? Ставится сразу после абзаца.

СЕЙЧАС. Как нам центрировать этот материал по вертикали? Пару способов. Мы можем выбрать сетку САМ. И если мы хотим, чтобы дети выровнялись по ЦЕНТРУ … мы просто … выровнялись по центру.

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

А если мы снова выберем нашу сетку и перейдем в EDIT? Мы можем отрегулировать или даже УДАЛИТЬ разрыв (просто установите его на НУЛЬ) — теперь это действительно 50/50 разделения изображения. А для нашего контента справа? Мы можем ИСПОЛЬЗОВАТЬ наш блок Div (кстати, назовем его чем-то вроде «Контент героя», чтобы все было организовано).

Но подождите минутку. Этот раздел называется РУЧНОЙ позицией. И пока … все использует автоматическое позиционирование. (Мы ЗАКРЫЛИ пролеты, но не использовали положение ВРУЧНУЮ на этом макете).Так. В чем наша ЦЕЛЬ? Наша цель … разместить контент нашего героя в правой нижней ячейке. Как мы это делаем?

Ну … мы просто установили наше изображение слева в ручное положение … и мы установили наш блок div на ВПРАВО в ручное положение. И сейчас? Мы можем выбрать и РАСПРОСТРАНИТЬ наше изображение, чтобы оно занимало все ЧЕТЫРЕ ячейки. А если мы хотим, чтобы наш волшебный блок Div Flexbox располагался в правом нижнем углу? Мы растягиваем его ВНИЗ, чтобы он занял правую нижнюю ячейку. Итак, теперь у нас есть ОСНОВНОЕ перекрытие.

Это потрясающе? Еще нет.Здесь пара вещей: (1) нам нужно сделать фон более не ужасным. Итак, в нашем блоке Div (блок содержимого Hero) мы можем добавить цвет фона. Но (2) мы должны войти и выяснить, что происходит с высотой строки. Потому что вы можете заметить, что HEIGHT второй строки больше не HALF — потому что мы добавили высоту CONTENT к нижней строке. Можно ли установить для каждой строки 1 FR? Можем ли мы использовать дробные единицы на обоих? Ну да. Фактически, это по-прежнему уважает содержимое внутри, но дает нам больше ровных строк.Но мы также можем сделать нижнюю строку Авто. Это будет означать, что РАЗМЕР нижней строки определяется ТОЛЬКО содержимым внутри. И когда мы это сделаем, теперь мы можем добавить передышку, добавив PADDING (просто добавьте немного отступов в блок содержимого Hero).

Но это РУЧНОЕ позиционирование и перекрытие. А как насчет многоразовых макетов? Эта часть проходит довольно быстро. Потому что вот такой раздел. Придадим ему высоту (допустим, 750 пикселей). А давайте превратим его в сетку. Но на этот раз давайте настроим наш макет ВНУТРИ сетки.И независимо от того, как мы НАСТРАИВАЕМ нашу сетку … мы можем определять области сетки (мы просто щелкаем маленький плюс, чтобы начать определение области сетки). И это позволяет нам определять РЕГИОНЫ нашей сетки, которые могут содержать контент (другими словами, мы определяем отдельные ЧАСТИ макета). Но ПРИЧИНА, по которой это важно, заключается в том, что мы можем повторно ИСПОЛЬЗОВАТЬ эти макеты в других частях нашего проекта.

Но вот главное. Этот макет? Это часть КЛАССА. Фактически, мы можем переименовать этот класс в «Пример макета» (есть более умные варианты)…и мы можем применить это к ДРУГОЙ элемент. Так что давайте добавим ДРУГОЙ раздел под этим (конечно, вы можете добавить его на ЛЮБУЮ страницу проекта). А что мы замечаем? Ну пока ничего. Мы должны применить класс макета «Пример».

Но СЕЙЧАС что мы замечаем? Его макет не просто следует тем же ПРАВИЛАМ, но еще и . .. он пустой. Что, если мы добавим ДРУГОЕ в этот макет? (Это ВСЕ просто блоки div с некоторыми вещами внутри — опять же, мы используем простые старые блоки div, которые мы иногда называем «волшебными», чтобы служить маленькими КОНТЕЙНЕРАМИ — контейнерами, которые мы помещаем в ячейки сетки.) А что будет, если мы отредактируем нашу сетку? Это уникально? Нет. ПОТОМУ ЧТО это многократно используемый макет, мы можем определять наши области и даже ПЕРЕФИГУРИРОВАТЬ наши области постфактум. И макет на протяжении всего проекта меняется.

Дело больше практически? Мы можем использовать ОБЛАСТИ для определения целых макетов. Это означает, что изменение ЛЮБОЙ ОДНОЙ ОБЛАСТИ повлияет на ВСЕ гриды, использующие этот класс. Но ЭТО ТАКИЕ области шаблона сетки.

Давайте закончим разговор об адаптивном дизайне. Сетки реагируют ПО УМОЛЧАНИЮ. ПОТОМУ ЧТО ширина каждого столбца обычно определяется FR, обычно соблюдаются эти пропорции и содержимое внутри.И по мере того, как браузер становится уже, все соответственно масштабируется.

А если вы хотите что-то изменить в другом представлении? Хотите создать дизайн для разных устройств? Мы можем это изменить. Даже если мы изменим количество столбцов и установим для дочерних элементов сетки значение auto? (Если дочерние элементы сетки позиционируются автоматически?) Они будут переноситься в соответствии с вашими ожиданиями. Вернуться на рабочий стол? Все как было.

Это потому, что изменения идут каскадом ОТ базовой точки останова, то есть когда вы меняете что-то на рабочем столе, это влияет на представления на планшетах и ​​мобильных устройствах.А то, что вы добавляете или изменяете на планшете, влияет на мобильные устройства. (Здесь есть закономерность.) Изменения в мобильной ориентации влияют на портретную ориентацию мобильных устройств. И когда мы опускаемся по разным представлениям, изменения затрагивают только устройства меньшего размера.

Однако вы заметите, что если у вас есть что-то РУЧНОЕ? (Если что-то установлено в положение вручную?) Он может застрять в этом случае, если вы не СКАЗАТЬ ему, что вы хотите, например, на меньшей точке останова. Даже если вы удалите столбец, если что-то было помещено туда вручную, вы должны либо ВРУЧНУЮ поместить его в новый столбец, либо установить его положение на авто.

Сейчас. Одно замечание о ручном позиционировании: если вы ВИЗУАЛЬНО перемещаете элемент на холсте (если вы перемещаете его по сетке)? Это НЕ влияет на фактический порядок документов. Почему это важно? Что ж, если вы используете табуляцию или программу чтения с экрана, такую ​​как VoiceOver, по умолчанию она будет следовать тому порядку, который вы видите в NAVIGATOR (порядок документов). Выбрав ЭТОТ элемент, обратите внимание, что его положение в навигаторе НЕ изменяется, даже если мы перемещаем его, используя положение вручную (кстати, это также может применяться к областям сетки).И это ВАЖНО иметь в виду, когда вы ОРГАНИЗУЕТЕ контент в сетке: убедитесь, что ПОРЯДОК (способ, которым вы хотите, чтобы кто-то интерпретировал ваш контент) — убедитесь, что он установлен в навигаторе, ЗАТЕМ внесите необходимые визуальные корректировки. Это не только ЛОГИЧНО, правильно и эффективно, но и является шагом в правильном направлении для разработки более доступных веб-сайтов.

Но это обзор адаптивного проектирования с использованием CSS-сетки.

Итак. Два важных вывода: (1) сетки служат НАПРАВЛЯЮЩИМИ (удаление строки или столбца не приводит к удалению содержимого внутри.И (2) ячейки сетки обычно содержат только ОДНУ вещь за раз. Таким образом, размещение DIV BLOCK внутри ячейки открывает SUPERPOWERS … и позволяет нам помещать другие вещи в этот Div.

Итак. Давайте сделаем краткий обзор Grid. Мы можем добавить сетку, как любой другой элемент. Мы можем помещать предметы в сетку, и они размещаются автоматически. Они заполнят пустое пространство … если, конечно, вы не установите что-то вручную, и в этом случае вы можете заставить ребенка делать все, что захотите. Как воспитание детей. Только не совсем.

Мы можем охватывать и накладывать друг на друга вещи … мы можем создавать многоразовые макеты, которые, когда мы ПРИМЕНЯЕМ этот класс к другим вещам, этот макет переносится НАВЕРХ. И мы можем разрабатывать адаптивно (используя макет сетки, который может ОТЛИЧНО работать на рабочем столе, но, возможно, удаляя некоторые столбцы в меньших представлениях).

Сейчас. Мы охватываем гораздо больше этого … например, автоматическое подгонку, плотную настройку в сетках, проектирование для БОЛЬШИХ точек останова, когда использовать flexbox, а когда использовать GRID — все это находится в Университете Webflow.Так что проверьте это, если вы еще этого не сделали.

Но это обзор сетки … в Webflow.

Настройка базовой сетки — создание макетов веб-страниц с помощью CSS

https://vimeo.com/293172801

Чтобы создать макеты с использованием CSS Grid , вам нужно всего лишь добавить одну строку кода к элементу, где вы хотите создать сетку!

Тип отображения сетки обычно добавляется к элементам контейнера, то есть к элементу, содержащему другие элементы. Например, это может быть раздел или div. Представим, что у нас есть div с классом «контейнер»:

  .container {
    дисплей: сетка;
}  

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

HTML

  

    
 1 
    
 2 
    
 3 
    
 4 
    
 5 
    
 6 
    
 7 
    
 8 
  

У нас есть div под названием «container», затем мы создали 8 вложенных div.Теперь давайте поместим разные цвета фона для каждого вложенного div.

CSS

  * {
    семейство шрифтов: Helvetica;
    размер шрифта: 1. 4em;
    цвет белый;
    выравнивание текста: центр;
}

.container div: nth-child (1), div: nth-child (6) {
    цвет фона: # B8336A;
}

.container div: nth-child (2), div: nth-child (7) {
    цвет фона: # 726DA8;
}

.container div: nth-child (3), div: nth-child (8) {
    цвет фона: # 7D8CC4;
}

.container div: nth-child (4) {
    цвет фона: # A0D2DB;
}

.container div: nth-child (5) {
    цвет фона: # C490D1;
}  

Обратите внимание, как я использовал nth-child? Вместо того, чтобы давать каждому вложенному div отдельное имя класса, что было бы действительно трудоемким, использование nth-child позволяет нам просто указать , какой вложенный div мы хотим изменить. В нашем коде мы:

• указали наш контейнерный div ( .container )

• , затем назвал вложенный элемент (в данном случае div )

• добавил : nth-child ()

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

Другими словами, .container div: nth-child (5) относится к 5-му вложенному div в нашем контейнере div.

Вы можете узнать больше о nth-child () на сайте W3schools.com.

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

HTML

  

    
 1 
    
 2 
    
 3 
    
 4 
    
 5 
    
 6 
    
 7 
    
 8 
  

CSS

  * {
    семейство шрифтов: Helvetica;
    размер шрифта: 1. 4em;
    цвет белый;
    выравнивание текста: центр;
}

.container div: nth-child (1), div: nth-child (6) {
    цвет фона: # B8336A;
}

.container div: nth-child (2), div: nth-child (7) {
    цвет фона: # 726DA8;
}

.container div: nth-child (3), div: nth-child (8) {
    цвет фона: # 7D8CC4;
}

.container div: nth-child (4) {
    цвет фона: # A0D2DB;
}

.container div: nth-child (5) {
    цвет фона: # C490D1;
}  

Настройка базовой сетки

Первым шагом для использования CSS Grid является установка свойства отображения элемента контейнера на grid:

 .container {
    дисплей: сетка;
}  

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

Подумайте, когда вы настраиваете электронную таблицу или таблицу. Вы часто думаете о том, сколько столбцов и строк вам понадобится для ваших данных, например: «Мне нужно 2 столбца, один для дат и один для долларовых сумм. Мне нужно 25 строк, потому что нужно добавить 25 расходов». Здесь вам нужно будет считать точно так же по столбцам и строкам! Хорошей новостью является то, что вы можете экспериментировать с разными столбцами, строками и шириной, чтобы найти подходящий вам результат макета.

Задайте столбцы и строки вашей сетки, используя два свойства:

Начнем со столбцов.

Установка столбцов

Давайте установим 3 столбца, используя свойство grid-template-columns . Ширина каждого столбца составляет 20%. 20% относятся к ширине содержащего элемента: в данном случае это контейнер div.

  . container {
    дисплей: сетка;
    сетка-шаблон-столбцы: 20% 20% 20%;
}  

Результат

Обратите внимание, что мы явно не говорим «Я хочу 3 столбца!» Количество столбцов устанавливается в зависимости от того, какую ширину вы указали.Если вы укажете 3 ширины столбца, вы получите 3 столбца. Если вы укажете ширину 10 столбцов, вы получите 10 столбцов.

Установка строк

Теперь давайте добавим строки, используя свойство grid-template-rows :

  .container {
    дисплей: сетка;
    сетка-шаблон-столбцы: 20% 20% 20%;
    сетка-шаблон-строки: 3em 1.6em 1.6em;
}  

Результат

Теперь у нас есть 3 ряда: первый — 3em высотой, второй — 1.6em высотой, третий — 1.6em высотой.

Что, если мы добавим еще блоков?

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

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

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

Теперь, когда я добавляю 3 дополнительных блока (выделены ярко-красным, чтобы помочь вам увидеть разницу), обратите внимание, что четвертая создаваемая строка имеет высоту по умолчанию 3em.Даже если я добавлю достаточно контента, чтобы заполнить 20 новых строк, каждая новая строка будет иметь высоту 3em! Тем не менее, другие строки по-прежнему сохраняют заданную высоту (1,6em).

  .container {
    дисплей: сетка;
    сетка-шаблон-столбцы: 20% 20% 20%;
    сетка-шаблон-строки: 3em 1.6em 1.6em;
    сетка-автоматические строки: 3em;
}  

Результат

Промежутки сетки

Чтобы установить зазоры между элементами сетки, используйте простое свойство под названием grid-gap . Установите одно значение, если вы хотите, чтобы зазор между строками и столбцами был одинаковым.В противном случае установите два значения (первое для промежутка между строками, второе для промежутка между столбцами).

  .container {
    дисплей: сетка;
    сетка-шаблон-столбцы: 20% 20% 20%;
    сетка-автоматические строки: 1.6em;
    сетка-пробел: 10 пикселей;
}  

Результат

Измерения столбцов и строк

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

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

Проценты могут усложняться в сочетании с пропусками сетки. Если у вас есть 2 столбца, каждый с шириной 50%, вы ожидаете, что это займет 100% области просмотра. Однако добавление любого зазора в сетке заставит ваш контейнер выходить за пределы области просмотра. Проценты не пересчитываются с учетом разницы.

Этого можно избежать, используя дробные единицы вместо процентов.

Рассмотрим пример столбца. Ширина столбца «1fr» будет зависеть от ширины содержащего его элемента, как и проценты. Однако вам не нужно много заниматься математикой! Если вы установите 1fr, 3 раза, у вас будет 3 столбца одинаковой ширины:

  . container {
    дисплей: сетка;
    сетка-шаблон-столбцы: 1fr 1fr 1fr;
    сетка-шаблон-строки: 3em 1.6em 1.6em;
    сетка-автоматические строки: 3em;
}  

Результат

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

  .container {
    дисплей: сетка;
    сетка-шаблон-столбцы: 1fr 2fr 1fr;
    сетка-шаблон-строки: 3em 1.6em 1.6em;
    сетка-автоматические строки: 3em;
}  

Результат

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

https://www. codevolve.com/api/v1/publishable_key/2A9CAA3419124E3E8C3F5AFCE5306292?content_id=91f8e5c7-472f-42af-88bc-d38ad1f5443

Изучите CSS Grid за 5 минут

Макеты

Grid имеют фундаментальное значение для дизайна веб-сайтов, а модуль CSS Grid — самый мощный и простой инструмент для его создания.Я лично считаю, что это намного лучше, чем, например, Bootstrap (почему, читайте здесь).

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

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

Я также создал бесплатный курс CSS Grid. Щелкните здесь, чтобы получить полный доступ к
it.

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

А теперь давайте перейдем к делу!

Ваш первый макет сетки

Два основных компонента CSS-сетки — это обертка (родительский) и
элементы (дочерние). Обертка — это фактическая сетка, а элементы — это содержимое внутри сетки.

Вот разметка для упаковки с шестью элементами:

  

  
 1 
  
 2 
  
 3 
  
 4 
  
 5 
  
 6 

  

Чтобы превратить нашу оболочку div в сетку , мы просто даем ей отображение сетки
:

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

Я добавил немного стиля, но это не имеет ничего общего с сеткой CSS.

Столбцы и строки

Чтобы сделать его двумерным, нам нужно определить столбцы и строки. Давайте создадим три столбца и две строки. Мы будем использовать свойства grid-template-row и grid-template-column .

Поскольку мы написали три значения для grid-template-columns , мы получим три столбца. Мы получим две строки, поскольку мы указали два значения для grid-template-rows .

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

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

  .wrapper {
    дисплей: сетка;
    сетка-шаблон-столбцы: 200 пикселей 50 пикселей 100 пикселей;
    сетка-шаблон-строки: 50 пикселей 50 пикселей;
}
  

Попытайтесь понять связь между кодом и макетом.

Вот как это происходит:

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

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

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

  .wrapper {
    дисплей: сетка;
    сетка-шаблон-столбцы: 100 пикселей 100 пикселей 100 пикселей;
    сетка-шаблон-строки: 100 пикселей 100 пикселей 100 пикселей;
}
  

Это приведет к следующему макету:

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

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

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

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

Вот как это будет выглядеть на экране:

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

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

Наконец, я хотел бы показать более простой способ написания синтаксиса выше:

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

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

.item3 {
    сетка-начало-строки: 2;
    конец ряда сетки: 4;
}

.item4 {
    начало столбца сетки: 2;
    конец столбца сетки: 4;
}
  

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

Вот и все!

Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba — самого простого способа научиться программировать. Вам следует посетить наш учебный курс по адаптивному веб-дизайну, если вы хотите научиться создавать современный веб-сайт на профессиональном уровне.

Щелкните здесь, чтобы перейти на курс повышения квалификации.

CSS Grid — Вернулась верстка таблицы. Будьте там и будьте честны. | Веб

Сурма — участник Web Fundamentals

TL; DR

Если вы знакомы с Flexbox, Grid покажется вам знакомым.
Рэйчел Эндрю поддерживает отличные
веб-сайт, посвященный CSS Grid, чтобы помочь вам получить
началось. Сетка теперь доступна в Google Chrome.

Flexbox? Сетка?

За последние несколько лет CSS Flexbox стал широко использоваться и
поддержка браузера выглядит действительно хорошо
(если только вы не один из тех бедняг, которые должны поддерживать IE9 и ниже).Flexbox упростил множество сложных задач компоновки, например, равноудаленное расстояние
между элементами, макеты сверху вниз или Святой Грааль волшебства CSS:
вертикальное центрирование.

Но, увы, у экранов обычно есть второе измерение, о котором нам нужно беспокоиться.
К сожалению, вы не сможете самостоятельно подобрать размер элементов.
и вертикальный и горизонтальный ритм, просто используя только flexbox. Это
где на помощь приходит CSS Grid.

CSS Grid находился в разработке и был отмечен флагом в большинстве браузеров более
5 лет и дополнительное время было потрачено на совместимость, чтобы избежать
глючный запуск, как у Flexbox. Итак, если вы используете сетку для реализации макета в
Chrome, скорее всего, вы получите тот же результат в Firefox и Safari. На
на момент написания, реализация Grid в Microsoft Edge устарела (
то же, что уже было в IE11.) и обновление
«на рассмотрении».

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

Определение сетки

Для ознакомления с отдельными свойствами Grid настоятельно рекомендую
Сетка на примере Рэйчел Эндрю или приемы CSS »
Шпаргалка. если ты
знакомы с Flexbox, многие свойства и их значение должны быть
привычный.

Давайте посмотрим на стандартную сетку из 12 столбцов. Классическая 12-колоночная
макет популярен, так как число 12 делится на 2, 3, 4 и 6, и
поэтому полезно для многих дизайнов. Реализуем такой макет:

Начнем с кода разметки:

В нашей таблице стилей мы начинаем с расширения нашего тела , чтобы он покрыл все
окно просмотра и превращение его в контейнер сетки :

  html, body {
  ширина: 100ввт;
  мин-высота: 100vh;
  маржа: 0;
  отступ: 0;
}
тело {
  дисплей: сетка;
}
  

Теперь мы используем CSS Grid. Ура!

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

Верхний и нижний колонтитулы имеют переменную ширину, а содержимое изменяется в
оба измерения. Навигация также будет изменяться в обоих измерениях, но мы
собираюсь наложить на него минимальную ширину 200 пикселей.(Почему? Чтобы показать особенности
CSS Grid, конечно.)

В CSS Grid набор столбцов и строк называется дорожек . Давайте начнем с
определяя наш первый набор треков, строк:

  body {
  дисплей: сетка;
  сетка-шаблон-строки: 150 пикселей автоматически 100 пикселей;
}
  

grid-template-rows принимает последовательность размеров, которые определяют отдельные строки.
В этом случае мы даем первой строке высоту 150 пикселей, а последней — 100 пикселей.
В среднем ряду установлено значение auto , что означает, что он будет адаптироваться к необходимому
высота для размещения элементов сетки (дочерние элементы контейнера сетки ) в
этот ряд.Поскольку наше тело растянуто на всю область просмотра, дорожка
содержащий контент (желтый на картинке выше), по крайней мере, заполнит все
доступное пространство, но будет увеличиваться (и заставлять документ прокручиваться), если это
необходимо.

Для столбцов мы хотим применить более динамичный подход: нам нужны и навигация, и
контент будет расти (и сжиматься), но мы хотим, чтобы навигация никогда не сжималась ниже 200 пикселей
и мы хотим, чтобы контент был больше, чем nav. В Flexbox мы использовали бы flex-grow и
flex-shrink, но в Grid все немного иначе:

  body {
  дисплей: сетка;
  сетка-шаблон-строки: 150 пикселей автоматически 100 пикселей;
  сетка-шаблон-столбцы: minmax (200px, 3fr) 9fr;
}
  

Мы определяем 2 столбца. Первый столбец определяется с помощью minmax ()
функция, которая принимает 2 значения: минимальный и максимальный размер этой дорожки.
(Это как min-width и max-width в одном.) Минимальная ширина, как мы
обсуждалось ранее, 200 пикселей. Максимальная ширина — 3fr . fr зависит от сетки
блок, позволяющий распределить доступное пространство между элементами сетки.
( fr , вероятно, означает «дробная единица», но вскоре может также означать «свободную единицу».)
Наши значения здесь означают, что оба столбца будут расти, чтобы заполнить экран, но
столбец содержимого всегда будет в 3 раза шире столбца навигации (при условии, что
столбец навигации остается шире 200 пикселей).

Хотя размещение наших элементов сетки еще не правильно, размер
строки и столбцы ведут себя правильно и дают поведение, к которому мы стремились:

Размещение предметов

Одна из самых мощных функций Grid — возможность размещать предметы без
Что касается порядка DOM. (Хотя, поскольку программы чтения с экрана перемещаются по DOM,
мы настоятельно рекомендуем вам для правильного доступа помнить о том, как
вы меняете порядок элементов.) Если размещение вручную не выполняется, элементы размещаются
в сетке в порядке DOM слева направо и сверху вниз. Каждый элемент
занимает одну ячейку . Порядок заполнения сетки можно изменить с помощью
сетка-автопоток .

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

  заголовок {
  сетка-столбец: 1/3;
}
nav {
  сетка-ряд: 2 / пролет 2;
}
  

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

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

  body {
  дисплей: сетка;
  сетка-шаблон-строки: 150 пикселей [начало навигации] автоматически 100 пикселей [конец навигации];
  столбцы-шаблон-сетки: [начало-заголовка] minmax (200 пикселей, 3fr) 9fr [конец-заголовка];
}
header {
  столбец сетки: начало заголовка / конец заголовка;
}
nav {
  сетка-строка: начало навигации / конец навигации;
}
  

Приведенный выше код даст тот же макет, что и предыдущий.

Еще более мощной является функция именования целых регионов в вашей сетке:

  body {
  дисплей: сетка;
  сетка-шаблон-строки: 150 пикселей автоматически 100 пикселей;
  сетка-шаблон-столбцы: minmax (200px, 3fr) 9fr;
  grid-template-area: "заголовок"
                      "навигационное содержимое"
                      "нижний колонтитул навигации";
}
header {
  grid-area: header;
}
nav {
  область сетки: nav;
}
  

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

Есть еще?

Да, да, есть, слишком много, чтобы осветить в одном сообщении.
Рэйчел Эндрю, которая также
GDE, приглашенный
Эксперт в рабочей группе CSS и работает с ними с самого начала
чтобы убедиться, что Grid упрощает веб-дизайн.Она даже написала
книга об этом. Ее
веб-сайт Grid By Example — ценный
ресурс для знакомства с Grid. Многие думают, что Grid — это
революционный
шаг для веб-дизайна, и теперь он включен по умолчанию в Chrome, поэтому вы можете начать
используя это сегодня.

Как использовать и обнаруживать возможности CSS grid masonry layout

Совершенно новые CSS masonry Layout функциональные возможности, поставляемые с CSS grid, в конечном итоге появятся в браузерах.

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

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

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

Например, область для CSS охватывает три строки с использованием строки сетки : auto / span 3 . Подобно большинству ручных настроек, это далеко не идеально.

  .area-css {
  сетка-ряд: авто / промежуток 3;
}
  

В этих ситуациях сетка кладки вступает в игру и сияет.Это позволяет максимально эффективно использовать все доступное пространство без ручной регулировки. 🎉

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

Сетка каменной кладки основана на CSS, аналогично фрагменту, который вы найдете в документации MDN для сетки CSS с каменной кладкой.

  .container {
  дисплей: сетка;
  разрыв: 10 пикселей;
  сетка-шаблон-столбцы: повтор (автозаполнение, minmax (120 пикселей, 1fr));
  сетка-шаблон-ряды: кладка;
}
  

Приведенный выше код ведет к сетке, подобной моей и приведенной ниже.

CSS masonry еще не поддерживает кроссбраузерность

Перво-наперво. На момент написания кроссбраузерная поддержка макета сетки каменной кладки. Когда вы посмотрите на caniuse.com макет каменной кладки, вы обнаружите, что браузера нет вообще. Ни один браузер не поставляет макеты каменной кладки, и только Firefox спешит вперед с реализацией за флагом.

Для начала откройте Firefox и откройте about: config (вы можете ввести его в адресную строку) и включите логический флаг для макета .css.grid-template-masonry-value. включено .

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

Обнаружение новых функций CSS, таких как разметка каменной сетки

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

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

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

Обнаружение функций в CSS

Чтобы проверить, поддерживает ли браузер новую функцию CSS, используйте запрос функции @supports .Используйте запрос функции с объявлением CSS, которое вы хотите протестировать, и примените свой CSS, если браузер поддерживает или не поддерживает новую функцию CSS.

Я добавил новый класс ( list-masonry ) в свою базу кода, который должен применять макет masonry, если браузер поддерживает его.

 
@supports (grid-template-rows: кладка) {
  .list-masonry {
    стиль списка: нет;
    маржа: 0;
    отступ: 0;
    дисплей: сетка;
    сетка-разрыв: var (- сетка-разрыв);
    столбцы-шаблон-сетки: повтор (автозаполнение, minmax (16em, 1fr));
    сетка-шаблон-ряды: кладка;
  }
}
  

Кроме того, чтобы скрыть и показать сообщение о праздновании, я добавил новый служебный класс.Класс работает аналогично классам, таким как hide-on-small , которые скрывают элементы в зависимости от размеров области просмотра.

Отличие от классов, зависящих от области просмотра, заключается в том, что show-if-supports-masonry не полагается на медиа-запрос, а на запрос функции.

show-if-supports-masonry изначально устанавливает свойство display элемента на none . Если браузер поддерживает макет кирпичной кладки, запрос функции перезаписывает «скрытый CSS» с отображением : блок .

 
.show-if-supports-masonry {
  дисплей: нет;
}


@supports (grid-template-rows: кладка) {
  .show-if-supports-masonry {
    дисплей: блок;
  }
}
  

В сочетании со следующим HTML-кодом я могу показать праздничное сообщение в зависимости от поддержки функции браузера.

  

   🎉 Похоже, ваш браузер поддерживает сетку кладки ... Крутые бобы! 🎉

  

Обнаружение функций в JavaScript

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

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

Небольшая хитрость: Вы можете добавить конфетти на свой сайт без каких-либо инструментов, используя скайпак. Skypack — это CDN для пакетов JavaScript, которые предоставляют модули ES. Чтобы добавить канон конфетти на свой сайт, все, что вам нужно сделать, это:

• добавить

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

  Сегодня я люблю Интернет и его возможности!

  Это было для реализации CSS grid Masonry на моем сайте. Не поддерживающие браузеры показывают сетку с ячейками, занимающими несколько столбцов. Для моего сайта этого достаточно!

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

  И вся эта функциональность определяется с помощью @supports в CSS или CSS. supports в JavaScript. 🎉

  Дополнительные ресурсы

  CSS Grid в IE11: это возможно! И не так сложно, как вы думаете

  Да, это возможно! Но вам решать, что поддерживается, а что нет. Я сэкономлю вам исследование и дам вам все, что я нашел в CSS Grid в IE11.

  Если вы посмотрите на caniuse, IE11 частично поддерживает сетку CSS.Но что это значит? В основном поддерживается все из этой версии сетки ... иначе: ничего, на что вы можете положиться, если вы привыкли к современной сетке.

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

  Не существует решения, которое бы заполняло все за вас. Вам все еще нужно знать ограничения сетки в IE11 и знать, какие ручные полифиллы вам нужно будет написать, если вы хотите использовать такие методы, как repeat () или реквизиты, такие как grid-gap . Вам также необходимо явно указать каждому элементу сетки, где он должен находиться в сетке, то есть: вам нужно добавить класс к каждому элементу и указать ему, где начать, конец / диапазон. (Да, это настоящая боль, но вам нужна сетка в IE11 или нет?)

  Хорошие новости! повтор поддерживается! Это просто синтаксически другое. Вместо grid-template-columnds: repeat (6, 1fr 100px) вам придется вручную записать -ms-grid-columns: (1fr 100px) [6] для IE11.

  охватывать
  

  span как в grid-column: span 1 / -1 не поддерживается.

  Позиционирование ребенка
  

  Позиционирование элементов сетки. Я упоминал об этом ранее, но важно повторить, чтобы вы не рвали волосы после всего, что я сказал. Элементы сетки должны быть явно «помещены» в сетку. И, к сожалению, вы не можете выбрать каждого ребенка с : first-child или : last-child и так далее. Вы должны создать уникальные классы для каждого ребенка и указать им, где начать и где закончить в вашей сетке.

  Знайте свою странность IE11
  

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

  сетка
  

  grid-gap , тоже моя любимая функция CSS-сетки, не поддерживает IE11. Но вы справитесь, если сделаете дополнительные столбцы / строки, которые будут действовать как ваши пробелы.

  все авто
  

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

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

  Но minmax () будет работать! Только не с auto-fill или auto-fit .

  стенография
  

  Сокращенные реквизиты, такие как fit-content () и grid , не будут работать, но они будут работать, если вы напишете их от руки.

  встроенные элементы
  

  Если какие-либо из ваших элементов сетки являются встроенными элементами , они не будут учитывать сетку. AKA ваш охватывает теги и a .Но большинство людей не осознают, что какие-либо новые элементы HTML5 не будут распознаваться IE11, и он будет рассматривать их как , охватывающий с, и вставлять их. Поэтому вам нужно явно отобразить их как clock , например main , header , footer и т. Д.

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

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

  Не любите заполнять код вручную? Круто, я тоже. Попробуйте эти библиотеки ...

  Автоприставка
  

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

  Почти все ... но есть еще некоторые вещи, которые нужно полифиллировать вручную.

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

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

  Стилизованные компоненты
  

  Я работаю над устаревшей кодовой базой, в которой используются комбинированный стилус и стилизованные компоненты. Мы пытаемся переместить все в стилизованные компоненты, поэтому сначала я поискал там полифилы. Autoprefixer не будет работать, потому что он компилируется во время сборки, а стилизованные компоненты находятся во время выполнения.Оставляя меня полагаться исключительно на стилизованные компоненты для нативного решения, которое, к сожалению, использует для компиляции стили ... и не имеет префикса для сетки CSS ... пока? ...

  Я бы сказал «пока», но вопрос открыт уже 2 года без обновлений. Я большой поклонник стилизованных компонентов, так что это было большим разочарованием.

  Стилус
  

  Вот и искал решение в стилусе. К счастью, мы используем kouto-swiss для нашей компиляции (и множества других интересных функций стилуса), которые включают полифиллы для сетки в IE11... почти все из них. Мне пришлось провести некоторое тестирование, чтобы увидеть, что он на самом деле делает, потому что в документации утверждалось, что у него есть полифилы для всего, включая вещи, которые не поддерживаются в IE11, например grid-auto-flow .

  • сетка
  • сетка
  • сетка-автоколонны
  • сетка-автопоток
  • сетка-автопозиция
  • автоматическая сетка
  • сетка-столб
  • сетка-столбец-конец
  • начало столбца сетки
  • сетка рядная
  • конец ряда сетки
  • сетка-ряд-начало
  • сетка-шаблон
  • сетка-шаблон-области
  • сетка-шаблон-столбец
  • сетка-шаблон-строки

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

  No related posts.