Разбираем "гриды" в CSS: изучаем понятие сетки, основные термины Grid Layout и все необходимые свойства. Timeline: 00:00 | План урока 00:19 | Что такое грид лейаут 00:54 | Основные термины: грид-контейнер, грид-элемент, грид-линия, грид-ячейка, грид-полоса, грид-область 01:51 | Грид-контейнер (display grid и display inline-grid) 02:19 | Свойство grid-template-columns 03:02 | Именование грид-линий 03:38 | Функция repeat 04:09 | Единица измерения fr 04:59 | Функция minmax 05:18 | Свойство grid-template-rows 05:49 | Свойство grid-auto-rows 06:15 | Свойства grid-auto-columns и grid-auto-flow 06:48 | Свойства grid-template-areas и grid-area 07:26 | Свойства row-gap, column-gap, gap 07:57 | Свойство выравнивания justify-content 08:56 | Свойство выравнивания align-items 09:28 | Свойство выравнивания place-items 09:52 | Позиционирование грид-элементов, свойства grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-column, grid-row 11:45 | Именование грид-линий 12:14 | Ключевое слово span 12:32 | Растягивание грид-элемента на все колонки 13:14 | Свойство order 13:45 | Игра Grid Garden 13:57 | Что дальше Полезные ссылки: Современный справочник по CSS:
Справочник по фронтенду "MDN" от разработчиков Mozilla Firefox:
Игра Grid Garden:
Чат в телеграмме (помощь новичкам):
Boosty (поддержать канал):
Бесплатные курсы на канале: HTML: • HTML курс 2024 CSS: • CSS курс 2024 JS: • JavaScript курс 2024 A11y: • Accessibility курс 2024 Мастер-класс по верстке для новичков: • Адаптивная верстка сайта с нуля для н... Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Вёрстка сайта с 0 до результата | HTM... Frontend Roadmap 2024 • Frontend Roadmap 2024 | Что должен уч... Автор: Личный сайт:
Telegram:
Boosty:
GetMentor:
Solvery:
#frontend #фронтенд #css
