Frontend Formula

💫Гайд по grid, Часть 1



Гриды — Удобная технология для раскладки элементов на веб-страницах. Они дают возможность работать одновременно с горизонталью и вертикалью.



Свойства грид-контейнера:

👉 display — Если задано значение grid, то такой элемент становится грид-контейнером.



👉 grid-template-columns, grid-template-rows — Свойства, задающие размеры и количество колонок или рядов грид-раскладки соответственно.



👉 grid-auto-columns, grid-auto-rows — Позволяет управлять размерами автоматических рядов и колонок.



👉 grid-template-areas — Позволяет задать шаблон сетки расположения элементов внутри грид-контейнера.



👉 column-gap, row-gap — Задаёт отступы между колонками или рядами.



👉 justify-items — Выравнивает грид-элементы по горизонтальной оси.



👉 align-items — Выравнивает элементы по вертикальной оси внутри грид-контейнера.



👉 grid — Мегашорткат, позволяющий задать значения всему и сразу.



Продолжение следует...



Статья: https://doka.guide/css/grid-guide/



#css #дока



👉 @frontend_formula