Свойства , которые применяются для контейнера

Встреча 19

Grid

Grid Layout - самая мощная система компоновки из доступных на данный момент в CSS.

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

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

CSS всегда использовался для разметки веб-страниц, но никогда не делал эту работу хорошо. Сначала мы использовали таблицы, потом обтекания (floats), инлайновые блоки (inline-block), но все эти методы по существу являются просто хитростями и опускают много важных возможностей. Flexbox помог, но он предназначен для более простых одномерных макетов, а не для двумерных (Flexbox и Grid хорошо работают вместе).

Немного терминологии

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

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

Контейнер сетки —элемент к которому применяется display: grid. Это прямой родитель для всех элементов сетки. В этом примере container является контейнером.

<div class="container">

<div class="item item-1"></div>

<div class="item item-2"></div>

<div class="item item-3"></div>

</div>

Элемент сетки — дочерние элементы  (прямые потомки) контейнера. Здесь item это элемент сетки, но элемент sub-item нет, потому то он не прямой потомок..

<div class="container">

<div class="item"></div>

<div class="item"> </div>

   <p class="sub-item"></p>

</div>

<div class="item"></div>

</div>

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

 

 

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

 

Ячейка сетки —пространство между линиями двух соседних строк и двух соседних столбцов. Это отдельная "единица измерения" сетки. Вот пример ячейки между линиями строк 1 и 2, линиями колонок 2 и 3.

 

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

 

Свойства Grid

               

Свойства Grid:

Свойства для контейнера 1. display 2. grid-template-columns 3. grid-template-rows 4. grid-template-areas 5. grid-template 6. grid-column-gap 7. grid-row-gap 8. grid-gap 9. justify-items 10. align-items 11. justify-content 12. align-content 13. grid-auto-columns 14. grid-auto-rows 15. grid-auto-flow 16. grid

Свойства для элементов: 1. grid-column-start 2. grid-column-end 3. grid-row-start 4. grid-row-end 5. grid-column 6. grid-row 7. grid-area 8. justify-self 9. align-self

Свойства для элементов

· grid-column-start

· grid-column-end

· grid-row-start

· grid-row-end

· grid-column

· grid-row

· grid-area

· justify-self

· align-self

D isplay d isplay

ООпределяет элемент как контейнер и устанавливает новый контекст форматирования сетки для его содержимого.

Значения:

· grid - формирует сетку как блок;

· inline-grid - формирует сетку как инлайновый блок;

· subgrid - если ваш контейнер это ещё и элемент (вложенная сетка), то вы можете использовать это свойство для обозначения того, чтобы размеры строк/колонок были взяты из родительского элемента, а не определяли собственный;

.container {

display: grid | inline-grid | subgrid;

}

Обратите внимание на то, что column, float, clear и vertical-align не дадут никакого эффекта на контейнере.

grid-template-columns & grid-tempate-rows

Определяютяет колонки и строки сетки с помощью списка значений разделённого разделённых пробелами.

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

Значения:

· <track-size> - может быть фиксированным размером, процентами или частью свободного пространства в сетке (определяется с помощью единицы fr(fraction));

· <line-name> - произвольное имя на ваш выбор;

.container {

grid-template-columns: <track-size>... | <line-name> <track-size>...;

grid-template-rows: <track-size>... | <line-name> <track-size>...;

}

Пример:ы:

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

.container{

grid-template-columns: 40px 50px auto 50px 40px;

grid-template-rows: 25% 100px auto;

}

 

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

Но вы можете называть линии явно. Обратите внимание на синтаксис для их названия:

.container {

grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];

grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];

}

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

.container{

grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];

}

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

.container {

grid-template-columns: repeat(3, 20px [col-start]) 5%;

}

Тоже самое что и:

.container {

grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;

}

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

.container {

grid-template-columns: 1fr 1fr 1fr;

}

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

Grid-template-areas

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

Значения:

· <grid-area-name> - имя области,  заданное с помощью grid-area grid-area;

·. - точка обозначающая пустую ячейку;

· none - области не определены;

.container {

grid-template-areas:

"<grid-area-name> |. | none |..."

"...";

}

Пример:

.item-a {

grid-area: header;

}

.item-b {

grid-area: main;

}

.item-c {

grid-area: sidebar;

}

.item-d {

grid-area: footer;

}

 

.container {

grid-template-columns: 50px 50px 50px 50px;

grid-template-rows: auto;

grid-template-areas:

"header header header header"

"main main. sidebar"

"footer footer footer footer";

}

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

 

Важно!

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

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

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

Grid-templat e

Значения:

· none - устанавливает все три свойства в их начальное значение;

· subgrid - устанавливает grid-template-rows и grid-template-columns в subgrid, и grid-template-areas в его начальное значение;

· <grid-template-rows> / <grid-template-columns> - устанавливает grid-template-columns и grid-template-rows в определённо е значение, соответственно, и устанавливает grid-template-areas в none;

.container {

grid-template: none | subgrid | <grid-template-rows> / <grid-template-column s>;

}

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

.container {

grid-template:

[row1-start] 25px "header header header" [row1-end]

[row2-start] "footer footer footer" 25px [row2-end]

/ auto 50px auto;

}

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

# grid-column-gap & grid-row-gap

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

Значения задаются в единицах измерения.:

<line-size> - значение размера;

.container {

grid-column-gap: <line-size>;

grid-row-gap: <line-size>;

}

Пример:

.container {

grid-template-columns: 100px 50px 100px;

grid-template-rows: 80px auto 80px;

grid-column-gap: 10px;

grid-row-gap: 15px;

}

Важно!

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

Grid-gap

Сокращение для grid-row-gapgrid-row-gap и grid-column-gapgrid-column-gap.

Значение:

<grid-row-gap> <grid-column-gap> - значения размеров;

.container {

grid-gap: <grid-row-gap> <grid-column-gap>;

}

Тот же самый пример, но с сокращенным свойствомПример:

.container{

grid-template-columns: 100px 50px 100px;

grid-template-rows: 80px auto 80px;

grid-gap: 10px 15px;

}

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

Justify-items

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

 Это значение применяется ко всем элементам сетки внутри контейнера.

Значения:

· start - выравнивает содержимое по левой стороне области;

· end - выравнивает содержимое по правой стороне области;

· center - выравнивает содержимое по центру области;

· stretch - заполняет всю ширину области (по умолчанию);.

.container {

justify-items: start | end | center | stretch;

}

Примеры:

.container {

justify-items: start;

}

.container{

justify-items: end;

}

.container{

justify-items: center;

}

.container{

justify-items: stretch;

}

Align-items

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

 Это значение применяется ко всем элементам сетки внутри контейнера.

Значения:

· start - выравнивание элементов по верхней части области;

· end - выравнивание элементов по нижней части области;

· center - выравнивание элементов по центру области;

· stretch - заполняет всю высоту области. (по умолчанию);

.container {

align-items: start | end | center | stretch;

}

Примеры:

.container {

align-items: start;

}

.container {

align-items: end;

}

.con tainer {

align-items: center;

}

.container {

align-items: stretch;

}

Justify-content

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

 Это свойство выравнивает сетку вдоль оси строки (в отличии от свойства align-content, которое выравнивает сетку вдоль оси столбца).

Значения:

· start - выравнивает сетку по левой стороне контейнера;

· end - выравнивает сетку по правой стороне контейнера;

· center - выравнивает сетку по центру контейнера;

· stretch - масштабирует элементы чтобы сетка могла заполнить всю ширину контейнера;

· space-around - одинаковое пространство между элементами, и полуразмерные отступы по краям;

· space-between - одинаковое пространство между элементами, без отступов по краям;

· space-evenly - одинаковое пространство между элементами, и полноразмерные отступы по краям;

.container {

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;   

}

Примеры:

.container {

justify-content: start;

}

 

.container {

justify-content: end;

}

.container {

justify-content: center;

}

.container {

justify-content: stretch;

}

.container {

justify-content: space-around;

}

.container {

justify-content: space-between;

}

.container {

justify-content: space-evenly;

}

 

