15. CSS Grid Layout. Грид-сетка. Гайд по гридам в CSS

✏️ Разбираем "гриды" в 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 | Что дальше

📚 Полезные ссылки:

💬 Чат в телеграмме (помощь новичкам):

🔸 Boosty (поддержать канал):

🗂️ Бесплатные курсы на канале:

📌 Автор:

#frontend #фронтенд #css

[bnflypd]

🔥🔥🔥🔥 очень крутое видео) понятные примеры. спасибо)

[pvytlde]

В очередной раз поражаюсь, как Саша умело и доходчиво преподносит информацию. Для меня тема оказалось немного труднее, как и флексы. Вроде бы смотришь видео, понимаешь, о чём идёт речь, но в голове каша. 😅 Нужно будет обязательно возвращаться к этим темам и пересматривать их.

Спасибо за урок!

[colodatwin]

Спасибо большое, хоть я уже на этапе изучения JS, но каждый ролик смотрю, так как в каждом ролике вы показываете различные тонкости, о которых никто не говорит. Например, из этого урока я узнал, про точку, про то как включить грид-сетку в девтулс, про то что repeat можно указывать несколько раз, и ещё про place-items) короче очень информативно и это всего за 14 минут)

[darkmatiz]

гуглил как центрировать див в очередной раз, наткнулся на ваш прекрасный канал, советую теперь всем начинающим

[mushroom]

Чувак, ты лучший и твой канал просто находка! Спасибо за все твои видео, сам сейчас учусь фронтенд-разработке и выписываю весь полезный материал в заметки, у тебя прям всё что нужно уже собрано. Надеюсь будут видосы и с реактом когда-нибудь или просто с любыми проектами.

[kagamisuitsu]

Я тебе невероятно благодарен!
Полгода в универе нас не обучали веб-разработке, а просто требовали выполнения лаб. Например, скопировать сайт bikeetta.
Я столько намучился с флексами, я их толком не понимал, но всё выполнил.
Сейчас, благодаря твоему уроку я понял гриды и это потрясающе. Знал бы всё это несколько месяцев назад - не пришлось бы столько мучаться.
Спасибо тебе огромное за твои уроки!

[OnlyProg-dmgc]

Что ж, надеюсь на практике отточить все эти прекрасные свойства, тогда я их перестану забывать 😅 Спасибо за урок, буду к нему возвращаться! ❤

[nya-nyafind]

Александр ты лучший! Огромное спасибо, информативно, коротко, ясно все на высшем уровне. Как на земле мог родится такой прекрасный человек!

[Ivanfwit]

отличное видео, спасибо!) намного информативнее других ресурсов

[Ihaveaverygoodfuture]

Урок очень хороший. Плохо только то, что из этого я половину не понял.
Надеюсь, я не один такой...
Александр, спасибо за столь полезные видео курсы!!

[VitaliaTereschenko]

Саша, спасибо большое за твой образовательный канал. Очень доступно и сжато объясняешь. По факту просто концентрат всего самого важного на твоем канале. Я учусь на курсе и по твоим материалам одновременно и твои материалы актуальнее.
Но пожалуйста, верни обратно спокойную музыку для тревожных людей на фон. С ней было проще долго сидеть и учиться. Это пожелание к будущим курсам, если это не проблема!
И подскажи пожалуйста, планируется ли и когда планируется курс по реакт?

[AlexAlex-bpil]

Н?№"я не понял., но очень интересно !

[liza_beg]

У меня на практике криво получилось в свойство place-items объединить justify-content и align-items. Как я поняла place-items - это шорткат для justify-items и align-items, то есть их выравнивание содержимого внутри грид-ячейки. А для выравнивания самих ячеек и для объединения justify-content и align-content подойдет - content. И с флексами, так же получается. Подскажите, я права или что то не так поняла?)

[phuntom]

Александр, огромное спасибо за ваше познавательное объяснение! Подскажите, правильно ли я понимаю, что при объяснении свойства row-gap, column-gap и gap вы оговорились? Прозвучало, что свойство row-gap задаст промежуток между элементами по вертикали, но на видео отображается промежуток по горизонтали. Далее вы говорите, что column-gap задаст промежуток по горизонтали, но отображается промежуток по вертикали.

[ani_galich]

Добрый день! Подскажите, не увидела свойства justify-items (Свойство, с помощью которого задаётся выравнивание грид-элементов по горизонтальной оси. Применяется ко всем элементам внутри грид-родителя.) Оно не используется сейчас на практике?

[gsxnmkj]

Александр, а если делать сайдбар и основной контент на гридах, то при изменении контента (раскрывающееся меню) содержимое контента начинает тоже увеличиваться. В контенте тоже грид-элементы и между ними увеличивается расстояние по вертикали. Как с этим бороться?

[ivankorsun]

Брат, первый раз в жизни я включил скорость 0.75, дело не в тебе, дело во мне, я медленно усваиваю

[VENTA]

очень много инфы! и с первого раза не все понятно! такой объем за раз не то что не освоить, а даже не запомнить!