Меню

Несколько слов про CSS Grid

09.05.2018 - CSS, Вёрстка
Несколько слов про CSS Grid

Начало

.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: repeat(2, 100px);
grid-gap: 20px;
}
.item {
display: grid;
}

css grid

Чем отличается implicit и explicit

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

Для этого есть параметр:
grid-auto-rows и grid-auto-columns. Лучше всего для них использовать только одно значение.

В обычном режиме, блоки, если не помещаются — перемещаются на следующую строку, даже если указан grid-auto-columns.
Но мы можем изменить это поведение.
Для этого есть параметр grid-auto-flow: %column | row% .
Где мы определяем куда пойдут новые блоки

В css вместе с грид пришла новая единица измерения — fr. Они похожи на flex-grow и flex-shrink во флексах. Изменяются пропорционально.
Кстати. Если мы укажем значение auto — то размер будет равен размеру максимального содержимого.

Также на вооружении присутствует оч полезная функция repeat(колво раз, размер) — можно чередовать, например repeat(4, 1fr 2fr). А можно сам repeat вставлять много раз, например

grid-template-columns: 1fr 2fr repeat(2, 2fr 1fr) auto;

Размер ячейки

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

grid-column: span 3;

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

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

grid-row: span 2;

Если мы укажем span больше чем есть рядов…. то мы расстянем грид на количество превышающих рядов или строк.

Для того чтобы явно указать размер ячейки(блока) можно задать ячейке следующие параметры:

grid-column-start: 2;
grid-column-end: 5;
grid-column: 2 /5; /* (это альтернативная запись двум сверху) */

Что означает начать текущую ячейку со второго трака до 5 го включительно
Можно также через спан:

grid-column: 1 / span 2

Что означает с 1 ячейки протянуть 2, с первой включительно
Если мы хотим, чтобы ячейка растянулась на всю длину, и даже не знаем длины блоков — мы можем указать:

grid-column: 1 / -1 /*- тогда ячейка растянется на всю ширину*/
grid-column: 1 / -2 /*- тогда ячейка растянется на всю ширину, минус 1 блок с конца*/

Для тех же действий по вертикали — используем

grid-row: 3 / span 3;
/*Если мы захотим указать */
grid-row: 1 / -1; /*- он не сработает нормально, если:*/

Он не сработает нормально, если:
1. У grid-column стоит тот же параметр
2. Если явно не указан параметр grid-template-rows в контейнере

А когда сработает, то увеличится на величину явно указанных строк

Auto-fit и Auto-fill

Эти параметры довольно часто используются.

Например:

grid-template-columns : repeat(auto-fill, 150px); 

Данный параметр говорит заполни ширину блока внутренними блоками шириной по 150px;

Примерная разница в том, что если контента, допустим, недостаточно, то при auto-fill явно указанные блоки автоматически создаются до конца контейнера.
А при auto-fit явно указанный блок заканчивается там, где находится последний блок. Это хорошо заметно если мы например:

.container {
display: grid;
grid-gap: 20px;
border: 10px solid var(--yellow);
grid-template-columns: repeat(auto-fill, 100px);
}

.item4 {
grid-column-end: -1;
}

Если мы здесь заменим auto-fill на auto-fit и попытаемся отодвинуть контейнер на значительную ширину, то крайний блок останется на месте. а при auto-fill прилипнет к краю

minmax()

Очень полезный метод. Вот теперь отлична видна разница между auto-fill и auto-fit
Например:

.container {
display: grid;
grid-gap: 20px;
border: 10px solid var(--yellow);
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

Например, мы укажем минимум на 150 px, а максимум на 1fr. При этом если мы поставим auto-fit — то существующий контент растянется на всю ширину (равносильно, если мы укажем параметр auto — всем блокам в grid-template-columns), относительно друг друга.
Если же мы укажем auto-fill, он будет создавать новые явные места для блоков относительно их ширины.

fit-content()

Также мы можем указать в grid-template-column метод fill-content
Например:

.container {
    display: grid;
    grid-gap: 20px;
    border: 10px solid var(--yellow);
    grid-template-columns: fit-content(100px) 1fr 150px 150px;
}

Это равносильно, если бы мы поставили minmax(auto, max-content);

Именование блоков

В системе грид можно легко именовать блоки прямо в css для того чтобы в дальнейшем было удобнее работать с ними. Например:

grid-template-areas: "sidebar-1 content sidebar-2";

Для указания для нескольких строк:

grid-template-areas:
"sidebar-1 content sidebar-2"
"sidebar-1 content sidebar-2"
"footer footer footer"

Если мы хотим оставить где либо пустой неименованный блок, то достаточно просто указать точку в том месте, например

grid-template-areas:
"sidebar-1 content sidebar-2"
"sidebar-1 content sidebar-2"
"footer footer ."

Чтобы выбрать футер и работать с ним, достаточно указать с чем мы хотим работать

.footer {
    grid-area: footer;
}

Как по итогу выглядит готовая разметка:

.container {
display: grid;
grid-gap: 20px;
grid-template-columns: 250px 2fr 250px;
grid-template-rows: 150px 150px 100px;
grid-template-areas:
"sidebar-1 content sidebar-2"
"sidebar-1 content sidebar-2"
"footer footer footer"
}

.footer {
grid-area: footer;
}

.item1 {
grid-area: sidebar-1;
}
.item3 {
grid-area: sidebar-2;
}
.item2 {
grid-area: content;
}

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

@media (max-width: 700px) {
.container {
grid-template-areas:
"content content sidebar-1"
"content content sidebar-2"
"footer footer sidebar-2";
}
}

Также мы можем указать где блоку начаться, а где закончиться, относительно имён

.container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(8, 1fr);
grid-template-areas:
"one one one one two two two two"
"one one one one two two two two"
}

.item3 {
grid-column: one-start / two-end;
}

или если я укажу grid-area: one у .item3 то он займет всё пространство one

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

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

.container {
display: grid;
grid-gap: 20px;
grid-template-columns: [sidebar-start site-left] 1fr [sidebar-end content-start] 500px [content-end] 1fr [site-right];
grid-template-rows: [content-top] repeat(10, auto) [content-bottom];
}

.item3 {
background-color: slateblue;
grid-column: content-start;
grid-row: content-top / content-bottom;
}

Поток блоков на странице

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

.container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(10, 1fr);
grid-auto-flow: dense;
}

.item:nth-child(6n) {
background: cornflowerblue;
grid-column: span 6;
}

.item:nth-child(8n) {
background: tomato;
grid-column: span 2;
}
.item:nth-child(9n) {
grid-row: span 2;
}
.item18 {
background: greenyellow !important;
grid-column-end: -1 !important;
}

Получится что то вроде этого:
поток блоков

Выравнивание блоков

place-items: center center;

Выравнивание самих блоков

Допустим у нас есть лишнее место, и нам нужно выравнится относительно него.
То используем параметр: justify-content:

.container {
display: grid;
border: 10px solid var(--yellow);
grid-gap: 20px;
grid-template-columns: repeat(5, 100px);
grid-template-rows: repeat(5, 100px);
place-items: center center;
justify-content: space-between;
}

Order

Также, с помощью order мы можем быстро менять порядок блоков, например:

.container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(10, 1fr);
}

.logo {
grid-column: span 2;
order: 2;
}

.nav {
grid-column: span 8;
order: 1;
}

.content {
grid-column: 1 / -1
}
Метки: , ,

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

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