Что такое свойство grid area
Перейти к содержимому

Что такое свойство grid area

  • автор:

grid-area¶

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

Свойство grid-area является сокращенным свойством для grid-row-start , grid-column-start , grid-row-end и grid-column-end , определяя размер и расположение элемента сетки.

Демо¶

Grid Layout

  • grid
  • grid-area
  • grid-auto-columns
  • grid-auto-flow
  • grid-auto-rows
  • grid-column
  • grid-column-end
  • grid-column-gap
  • grid-column-start
  • grid-gap
  • grid-row
  • grid-row-end
  • grid-row-gap
  • grid-row-start
  • grid-template
  • grid-template-areas
  • grid-template-columns
  • grid-template-rows

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
/* Keyword values */ grid-area: auto; grid-area: auto / auto; grid-area: auto / auto / auto; grid-area: auto / auto / auto / auto; /* values */ grid-area: some-grid-area; grid-area: some-grid-area / another-grid-area; /* && ? values */ grid-area: some-grid-area 4; grid-area: some-grid-area 4 / 2 another-grid-area; /* span && [ || ] values */ grid-area: span 3; grid-area: span 3 / span some-grid-area; grid-area: 2 span / another-grid-area span; /* Global values */ grid-area: inherit; grid-area: initial; grid-area: unset; 

Значения¶

  • grid-row-start: auto
  • grid-column-start: auto
  • grid-row-end: auto
  • grid-column-end: auto

Применяется к элементам сетки

Объектная модель: object.style.gridArea

Спецификации¶

Поддержка браузерами¶

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

Описание и примеры¶

HTML CSS Результат

1 2 3 4 5
div id="grid"> div id="item1">div> div id="item2">div> div id="item3">div> div> 
 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
#grid  display: grid; height: 100px; grid-template: repeat(4, 1fr) / 50px 100px; > #item1  background-color: lime; grid-area: 2 / 2 / auto / span 3; > #item2  background-color: yellow; > #item3  background-color: blue; > 

Пример использования свойства grid-area

См. также¶

grid-area

Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.

/* Ключевые слова в качестве значений */ grid-area: auto; grid-area: auto / auto; grid-area: auto / auto / auto; grid-area: auto / auto / auto / auto; /* значения */ grid-area: some-grid-area; grid-area: some-grid-area / another-grid-area; /* && ? значения */ grid-area: some-grid-area 4; grid-area: some-grid-area 4 / 2 another-grid-area; /* span && [ || ] значения */ grid-area: span 3; grid-area: span 3 / span some-grid-area; grid-area: 2 span / another-grid-area span; /* Global values */ grid-area: inherit; grid-area: initial; grid-area: unset; 

Если заданы четыре значения , то первое значение определяет grid-row-start , второе значение — grid-column-start , третье значение — grid-row-end и четвёртое значение — grid-column-end .

Когда grid-row-end опущено, а grid-row-start в значении , то grid-row-end устанавливается в это значение ; иначе оно устанавливается в значение auto .

Когда grid-column-start опущено, а grid-row-start в значении , все четыре свойства длинной записи устанавливаются в это значение, иначе они устанавливаются в значение auto .

  • grid-row-start : auto
  • grid-column-start (en-US): auto
  • grid-row-end (en-US): auto
  • grid-column-end (en-US): auto
  • grid-row-start : как указано
  • grid-column-start (en-US): как указано
  • grid-row-end (en-US): как указано
  • grid-column-end (en-US): как указано

Синтаксис

Значения

— ключевое слово, говорящее о том, что свойство не вносит никаких изменений в размещение грид-элемента. На элемент действует авторазмещение или размер элемента по умолчанию 1 . (то есть, элемент занимает одну ячейку грид-сетки в заданном направлении)

если есть именованная линия с именем ‘ -start ‘/’ -end ‘, то грид-элемент привязывается к первой из таких линий.

Примечание: Именованные грид-области автоматически генерируют неявные именованные линии с именами подобного формата, поэтому запись grid-area: foo; выберет начальный/конечный край этой именованной грид-области (если, конечно, другая линия с именем foo-start / foo-end не была явно определена раньше).В противном случае, значение расценивается, как если бы число 1 было задано вместе с .

Contributes the nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.If a name is given as a , only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.An value of 0 is invalid.

Formal syntax

grid-area =
[ (en-US) / ] (en-US) (en-US)

CSS Grid понятно для всех

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

Поддержка браузерами

В 2020 году поддержка браузерами достигает 94 %

Grid контейнер

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

  

Header

Navbar

Article

Ads

grid-template-rows — это CSS свойство, которое определяет названия линий и путь размера функции grid rows.

CSS свойство grid-row определяет с какой строки в макете сетки будет начинаться элемент, сколько строк будет занимать элемент, или на какой строке завершится элемент в макете сетки. Является сокращенным свойством для свойств grid-row-start и grid-row-end.

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

Свойство grid-template-areas определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства grid-area.

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

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

.header < grid-area: header; >.nav < grid-area: nav; >.article < grid-area: article; >.ads
Создаем шаблон сайта с CSS Grid:

Изменяем шаблон

Вы можете изменить шаблон просто перераспределив грид-области в grid-template-areas .

Таким образом, если мы сменим на это:

grid-template-areas: "nav header header" "nav article ads"; > 

То в результате получим такой шаблон:

Гриды с медиа запросами

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

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

@media all and (max-width: 575px) < .row < grid-template-areas: "header" "article" "ads" "nav"; grid-template-rows: 80px 1fr 70px 1fr ; grid-template-columns: 1fr; >> 

В результате получим:

Таким образом, все дело состоит в переназначении значений в свойстве grid-template-areas .

Заключение

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

Я вам советую обратить внимание на данную спецификацию и потратить немного своего времени на ее изучение. Поверьте, в будущем вам это точно пригодится и не важно, пишете вы на React, Angular, Vue (вставьте свое). Grid’ы пришли надолго.

Свойство grid-area

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

Синтаксис

Пример

Давайте зададим имена и расположение нашим элементам в гриде:

1
2
3

#elem1 < grid-area: first; >#elem2 < grid-area: second; >#elem3 < grid-area: third; >#parent < display: grid; grid-template-areas: 'third second first'; border: 2px solid #696989; padding: 10px; >#parent > div < padding: 10px; border: 1px solid #696989; >

Смотрите также

  • свойство grid-template-areas ,
    которое задает размещение элементов в гриде

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *