https://codepen.io/romanlaptev/pen/povRRpE https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout CSS Grid Layout https://www.w3.org/TR/css-grid-1/ CSS Grid Layout Module Level 1 https://rutube.ru/video/f69da8b33ed12a49c94a47e4272746e7/ Видео урок по CSS Grid Layout, все свойства css grid, справочник по grid css layout канал ITDoctor https://morphismail.github.io/css-grid-manual/ https://doka.guide/css/grid-guide/ Гайд по grid — CSS — Дока https://tpverstak.ru/grid/ Шпаргалка по Grid CSS https://habrahabr.ru/post/325760/ CSS Grid Layout. Быстрый старт https://css-live.ru/css/bolshaya-statya-pro-gridy-css-grid-layout.html Большая статья про гриды (CSS Grid Layout) https://sky.pro/media/css-grid-rabota-s-avtomaticheskim-perenosom-elementov/ CSS Grid: Работа с автоматическим переносом элементов https://webformyself.com/kolonki-s-avtomaticheskim-podborom-razmerov-v-css-grid-auto-fill-ili-auto-fit/ Колонки с автоматическим подбором размеров в CSS Grid: auto-fill или auto-fit https://proglib.io/p/css-grid-vs-bootstrap/ Почему CSS Grid лучше, чем фреймворк Bootstrap? https://caniuse.com/#search=supports CSS.supports() API https://caniuse.com/#search=CSS%20Flexible%20Box CSS Flexible Box Layout Module https://caniuse.com/#feat=css-grid CSS Grid Layout (level 1) https://habrahabr.ru/post/336466/ Проверяем браузер на поддержку определённого CSS свойства https://developer.mozilla.org/ru/docs/Web/CSS/minmax minmax() это CSS функция, определяющая диапазон размеров, который больше или равен min и меньше или равен max
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
https://www.youtube.com/watch?v=uo0RVFpGVDo&list=PLiZoB8JBsdzk7yebGLJSgZiGXty6YDPBD&index=4 CSS Grid простыми словами, часть 4. Области и работа с ними https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areasadaptive schema
.demo-grid-area .m-container{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem 1rem; grid-template-areas: "m-header m-header m-header" "m-sidebar m-article m-article" "m-footer m-footer m-footer"; } @media (max-width:600px){ .demo-grid-area .m-container{ grid-template-columns: 1fr; grid-template-areas: "m-header" "m-sidebar" "m-article" "m-footer"; } }
5 063 просмотра Дата премьеры: 17 мая 2020 г. CSS Grid верстка CSS Grid Areas - это возможность задать каждому элементу грида название и использовать его в шаблоне областей. Просто, гибко и масштабируемо. В уроке изучаются css свойства grid-template-areas, grid-area и сокращение grid-template, которое включает в себя сразу три других свойства.
grid-area: m-article