Align-content

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

 Это свойство выравнивает сетку вдоль оси колонки. (в отличии от свойства justify-content, которое выравнивает сетку вдоль оси строки).

Значения:

· start - выравнивает сетку по верхней части контейнера;

· end - выравнивает сетку по нижней части контейнера;

· center - выравнивает сетку по центру контейнера;

· stretch - масштабирует элементы чтобы сетка могла заполнить всю высоту контейнера;

· space-around - одинаковое пространство между элементами, и полуразмерные отступы по краям;

· space-between - одинаковое пространство между элементами, без отступов по краям;

· space-evenly - одинаковое пространство между элементами, и полноразмерные отступы по краям;

.container {

align-content: start | end | center | stretch | space-around | space-between | space-evenly; 

}

Примеры:

.container {

align-content: start;

}

 

.container {

align-content: end;

}

.container {

align-content: center;

}

.container {

align-content: stretch;

}

.container {

align-content: space-around;

}

.container {

align-content: space-between;

}

.container {

align-content: space-evenly;

}

grid-auto-columns &  grid-auto-rows

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

Значение я:

<track-size> - может быть фиксированным размером, процентами, или частью свободного пространства в сетке (с использованием единицы fr);

.container {

grid-auto-columns: <track-size>...;

grid-auto-rows: <track-size>...;

}

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

 

Пример выше справа создаст сетку 2 x 2.

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

.item-a {

grid-column: 1 / 2;

grid-row: 2 / 3;

}

.item-b {

grid-column: 5 / 6;

grid-row: 2 / 3;

}

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

.container {

grid-auto-columns: 60px;

}

 

Grid-auto-flow

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

Значения:

· row - говорит алгоритму авто-размещения заполнять каждую строку поочерёдно, добавляя новые строки при необходимости;

· column - говорит алгоритму авто-размещения заполнять каждую колонку поочерёдно, добавляя новые колонки при необходимости;

· dense - говорит алгоритму авто-размещения попытаться заполнить дыры в сетке, если более мелкие элементы появляются позже;

·.container {

grid-auto-flow: row | column | row dense | column dense

· }

Внимание!

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

Примеры:

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

<section class="container">

<div class="item-a">item-a</div>

<div class="item-b">item-b</div>

<div class="item-c">item-c</div>

<div class="item-d">item-d</div>

<div class="item-e">item-e</div>

</section>

Вы Мы определили сетку с пятью колонками и двумя рядами, а свойство grid-auto-flow установили в row (оно же значение по умолчанию).

.container {

display: grid;

grid-template-columns: 60px 60px 60px 60px 60px;

grid-template-rows: 30px 30px;

grid-auto-flow: row;

}

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

.item-a {

grid-column: 1;

grid-row: 1 / 3;

}

.item-e {

grid-column: 5;

grid-row: 1 / 3;

}

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

 

Если вместо этого мы установим свойство grid-auto-flow в column, элементы item-b, item--c anсd item-d будут перетекать сквозь колонки:

.container {

display: grid;

grid-template-columns: 60px 60px 60px 60px 60px;

grid-template-rows: 30px 30px;

grid-auto-flow: column;

}

 

Grid

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

Значения:

· none - настраивает все свойства на их начальные значения;

· <grid-template-rows> / <grid-template-columns> - настраивает grid-template-rowsgrid-template-rowsи grid-template-columnsgrid-template-columns на соответствующие указанные значения, а все остальные свойства сбрасывает к их начальным значениям;

· <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ] - принимает те же самые значения что и grid-auto-flowgrid-auto-flow, grid-auto-rowsgrid-auto-rows и grid-auto-columnsgrid-auto-columns, соответственно. Если grid-auto-columns опущено, устанавливается значение соответствующие для grid-auto-rows. Если опущены оба, то они устанавливаются в начальные значения;

.container {

grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];

}

Примеры:

Grid-template-areas: none;

}

Grid: column 1fr / auto;

}

