user

Авторизация

Добро пожаловать!

Регистрация

Graf

Кодинг

CSS Grid примеры [Часть 1]

Содержание

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

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

 Чтобы определить сетку, используйте display:grid или display:inline-grid на родительском элементе. Затем вы можете создать сетку, используя свойства grid-template-columns и grid-template-rows

 Я использую это grid-gap свойство, чтобы создать зазор между столбцами и строками в 10 пикселей. Это свойство является сокращением для grid-column-gap и grid-row-gap поэтому вы можете установить эти значения индивидуально.

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

Размещение на основе строк

 Используя Grid, который я определил в примере 1, я позиционирую элементы в своей разметке (шесть div с классом box и классами от a до f), используя свойства размещения на основе строк. Этот пример более подробный, чем нужно, для демонстрации свойств. На самом деле, если элемент будет охватывать только одну дорожку сетки, вы можете опустить -end значение.

Сокращение размещения на основе строк — grid-row и grid-column

 Мы можем добиться того же результата, что и в примере 2, используя сокращенный синтаксис, объявляющий начальное и конечное значения одновременно. Значения разделены символом a, /и опять же было бы допустимо опустить /и конечное значение, поскольку мы охватываем только одну дорожку.

Сокращение размещения на основе строк — grid-area

 Мы можем добиться того же результата, что и в примерах 2 и 3, объявив все четыре значения со grid-area свойством. Снова значения разделены символом /. Порядок значений такой row-start/column-start/row-end/column-end.

Линейное размещение, охватывающее дорожки

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

 Здесь я использую сокращение grid-column и grid-row и опускаю конечное значение для любых элементов, которые охватывают одну строку или дорожку столбца.

Линейное размещение, охватывающее треки с помощью ключевого слова span

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

Именованные линии размещения на основе строк

 Мы можем называть строки, а не нацеливать их по номеру. Назовите строку в скобках. В приведенном ниже коде вы можете видеть, что я называю самую первую строку столбца, col1-start а затем идет 100-пиксельная дорожка первого столбца. Назвав линии, вы можете использовать имена, а не числа.

 У вас всегда есть номера строк, которые можно использовать, даже если вы называете некоторые или все свои линии.

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

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

 Я сделал сетку немного большего размера и назвал все линии сетки перед дорожками содержимого с помощью, col а все линии перед дорожками строк с row. Затем я могу начать с определенной строки столбца, используя col <line number> и охватывая, сказав span <number of lines>.

Использование повторяющихся обозначений

 В примере 8 мы повторили те же определения, чтобы создать нашу сетку с именованными линиями. Мы могли бы сэкономить время на наборе текста, используя repeatнотацию. Значения для повтора — это количество раз, которое вы хотите, чтобы выражение повторялось, а затем выражение.

Явная и неявная сетка

 Когда мы используем grid-template-columns и grid-template-rows создаем Explicit Grid . Однако, если мы попытаемся разместить элемент за пределами этой сетки, браузер создаст линию или линии неявной сетки, чтобы удерживать этот элемент.

 В приведенном ниже коде я поместил eмежду строками столбца сетки 4 и 5, они не описаны с помощью grid-template-rows, поэтому создается неявная линия сетки 5.

 По умолчанию неявные дорожки сетки, созданные неявными линиями, будут иметь автоматический размер. Однако вы можете изменить размер дорожек с помощью свойств grid-auto-columns и grid-auto-rows. Я установил размер своих автоматических дорожек в 100 пикселей, чтобы они соответствовали остальным дорожкам столбцов в моей сетке.

Определение областей сетки

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

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

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

Очистка не требуется

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

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

Переопределение областей сетки с помощью медиа-запросов

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

Независимость от источника

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

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

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

Наслоение элементов

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

 Без какого-либо свойства z-index он будет отображаться поверх блока D. Однако я могу добавить z-индекс и управлять позицией, которая работает так, как вы ожидаете, если бы вы использовали свойство z-index с позиционированными элементами.

Элемент сетки как новый контекст позиционирования

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

Автоматическое размещение сетки

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

 В этом примере у меня есть набор из 12 коробок. Я использовал nth-child для переключения цвета фона в четных полях, чтобы сделать этот пример понятным. Я объявил сетку и создал строки и столбцы, но не разместил ни одного из дочерних элементов. Как вы можете видеть, все блоки располагаются на сетке, несмотря на то, что им не назначено размещение.

Столбец с автопотоком в сетке

 По умолчанию Grid Auto Flow размещает элементы по строкам, работая вдоль строки до тех пор, пока не останется слотов, а затем переходите к следующей строке. Если строка не объявлена, то будет создана неявная дорожка сетки для хранения элементов.

 Вы можете изменить это поведение, используя grid-auto-flow свойство. Значение по умолчанию равно, rowно вы также можете указать column. Затем элементы будут располагаться столбец за столбцом, при необходимости добавляя новые столбцы.

Автоматическое размещение сетки в сочетании с размещенными элементами

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

 В этом примере я разместил box2 на сетке, а также сделал так, чтобы она охватывала 3 линии сетки. Остальные ящики продолжаем выкладывать как и раньше.

Ключевое слово автозаполнения в повторяющихся определениях дорожек

 В примере 9 мы заявили, что хотим, чтобы наш список дорожек строк повторялся три раза. Спецификация также определяет auto-fill и auto-fit ключевые слова.

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

Вложенная сетка

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

Неявные именованные линии сетки

 При использовании именованных областей неявные именованные линии создаются путем добавления -start и -end к определенной вами именованной области. Их можно использовать так же, как строки, которые вы явно назвали.

Использование порядка

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

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