Gettin ’Griddy остроумие
Посмотрим, смогу ли я вспомнить то, что узнал до сих пор.
- Сетка CSS состоит из контейнера и элементов
- используйте «class = container» в родительском div
- используйте «class = item» в дочерних div
2. атрибуты для класса контейнера
- display: grid - устанавливает сетку
- grid-template-column: 100 пикселей 100 пикселей 100 пикселей - 3 столбца по 100 пикселей каждый.
- grid-template-rows: 300 пикселей 150 пикселей - 2 строки, 1-я 300 пикселей 2-я 150 пикселей
- если grid-template-column НЕ указан, сетка будет настраиваться в зависимости от ширины браузера
- если grid-template-rows НЕ указан, сетка будет использовать столько строк по умолчанию (неявных) 100 пикселей, сколько необходимо для отображения оставшихся элементов
- если указано grid-template-rows И элементы не помещаются в указанные строки с текущими столбцами, сетка будет использовать столько строк по умолчанию (неявных) 100 пикселей, сколько необходимо для отображения оставшихся элементов
3. Неявное и явное
Итак ... мы вводим эти правила поведения сетки. Пришло время поговорить о явном и неявном.
- По умолчанию, когда есть больше элементов для отображения, но количество пятен определяется вашим количеством строк и столбцов (которое по умолчанию равно одному), сетка добавляет строки по 100 пикселей по мере необходимости.
- grid-auto-rows позволяет вам изменять размер этих неявных строк от 100 пикселей
- grid-auto-rows: 200px - каждая неявная строка будет 200 пикселей
- grid-auto-columns: по умолчанию для заполнения контейнера div
- grid-auto-columns: 750px - столбец по умолчанию теперь 750px
4. Автоматическая подача сетки
- позволяет изменить поведение по умолчанию, чтобы добавить неявные столбцы вместо строк, когда необходимо отобразить больше элементов
- grid-auto-flow: столбцы
- grid-auto-columns: 150px - неявные столбцы 150 пикселей;
5. Автоматические блоки% s и fr
- Использование процентов может показаться отличным, ОДНАКО при этом не учитываются пробелы в сетке, поэтому вы в конечном итоге будете использовать больше места, чем планировали.
- fr обозначает дробную единицу
- fr занимает свободное место (место, оставшееся после разрыва сетки)
если у вас 3 столбца
- сетка-шаблон-столбцы: 2fr 1fr 1fr;
- первый столбец будет занимать вдвое больше свободного места, чем следующие два
- сетка-шаблон-столбцы: 50px 1fr 1fr;
- первый столбец имеет статические 50 пикселей, а следующие два будут равномерно делить свободное пространство
- сетка-шаблон-столбцы: 50% 1фр 1фр;
- первый столбец займет половину контейнера, а следующие два равномерно разделят свободное пространство
6. ПОВТОРИТЕ (САМ)
- почему введите: «grid-template-columns: 1fr 1fr 1fr 1fr 1fr»
- когда вы можете ввести: «grid-template-columns: repeat (5, 1fr)?!?!
- да, это работает
также
- вы можете повторять несколько вещей
- столбцы-шаблон-сетки: повторить (3, 1fr 2fr)
- Сетка-шаблон-столбцы: 1fr 2fr 1fr 2fr 1fr 2fr
- это тоже самое
Итак, урок состоит в том, что не повторяйте себя, а используйте повтор.
DUR!
7. Определение размеров с помощью SPAN
Товар особенный, да? Хорошо, давайте попробуем охватить его.
- скажем, у предмета есть класс особенного парня
- используйте атрибуты grid-column и grid-row, чтобы указать размер элемента
- grid-column: span 2 - теперь элемент занимает два столбца
- при необходимости он переместится к следующей строке, чтобы занять эти два столбца
- grid-row: span 4 - теперь элемент занимает четыре строки
- все остальные элементы будут располагаться вокруг этого размера *
- если вы дадите ему больше столбцов, чем вы указали (в этом примере допустим, что у нас есть 3 столбца, указанные с помощью grid-template-column), он создаст неявные столбцы, чтобы соответствовать вашему элементу с grid-column: span 5
8. Разместите этот предмет там, где хотите.
- сетка-столбец-начало
- сетка-столбец-начало
- сетка-строка-начало
- конец строки сетки
- они позволяют указать, в каком столбце / строке элемент будет начинаться и заканчиваться в
ШОРТАНД
- сетка-столбец: 1/3; - элемент начинается в столбце 1 и заканчивается в столбце 3;
- сетка-столбец: 1 / пролет 2; - равно вышеуказанному;
- сетка-столбец: 2 / -1; - элемент начинается со 2-го столбца и заканчивается в последнем столбце;
- grid-row - работает так же, ЗА ИСКЛЮЧЕНИЕМ
- grid-row 1 / -1 заполняет только явные строки, поэтому, если вы не указали строки, это будет только одна строка
9. Автозаполнение и автоматическая подгонка
Допустим, у вас есть несколько элементов, и вам не всегда нужно определенное количество столбцов. Вы хотите, чтобы это зависело от ширины браузера?
- сетка-шаблон-столбец: повтор (автозаполнение, 150 пикселей);
это отрегулирует количество столбцов в зависимости от того, сколько элементов шириной 150 пикселей он может поместиться в контейнер (включая зазоры сетки)
- сетка-шаблон-столбец: повтор (автоподгонка, 150 пикселей);
похоже, это то же самое, что и автозаполнение… Хммм.
Однако с автозаполнением, если вы используете
- конец столбца сетки: -1;
на элементе, то с автозаполнением он прикрепит его к концу строки, но с автозаполнением этого не произойдет, потому что он не создает пустые элементы между ними, как автозаполнение.
10. мин. Макс.
Продолжая автоматическую подгонку / заливку, у нас есть minmax!
- сетка-шаблон-столбцы: повтор (автоподгонка, минмакс (150 пикселей, 1 пф));
Что это значит?
- он автоматически умещается в количестве столбцов в пределах ограничений элемента, шириной не менее 150 пикселей и не более всей сетки.
С автоматическим подбором при использовании minmax он будет продолжать увеличивать элементы по мере расширения браузера (до максимума), тогда как, как и с автоматическим заполнением, он будет добавлять дополнительные пустые элементы (при сохранении элементов по крайней мере минимальной ширины).
11. области
grid-template-areas: "sidebar1 content sidebar2" "sidebar1 content sidebar2" "footer"
Этот странно выглядящий синтаксис - это то, как вы используете области шаблона сетки в сетке CSS.
.item1 { grid-area: sidebar1; } .item2 { grid-area: content; } .item3 { grid-area: sidebar2; } .footer { grid-area: footer; }
После создания визуального макета с самим синтаксисом (например, чертежей ascii) используйте атрибут grid-area, чтобы назначить элементы области сетки.
Прекрасный вариант использования для этого - изменение размера с помощью медиа-запросов:
@media (max-width: 700px) { .container { grid-template-areas: "sidebar1 sidebar1 sidebar1" "content content sidebar2" "footer footer footer"; } }
Это изменяет макет в зависимости от ширины браузера. Так что это простой способ учитывать пользователей мобильных устройств.
12. Имена линий сетки
.container { grid-template-columns: [site-left] 1fr [content-start] 500px [content-end] 1fr [side-right]; grid-template-rows: [content-top] repeat(10, auto) [content-bottom]; } .item3 { grid-column: content-start; grid-row: content-top / content-bottom; }
Это позволяет размещать элемент, используя определенные вами имена линий сетки. Мы используем эти названия верхнего и нижнего начала содержимого. Таким образом, при размещении item3 очень легко увидеть, где мы начинаем и где заканчиваем.
13. сетка-авто-поток плотный
.container { display: grid; grid-gap: 20px; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; } .item3 { grid-column: 1 / span 2; }
H
Раньше у нас была сетка из трех столбцов. Наш третий элемент будет начинаться с столбца 1 и охватывать 2 столбца. По умолчанию это означает, что у нас будет пробел в третьем столбце первой строки.
Однако с сеткой-авто-поток: плотный; когда CSS переходит к четвертому элементу, он запоминает свое пустое место выше и помещает 4 вместо 3.
Блестяще!
14. оправдать и выровнять (себя)
выровнять: ось абсцисс
выровнять: ось Y
justify / align-items: начало, растяжение (по умолчанию), центр, конец
- это касается материала в каждом элементе
justify / align-content: start (по умолчанию), end, space-between, space-around
- имеет дело с тем, где вся сетка элементов находится в контейнере
- space-between: равномерно распределяет лишние промежутки между столбцами
- space-around: как пробел между начальным и конечным столбцом и границей, но без пробела
- align-content требует фиксированной высоты.
justify / align-self: начало, центр, конец (и многое другое)
- используйте это для определенного предмета
- переопределяет элементы выравнивания / выравнивания
15. Заказать
.logo { order: 2; } .nav { order: 1; } .content { order: 3; }
- переставьте свои элементы в нужном вам порядке с помощью order.
- 2 GOTCHAS: 1. Читатель специальных возможностей не будет читать его в этом порядке 2. Выделение текста и т. Д. Отключено