.container {

Gr id-auto-flow: column;

Grid-auto-rows: 1fr;

Grid-template-areas:

"header header header"

"footer footer footer";

grid-template-rows: [ro w1-start] 1fr [row1-end row2-start] 25px [row2-end];

Grid-area

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

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

Значения:

· <name> - название, которое вы выберите;

· <row-start> / <column-start> / <row-end> / <column-end> - может быть нумерацией или названиями линий;

.item {

grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;

}

Примеры:

Как способ назначить название элементу:

.item-d {

grid-area: header

}

Как сокращение для grid-row-start + grid-column-start + grid-row-end+ grid-column-end:

.item-d {

grid-area: 1 / col4-start / last-line / 6

}

 

 

Justify-self

Выравнивает содержимое элемента вдоль оси строки (в отличии от align-self, который выравнивает вдоль оси столбца).

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

Значения:

· start - выравнивает содержимое по левой части области;

· end - выравнивает содержимое по правой части области;

· center -выравнивает содержимое по центру области;

· stretch - заполняет всю ширину области; (по умолчанию);

.item {

justify-self: start | end | center | stretch;

}

Примеры:

.item-a {

justify-self: start;

}

.item-a {

justify-self: end;

}

.item-a {

justify-self: center;

}

.item-a {

justify-self: stretch;

}

Align-self

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

Значения:

· start - выравнивает содержимое по верхней части области;

· end - выравнивает содержимое по нижней части области;

· center -выравнивает содержимое по центру области;

· stretch - заполняет всю высоту области (по умолчанию);

.item {

align-self: start | end | center | stretch;

}

Примеры:

.item-a {

align-self: start;

}

.item-a {

align-self: end;

}

.item-a {

align-self: center;

}

.item-a {

align-self: stretch;

}

 

Встреча 19

Grid

Grid Layout - самая мощная система компоновки из доступных на данный момент в CSS.

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

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

CSS всегда использовался для разметки веб-страниц, но никогда не делал эту работу хорошо. Сначала мы использовали таблицы, потом обтекания (floats), инлайновые блоки (inline-block), но все эти методы по существу являются просто хитростями и опускают много важных возможностей. Flexbox помог, но он предназначен для более простых одномерных макетов, а не для двумерных (Flexbox и Grid хорошо работают вместе).

Немного терминологии

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

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

Контейнер сетки —элемент к которому применяется display: grid. Это прямой родитель для всех элементов сетки. В этом примере container является контейнером.

<div class="container">

<div class="item item-1"></div>

<div class="item item-2"></div>

<div class="item item-3"></div>

</div>

Элемент сетки — дочерние элементы  (прямые потомки) контейнера. Здесь item это элемент сетки, но элемент sub-item нет, потому то он не прямой потомок..

<div class="container">

<div class="item"></div>

<div class="item"> </div>

   <p class="sub-item"></p>

</div>

<div class="item"></div>

</div>

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

 

 

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

 

Ячейка сетки —пространство между линиями двух соседних строк и двух соседних столбцов. Это отдельная "единица измерения" сетки. Вот пример ячейки между линиями строк 1 и 2, линиями колонок 2 и 3.

 

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

 

Свойства Grid

               

Свойства Grid:

Свойства для контейнера 1. display 2. grid-template-columns 3. grid-template-rows 4. grid-template-areas 5. grid-template 6. grid-column-gap 7. grid-row-gap 8. grid-gap 9. justify-items 10. align-items 11. justify-content 12. align-content 13. grid-auto-columns 14. grid-auto-rows 15. grid-auto-flow 16. grid

Свойства для элементов: 1. grid-column-start 2. grid-column-end 3. grid-row-start 4. grid-row-end 5. grid-column 6. grid-row 7. grid-area 8. justify-self 9. align-self

Свойства, которые применяются для контейнера

· display

· grid-template-columns

· grid-template-rows

· grid-template-areas

· grid-template

· grid-column-gap

· grid-row-gap

· grid-gap

· justify-items

· align-items

· justify-content

· align-content

· grid-auto-columns

· grid-auto-rows

· grid-auto-flow

· grid

Свойства для элементов

· grid-column-start

· grid-column-end

· grid-row-start

· grid-row-end

· grid-column

· grid-row

· grid-area

· justify-self

· align-self