CSS Grid Layout. Грид-сетка. Гайд по гридам в CSS.
ฝัง
- เผยแพร่เมื่อ 25 มิ.ย. 2024
- ✏️ На этом уроке разбираем псевдоклассы группы child, not, псевдоклассы состояний hover, focus, focus-visible, active, disabled и checked.
🔴 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: doka.guide/css/
➖ Справочник по фронтенду "MDN" от разработчиков Mozilla Firefox: developer.mozilla.org/ru/
➖ Игра Grid Garden: cssgridgarden.com/#ru
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #css
Спасибо большое, хоть я уже на этапе изучения JS , но каждый ролик смотрю, так как в каждом ролике вы показываете различные тонкости, о которых никто не говорит. Например, из этого урока я узнал , про точку, про то как включить грид-сетку в девтулс, про то что repeat можно указывать несколько раз, и ещё про place-items) короче очень информативно и это всего за 14 минут)
гуглил как центрировать див в очередной раз, наткнулся на ваш прекрасный канал, советую теперь всем начинающим
Я тебе невероятно благодарен!
Полгода в универе нас не обучали веб-разработке, а просто требовали выполнения лаб. Например, скопировать сайт bikeetta.
Я столько намучился с флексами, я их толком не понимал, но всё выполнил.
Сейчас, благодаря твоему уроку я понял гриды и это потрясающе. Знал бы всё это несколько месяцев назад - не пришлось бы столько мучаться.
Спасибо тебе огромное за твои уроки!
Чувак, ты лучший и твой канал просто находка! Спасибо за все твои видео, сам сейчас учусь фронтенд-разработке и выписываю весь полезный материал в заметки, у тебя прям всё что нужно уже собрано. Надеюсь будут видосы и с реактом когда-нибудь или просто с любыми проектами.
О ,и я учусь!😇 Александр, и правда находка согласен!!!
Видео топ!
Спасибо за работу!
Ролик ТОП!!!
отличное видео, спасибо!) намного информативнее других ресурсов
Пушка!!! Лайк, коммент, подписка!!!
Александр ты лучший! Огромное спасибо, информативно, коротко, ясно все на высшем уровне. Как на земле мог родится такой прекрасный человек!
Топчик, спасибо
Спасибо за урок!
Н?№"я не понял., но очень интересно !
Александр, а если делать сайдбар и основной контент на гридах, то при изменении контента (раскрывающееся меню) содержимое контента начинает тоже увеличиваться. В контенте тоже грид-элементы и между ними увеличивается расстояние по вертикали. Как с этим бороться?
Привет! Не совсем понимаю проблему. Раскрывающееся меню обычно делают через position fixed, а не как часть грид-сетки.
У меня на практике криво получилось в свойство place-items объединить justify-content и align-items. Как я поняла place-items - это шорткат для justify-items и align-items, то есть их выравнивание содержимого внутри грид-ячейки. А для выравнивания самих ячеек и для объединения justify-content и align-content подойдет - content. И с флексами, так же получается. Подскажите, я права или что то не так поняла?)
Привет! Да, тут я ошибся, place-items это шорткат для justify-items и align-items. Если при просмотре свойств в DevTools во вкладке Styles раскрыть place-items (нажать на стрелку слева от значения свойства), то там как раз будут те свойства, о которых вы написали.
Спасибо, что поправили! В будущей версии курса учту эти моменты обязательно :)
@@AleksanderLamkov Спасибо за ответ:)
Нашла в DevTools, класс, спасибо, не знала о таком.
Как всегда всё чётко!
Добрый день! Подскажите, не увидела свойства justify-items (Свойство, с помощью которого задаётся выравнивание грид-элементов по горизонтальной оси. Применяется ко всем элементам внутри грид-родителя.) Оно не используется сейчас на практике?
Добрый! Я использую его редко и, честно говоря, то ли забыл, то ли специально не включил в курс как раз по причине, что мне лично не пригодилось свойство ни разу за сотни сверстанных макетов. Но знать об этом свойстве будет не лишним. Обязательно включу об этом информацию в следующей версии курса, спасибо за эту информацию!
Брат, первый раз в жизни я включил скорость 0.75, дело не в тебе, дело во мне, я медленно усваиваю
Да ты не первый, кто говорит мне про мою быструю скорость речи. Есть такая проблема. Работаю над этим.
Постригся что ли?
Причесался 😄