Гриды — удобная технология для расположения элементов на странице, дающая возможность работать сразу с двумя измерениями — горизонталью и вертикалью — в отличие от флексбоксов, позволяющих одновременно работать только с одним измерением.
Чтобы получить краткую выжимку информации о технологии grid, можно посмотреть видео CSS Grid in 100 Seconds от Fireship.
CSS Grid Layout (спецификация) или просто гриды были придуманы и реализованы с одной только целью — дать удобный инструмент для создания раскладки элементов на веб-страницах. На заре появления веб-сайтов был популярный способ создания чего-то чуть интереснее одноколоночного документа — таблицы. Но проблема была в том, что таблицы создавались не для этого. Даже если отбросить семантическую нагруженность этого элемента, отдельные свойства для стилизации были крайне неудобны. По факту это был костыль за неимением более удачных способов.
Принцип работы гридов чем-то похож на таблицы. Вместо работы только со строками или колонками с их помощью можно работать с так называемыми ячейками, позиционируя элементы по вертикали и горизонтали одновременно.
Предостережение: не стоит использовать гриды, если сайт должен корректно работать в браузере IE 11 и ниже. Стоит проверять поддержку технологии на Can I use, прежде чем использовать гриды в своих серьезных проектах.
В лекции описаны не все возможные значения, а только самые используемые и устоявшиеся. По причине того, что технология находится на стадии активного развития и внедрения что-то в ней может меняться. Следует обращаться к спецификации, если чего-то не нашлось в лекции.
display: grid.
Синяя линия — грид-линия колонки
Грид-ячейка между 1 и 2 грид-линиями ряда и 2 и 3 грид-линиями колонки