Gettin ’Griddy остроумие

SHOUTOUT: Уэс Бос, Mozilla

Посмотрим, смогу ли я вспомнить то, что узнал до сих пор.

  1. Сетка 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. Выделение текста и т. Д. Отключено