Скачать "CSS Grid. Полный курс"

"videoThumbnail CSS Grid. Полный курс

0:00

Введение в курс

3:27

Применение сетки к контейнеру

8:40

Создание 3х колоночного макета

14:30

Управление размерами и позицией grid-элемента

20:45

Именование grid-линий, создание сетки, позиционирование элементов

28:39

Выравнивание grid-элементов

32:23

Выравнивание grid-контейнера

37:23

Управлять порядком элементов внутри grid-контейнера

42:22

Вложенность grid-элементов

46:42

Гибкость grid-элеменов при изменении размеров экрана

50:04

Создание гибкого макета

CSS3 #9 Плавающие элементы и очистка потока (Floating Elements & Clearfix)

CSS3 #9 Плавающие элементы и очистка потока (Floating Elements & Clearfix)

Канал: webDev

GraphQL #8 Создаём первую мутацию (Create First Mutation)

GraphQL #8 Создаём первую мутацию (Create First Mutation)

Канал: webDev

GraphQL #6 Мигрируем данные на mLab (Migration to mLab)

GraphQL #6 Мигрируем данные на mLab (Migration to mLab)

Канал: webDev

Начальный курс SQL.IN и NOT IN при наличии значений NULL

Начальный курс SQL.IN и NOT IN при наличии значений NULL

Канал: Igor Vovchenko

Проектирование базы данных

Проектирование базы данных

Канал: loftblog

PhpStorm - #7 - Синхронизация с удаленным сервером. Deployment.

PhpStorm - #7 - Синхронизация с удаленным сервером. Deployment.

Канал: loftblog

Node.js #9 Создание базового роутинга (Create Base Routing)

Node.js #9 Создание базового роутинга (Create Base Routing)

Канал: webDev

CSS3 #8 Единицы, переполнение и уровни элементов (Units, Overflow & z-index)

CSS3 #8 Единицы, переполнение и уровни элементов (Units, Overflow & z-index)

Канал: webDev

Node.js #6 Буфер и потоки (Buffer & Streams)

Node.js #6 Буфер и потоки (Buffer & Streams)

Канал: webDev

TailwindCSS. Полный курс

TailwindCSS. Полный курс

Канал: webDev

web

develop

front-end

frontend

веб

education

lesson

tutorial

css grid

css grid layout

css grid уроки

css grid system

html css

уроки css

css grid layout уроки

css grid tutorial

css grid верстка

grid layout

css grid практика

css grid flexbox

css grid для начинающих

css grid vs flexbox

css grid гайд

css grid примеры

css grid шпаргалка

css grid руководство

css grids tutorial

уроки css grid

css гриды

css грид за 1 час

css grid responsive

yauhenk

webdev

css

cssgrid

00:00:06

ред меня зовут

00:00:08

чук и вы смотрите курс по оси с

00:00:11

рид css grid было представлен

00:00:14

на если мне

00:00:15

меняет память в 2011 году была

00:00:18

представлена на компанией microsoft

00:00:20

однако активное

00:00:22

свое развитие она получила где-то с

00:00:25

середины 2015 года начало 2016 пошла

00:00:30

активная имплементация данной системы во

00:00:33

все современные браузеры и если мы

00:00:35

посмотрим статистику на данный момент то

00:00:38

как вы видите firefox и сафари и опера

00:00:41

имеет уже довольно неплохую поддержку

00:00:43

css bredoff

00:00:45

последние версии с сафари и а ios safari

00:00:49

начинает поддержку сиз с градов с

00:00:53

последней пред последней версии

00:00:55

ну а edge и интернет эксплорер

00:00:58

поддерживают все с с гряды с префиксами

00:01:01

поддержка в данный момент составляет 31

00:01:04

процент это конечно не flex бокс у

00:01:07

которого поддержка более 95 процентов

00:01:11

если я не ошибаюсь

00:01:12

однако на мой взгляд данная система

00:01:15

имеет очень много плюсов очень много

00:01:18

фишек которая делает ее самой гибкой на

00:01:22

мой взгляд на данный момент то есть с ее

00:01:25

помощью можно строить layout и

00:01:27

обладающие большей гибкостью чем layout

00:01:30

и построенное на flex боксе к плюсам

00:01:33

которые я могу выделить можно отнести

00:01:35

следующие с ее помощью легко построить

00:01:37

любую сетку каркас либо н колоночный

00:01:41

макет также может быть построен

00:01:43

стандартный базовая у состоящий из

00:01:45

федоров утра main контейнера системе все

00:01:49

с grid проще манипулировать любыми grid

00:01:52

элементами перемещать их в любой столбец

00:01:55

строку сетки растягивать сжимать все это

00:01:58

осуществляется абсолютно на любую ширину

00:02:01

и высоту также у них можно указывать

00:02:03

размеры great элементом можно отдельно

00:02:07

управлять своих столбцах и строках

00:02:09

например выровнять их по любой из

00:02:11

четырех сторон

00:02:12

выровнять их по базовой линии посередине

00:02:15

и так далее любых столбах и строках

00:02:18

сетки можно размещать сколько угодно

00:02:20

creed элементов накладывать их друг на

00:02:23

друга указывая при этом с

00:02:25

от яндекс соответственно будет

00:02:26

получается что один элемент находится

00:02:28

выше другого также данный принцип

00:02:30

работает при позиционировании то есть

00:02:32

абсолютном относительным фиксированным и

00:02:35

я более чем уверен что вы знакомы таким

00:02:38

свойством как бы ground позишн и его

00:02:41

атрибутом к крепит то есть повторение

00:02:43

фона так вот у gridlayout есть похожие

00:02:46

значение которое позволяет повторять

00:02:49

часть сетки при ее построении

00:02:51

это лишь часть плюсов которые я могу

00:02:53

выделить на данный момент однако уже по

00:02:56

ним можно понять что все с с grid можно

00:02:59

использовать намного больших кейсах

00:03:00

нежели тот же самый flexmax данном курсе

00:03:04

мы рассмотрим все ключевые моменты с

00:03:06

которых вы можете начать изучение данной

00:03:09

сетки и ее применение

00:03:11

имплементацию уже в свои проекты также

00:03:14

мы рассмотрим каким образом можно

00:03:15

перестраивать

00:03:16

layout зависимости от разрешения вы

00:03:19

увидите насколько все это просто

00:03:20

насколько все это гибко но а на сегодня

00:03:23

у меня все

00:03:24

увидимся следующих уроках

00:03:27

и в сегодняшнем видеоуроке мы с вами

00:03:30

посмотрим каким образом с помощью css

00:03:32

grid можно построить простой 3

00:03:35

колоночный layout

00:03:36

однако прежде давайте вспомним какие

00:03:39

способы можно использовать для того

00:03:41

чтобы вообще разрабатывать различные

00:03:43

layout и и первый вариант это таблицы

00:03:47

таблицы

00:03:48

использовались самых первых моментов

00:03:50

верстки

00:03:51

однако на данный момент они уже не

00:03:53

используются конкретно для построения

00:03:56

layout а потому что сами по себе они

00:03:57

гибкими не является перестраивать их

00:04:00

практически невозможно под различные

00:04:02

разрешения

00:04:03

поэтому в большинстве случаев таблицы

00:04:06

используются либо просто для создания

00:04:08

таблиц на странице либо для верстки

00:04:11

писем второй способ построения много

00:04:13

колонн очного лейаута это использование

00:04:15

флота

00:04:16

однако данный метод имеет также свои

00:04:19

недостатки после того как какому-то

00:04:22

элементу мы применяем свойство флот лефт

00:04:24

или флот райт она выпадает из

00:04:26

нормального потока

00:04:27

после чего нам нужно этот поток очищать

00:04:30

используя так называемый clear fix либо

00:04:34

использовать hacks

00:04:35

overflow однако данный способ довольно

00:04:39

широко применяется в некоторых

00:04:42

фреймворков для построения много колонн

00:04:45

ночных макетов в частности это bootstrap

00:04:49

оговорюсь что bootstrap

00:04:51

именно третьей версии следующий способ

00:04:53

построения layout а это использование

00:04:56

flex бокса на мой взгляд лекс бокс

00:04:59

последнее время занял лидирующие вместо

00:05:02

потому что данная модель довольно

00:05:04

простая и и легко освоить

00:05:06

layout и получается довольно гибкие их

00:05:09

легко перестраивать меняем лишь пару

00:05:11

свойств и добавляя различные медиа

00:05:14

куэрри однако и здесь имеются свои

00:05:16

подводные камни это раскладка только в

00:05:19

одном направлении то есть это либо будет

00:05:22

горизонтальная либо вертикальной а также

00:05:25

необходимость создавать новые контейнеры

00:05:27

обертки данное утверждение вытекает из

00:05:29

первого так как нам нужна влаживать

00:05:32

один элемент в другой для создания

00:05:35

различного эффекта и последний на мой

00:05:38

взгляд - это

00:05:40

то что верстка подстраивается под

00:05:42

контент они наоборот

00:05:44

ну а теперь давайте рассмотрим каким

00:05:46

образом можно построить

00:05:48

3 колоночный макет использует css kreed

00:05:52

для этого давайте создадим простейшую

00:05:54

разметку в качестве контейнера у нас

00:05:57

будет выступать

00:05:58

div элемент классом grid

00:06:02

внутрь

00:06:03

иного элемента мы поместим три элемента

00:06:06

с классом grid айтем

00:06:11

и каждому из

00:06:13

мы зададим отдельный класс по его номеру

00:06:16

то есть ой там 1-ой там два этом 3

00:06:24

добавим какой-нибудь текст

00:06:31

после чего для того чтобы выделить

00:06:34

вложенные элементы

00:06:35

добавим для них свойства background call

00:06:47

как вы видите элементы ведут себя по

00:06:50

стандарт

00:06:51

блочной модели то есть блок будет

00:06:54

растягиваться на всю ширину контейнера

00:06:57

дальше для отвертки с классом grid мы

00:07:01

добавим свойства

00:07:02

дисплей grid также упомянул что данное

00:07:06

свойство может быть display inline грит

00:07:09

и это очень похожа на модель flexmax

00:07:12

после чего

00:07:13

контейнеру добавим свойства grid

00:07:16

template

00:07:17

холмс

00:07:21

данное свойство отвечает

00:07:24

просто за количество колонок css грит и

00:07:27

зададим размер каждый из колонок в

00:07:30

данном случае мы планировали сделать 3

00:07:32

колоночный макет соответственно размеров

00:07:35

у нас будет три

00:07:39

и как вы

00:07:40

я нашла я от изменился первая колонка у

00:07:43

нас теперь равняется 100 пикселей

00:07:45

последняя колонка 200 пикселей средняя

00:07:48

колонка

00:07:49

у нас равняется 1 fr что же такое fr fr

00:07:53

или friction это фактор гибкости это

00:07:57

коэффициент пропорциональности который

00:07:59

отталкивается от общего количества

00:08:01

фракций значениях в нашем случае фракция

00:08:06

всего одна поэтому эта фракция

00:08:08

растягивается на всю доступную область

00:08:11

это также очень похожа на модель лекс

00:08:14

бокс где элемент со свойством flex один

00:08:17

будет занимать всю доступную ширину и

00:08:19

как вы видите с помощью двух свойств

00:08:22

можно сделать 3 колоночный макет что в

00:08:26

описанных ранее способах занимало бы

00:08:29

намного больше строк кода свойства grid

00:08:32

темплейт холмс может иметь много

00:08:34

значений соответствии с этими значениями

00:08:36

и будет перестраиваться нашли out

00:08:42

сегодня мы с вами

00:08:43

dream какие параметры могут быть у

00:08:46

свойства cried the plate collapse

00:08:48

но прежде чем мы начнем рассмотрение я

00:08:51

бы хотел добавить еще пару моментов в

00:08:53

предыдущем видеоуроке я забыл еще один

00:08:56

способ построения layout а это

00:08:58

использование дисплей

00:08:59

онлайн блок то есть онлайн блоков однако

00:09:03

как и все предыдущие методы данный метод

00:09:06

тоже имеет свои недостатки самый большой

00:09:09

недостаток это небольшое расстояние

00:09:10

между онлайн элементами я более чем

00:09:13

уверен что все из вас задавались

00:09:15

вопросом как же его убрать однако

00:09:17

вернемся обратно к css грит и так я

00:09:21

немного видоизменил

00:09:22

наш предыдущий макет чтобы было не так

00:09:24

грустно я добавил немного стилей и также

00:09:27

я добавил обводку виде бартера у

00:09:30

контейнера и у каждого и сайтом off-grid

00:09:33

template collapse данное свойство может

00:09:35

принимать несколько параметров и первые

00:09:38

параметры это либо относительные либо

00:09:40

абсолютная единицы то есть пикселей и

00:09:43

m&m и проценты и так далее

00:09:46

величина может быть указано любая как вы

00:09:49

видите контейнер будет по-прежнему

00:09:50

занимать всю ширину а каждый из атомов

00:09:53

займет соответствующее ему значение

00:09:55

второй параметр который может принимать

00:09:58

grid template collapse это friction для

00:10:01

того чтобы отобразить как работает

00:10:03

friction более наглядно давайте зададим

00:10:05

grid контейнеру

00:10:07

определенную ширину положим 600 пикселей

00:10:09

после чего каждому i say to move мы

00:10:12

зададим свою размерность в friction

00:10:18

вы помните friction это коэффициент

00:10:21

пропорциональности то есть в данном

00:10:23

случае каждый ой там он будет

00:10:26

растягивать на величину пропорциональную

00:10:30

остальным и если первый поэтому нас

00:10:33

имеет friction 1 а последний friction 3

00:10:36

то соответственно 1 ой там у нас будет в

00:10:38

3 раза меньше чем последний мы передаем

00:10:41

в grid template холмс три параметра так

00:10:44

как хотим чтобы наш layout был 3

00:10:46

колоночный однако если вам передадим

00:10:49

четвертый параметр

00:10:50

предположим 100 пикселей у нас появится

00:10:52

от tube то есть несмотря на то что у нас

00:10:54

нету 4 элемента

00:10:56

а их только три мы добавили четвертую

00:10:59

колонку в наш layout соответственно если

00:11:02

мы добавим четвертый элемент то он

00:11:04

займет все освобождавшие ся ширину

00:11:06

ширина колонок

00:11:08

может быть задана по минимальному и

00:11:11

максимальному размеру контента что

00:11:14

является очень большим плюсом

00:11:15

использования css grid в результате

00:11:19

применения данного свойства

00:11:20

колонки будут ориентироваться на размеры

00:11:24

контента находящегося в них и

00:11:26

подстраиваться под него

00:11:28

выглядит это следующим образом давайте

00:11:30

наш айтем 1 2 и 3

00:11:32

заменим на какой-нибудь текст

00:11:41

уберем размерности на

00:11:43

атомов и величин

00:11:45

контейнера после чего добавим два

00:11:48

параметра для первой колонке мы добавим

00:11:50

величину мин контент

00:11:55

средний 200 пикселей для последней макс

00:11:58

контент

00:12:00

что мы видим первом случае наша колонка

00:12:03

подстроилась под размер самого длинного

00:12:06

слова во втором сайтами

00:12:08

наша ширина получилась равной а 200

00:12:10

пикселей последний же был растянут на

00:12:12

всю ширину контента

00:12:13

как вы видите css grid очень удобно

00:12:16

управлять размерами контента также grid

00:12:20

template холмс может принимать значения

00:12:22

для минимальной и максимальной ширины

00:12:25

конкретной колонки ну здесь я думаю все

00:12:28

понятно изменим ширину наших антонов

00:12:30

предположим первый у нас будет двести

00:12:32

пикселей 2 100 пикселей а для последнего

00:12:35

мы применим значения мин макс а в

00:12:38

скобках

00:12:39

укажем два значения его минимальный

00:12:42

размер 100 пикселей на максимальный 300

00:12:44

в результате чего

00:12:45

величина последней колонке может

00:12:48

колебаться от 100 до 300 пикселей

00:12:51

зависимости от разрешения и как вы

00:12:53

видите

00:12:54

если средняя колонка у нас фиксирована с

00:12:57

величиной 100 пикселей 1 также

00:12:59

фиксирована то ширина последний

00:13:01

изменяется

00:13:06

как было сказано

00:13:07

я по аналогии с background рипит css

00:13:10

grid также имеет свойство рипит которая

00:13:14

будет дублировать часть сетки выглядит

00:13:16

она следующим образом

00:13:19

итак предположим нам нужно построить 3

00:13:22

колоночный макет чтобы все три колонки

00:13:24

были одинаковые величины через рипит это

00:13:27

будет выглядеть следующим образом

00:13:29

угри template collapse мы передаем

00:13:31

параметров крепит хрипит мы задаем

00:13:34

сколько элементов сетки будет

00:13:37

дублироваться нашем случае 3 а дальше

00:13:39

задаем их размер предположим это будет 1

00:13:42

friction следует отметить что в случае

00:13:45

не задания каких-либо размеров каждый из

00:13:48

колонок

00:13:49

ее значение по умолчанию задан а авто

00:13:52

это также следует учитывать при

00:13:54

построении вашего layout для того чтобы

00:13:57

задать

00:13:59

расстояние между колонками существует

00:14:02

свойства

00:14:03

grid колумба

00:14:07

и зададим его примерно в 15 пикселей и

00:14:09

это уже более становится похожа на сетку

00:14:13

по аналогии скрыть template холмс css

00:14:16

grid есть свойство grid template rose а

00:14:19

по аналогии с grid колумб gap есть

00:14:22

свойства гриб row gat

00:14:24

однако оба этих свойствах и их

00:14:26

параметрах мы поговорим следующем видео

00:14:28

уроки

00:14:33

они css grid используются для создания

00:14:36

гибких сеток

00:14:38

а также удобного манипулирования каждым

00:14:40

элементом в этой сетке

00:14:42

сегодня мы с вами рассмотрим каким

00:14:44

образом мы можем создать простейшую

00:14:47

сетку и если мы опять же возьмем

00:14:49

аналогию с flexx боксом то ключевая

00:14:53

концепция flex бокса это расположение

00:14:56

главной и поперечной оси то есть

00:14:59

горизонтальное и вертикальное

00:15:01

расположение элементов создаваемом вами

00:15:05

layouter

00:15:06

в отличие от лекс бокса css grid делит

00:15:10

видимую область на колонны и строки

00:15:15

колонки создаются с помощью свойства

00:15:18

grid template колом это свойство мы с

00:15:21

вами уже рассмотрели по аналогии с этим

00:15:23

свойством css grid есть свойство grid

00:15:27

темплейт роуз и в нашем случае мы

00:15:31

создали 3 колоночный макет с тремя

00:15:33

строками три колонки у нас идут

00:15:36

вертикально и также у нас появилось

00:15:38

дополнительное место под две строки

00:15:40

уберем пока грибковым gap и посмотрим

00:15:43

как данный layout приблизительно

00:15:45

выглядит для этого я нашел вот такую

00:15:47

картинку

00:15:48

каждая колонка у нас имеет порядковый

00:15:51

номер в нашем случае мы имеем три

00:15:54

колонки и три строки которые также имеют

00:15:58

свои порядковые номера

00:15:59

элементы будут занимать определенную

00:16:02

область

00:16:03

в нашем случае у нас три элемента 1 2 и

00:16:08

3 которые будут занимать одну строку и

00:16:12

три колонки

00:16:13

давайте рассмотрим каким образом

00:16:16

используясь с искрит мы можем

00:16:18

манипулировать размерами и поведением

00:16:21

этих элементов предположим элемент а

00:16:24

этом один мы хотим поместить

00:16:26

сначала в нижний правый угол а затем

00:16:30

растянуть его на всю высоту контейнера

00:16:33

для управления размерами элементов и их

00:16:37

положением существуют следующие свойства

00:16:39

для управления положением элемента в

00:16:43

колоннах

00:16:44

существует свойства grid каллум старт

00:16:46

игритт column and

00:16:53

данное свойство определяет когда элемент

00:16:57

начинается и соответственно когда он

00:16:59

будет заканчиваться по аналогии с этим

00:17:01

свойством есть свойство grid рау старт

00:17:04

игритт row and

00:17:12

и теперь давайте по под

00:17:13

разберем каждое из данных свойств

00:17:17

grid каллум старт говорит нам о том что

00:17:20

1 ой там должен начинаться с третьей

00:17:22

линии и так первая линия вторая линия

00:17:26

3 заканчиваться же он должен

00:17:29

на 4 соответственно четвертая линия

00:17:32

колонки

00:17:33

данный элемент занял свою ширину если мы

00:17:36

хотим расположить его в определенной

00:17:38

строке то мы сначала задаем grid ролл

00:17:41

старт которая говорит о том что данный

00:17:45

элемент должен начинаться с третьей

00:17:48

линии

00:17:49

строки первая линия строки вторая линия

00:17:53

строки и 3 заканчивается же он должен на

00:17:57

4 данные линии можно именовать

00:18:00

давая им определенное название что еще

00:18:04

больше упрощает процесс верткий и

00:18:06

создание сетки однако об этом мы

00:18:10

поговорим с вами в следующем видео уроке

00:18:12

в этом же я хочу заметить следующее по

00:18:15

аналогии с данным рисунком нумерация у

00:18:18

нас начинается от верхнего левого угла

00:18:21

если же мы используем очень большую

00:18:23

сетку и нам неудобно считать сначала то

00:18:27

можно начинать счет от нижнего правого

00:18:30

угла

00:18:31

тогда отсчет будет идти в отрицательных

00:18:34

величинах а именно

00:18:36

если мы начнем считать здесь у нас будет

00:18:39

минус 1 минус 2 минус 3 минус 4 если мы

00:18:44

начнем отсчет по строкам то получим по

00:18:46

аналогии с колонками минус 2 минус 3

00:18:50

минус 4 и минус 5 данные четыре свойства

00:18:54

могут быть немного упрощены а в

00:18:56

частности мы можем занести в одно

00:18:59

свойство расположение по колонке и по строке

00:19:02

называются эти свойства grid home &

00:19:05

greet ролл и выглядит это следующим

00:19:07

образом

00:19:11

в таком случае 2 пара

00:19:13

ты должен быть указан через слеш

00:19:18

по условию мы также

00:19:20

я растянуть наш ой там на всю высоту

00:19:22

контейнерах и как нетрудно догадаться

00:19:24

для того чтобы это сделать нам

00:19:27

достаточно лишь изменить значение

00:19:29

grid ролл старт на единицу то есть

00:19:33

начинать мы будем с первой линии первой

00:19:35

строки грибком

00:19:37

игритт ролл могут быть еще более

00:19:40

упрощены в одно свойство которое

00:19:43

называется grid ирия тогда

00:19:45

результирующий код будет выглядеть

00:19:47

следующим образом

00:19:55

данное свойство принимает начал

00:19:57

grid ролл старт потом grid каллум старт

00:20:01

grid roll and игритт колумб and для того

00:20:05

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

00:20:08

типа свойств рассмотрим данный рисунок у

00:20:10

нас есть grid каллум старт игритт каллум

00:20:14

and при объединении

00:20:16

а не дает grid каллум grid рау старт

00:20:18

игры troll and при объяснении дают grid

00:20:22

ролл после чего грибком игре troll могут

00:20:25

быть объединены в grid серия однако при

00:20:28

всей простоте данной системы

00:20:30

использовать последнее свойство не

00:20:33

совсем удобно потому что линии у нас

00:20:35

числовые

00:20:36

однако как было сказано ранее линий

00:20:39

можно именовать

00:20:40

но об этом мы поговорим с вами в

00:20:43

следующем видео уроки

00:20:47

рид сегодня мы с вам

00:20:49

рим об именовании линий у строк и

00:20:52

колонок а также о некоторых особенностях которые

00:20:55

связаны с созданием la ялта при помощи

00:20:58

css grid итак первая логическая

00:21:01

особенность которую я бы хотел

00:21:02

рассмотреть это если у нас есть 3

00:21:05

колонки в эти три колонки у нас помещен

00:21:08

соответственно по элементу и случае если

00:21:11

мы добавляем еще один элемент то

00:21:13

логичным поведением будет то что он

00:21:15

просто-напросто падает вниз теперь же

00:21:17

поговорим с вами об именовании

00:21:20

именование линий

00:21:21

css grid делает разработку более гибкой

00:21:25

так как каждая линия может быть

00:21:28

именована своим именем соответственно

00:21:30

секции которая отвечает за хедер могут

00:21:34

быть именованы как хэдер

00:21:35

секции которая отвечает за footer могут

00:21:38

быть именованы как footer для того чтобы

00:21:41

понять принцип работы именование линий

00:21:44

давайте построим с вами небольшую сетку

00:21:47

по примеру bootstrap а и заодно проведем

00:21:50

аналогию простоты работы

00:21:53

css грит и уже работающий сеткой

00:21:55

bootstrap ок которые напомню версии 3

00:21:58

построена на флотах

00:22:00

версии 4 она построена на flexo и так

00:22:04

первое что мы сделаем мы зададим имена

00:22:06

для колонок

00:22:08

свойствен grid template холмс и имена

00:22:11

для строк 100 grit template rose

00:22:14

делается это довольно просто достаточно

00:22:17

в квадратных скобках

00:22:19

указать имя в нашем случае мы укажем кол

00:22:23

для колонок и ролл для строк давайте

00:22:26

добавим 12 колонок и допустим восемь

00:22:30

строк увидите родитель у нас развернулся

00:22:33

также чтобы было более похоже на сетку

00:22:36

между колонками мы добавим пространство

00:22:39

напомню что добавить промежуток между

00:22:42

колонками можно при помощи свойства grid

00:22:46

каллум gap

00:22:48

и сделаем его 15 пикселей а дальше для

00:22:52

наглядности давайте добавим с вами

00:22:53

немного больше айтемов чем у нас есть

00:23:06

и так как вы видите у нас получились

00:23:09

колонки теперь давайте

00:23:10

много поиграем со свойствами для того

00:23:12

чтобы посмотреть как изменяется наш

00:23:14

лайалл

00:23:15

используя при этом именно для примера

00:23:17

давайте возьмем этом 3 и первое что мы

00:23:20

сделаем мы зададим ему свойства breed

00:23:22

колом

00:23:24

и зададим размер и которые он будет

00:23:27

занимать предположим его ширина будет

00:23:30

идти от кол один бокал 4

00:23:34

то есть данный элемент будет занимать

00:23:36

три колонки если же вместо call 4 мы

00:23:39

воспользуемся словом span то тогда

00:23:42

ширина 3 ite mo станет равна 4

00:23:45

аналогично мы можем изменить его

00:23:48

свойства и для creed roll

00:23:52

поставив ему например row 3

00:23:56

как вы видите 3 этом условно говоря

00:23:59

выпал из списка всех атомов и занял свое

00:24:02

место в третьем ряду мы можем растянуть

00:24:06

его до края

00:24:07

если зададим ему значение роу 9 так как

00:24:11

вы помните что строк у нас 8 растягиваем

00:24:15

моего до девятой линии и он занимает у нас всю

00:24:19

высоту если же вместо

00:24:21

ru 9 мы поставим span 9

00:24:26

то как вы видите ничего не изменилось

00:24:28

аналогично будет если мы поставим span

00:24:30

20 но если мы поставим span 4 высота 3

00:24:35

артема

00:24:36

будет равна четырем строкам это говорит

00:24:40

о том что наш сайт он не выходит и не

00:24:44

растягивает границы родителя он будет

00:24:47

находиться только в своей разлинеена

00:24:50

области занимая тот объем места которые

00:24:53

мы ему задали

00:24:54

давайте рассмотрим с вами еще один

00:24:56

пример и в качестве примера я бы хотел

00:24:59

воспроизвести данную картинку как вы

00:25:01

можете убедиться создать данный layout

00:25:04

используя либо flexmax

00:25:05

либо bootstrap немного затруднительно

00:25:07

однако используя css grid это проще

00:25:10

простого

00:25:11

давайте создадим данную сетку нашим

00:25:14

loyalty

00:25:15

первое что мы сделаем мы зададим базовые

00:25:17

параметры на данной картинке изображена

00:25:20

11 элементов эти элементы располагается

00:25:24

6 колонок и 3 ряда между ними находится

00:25:29

определенное пространство давайте

00:25:31

зададим данные базовые величины первое

00:25:34

что мы сделаем уберем ненужный div а

00:25:37

далее немного изменим наш css код у нас

00:25:40

6 колонок и 3 ряда grid колун gap мы

00:25:44

изменим на greed corp

00:25:45

для того чтобы добавить расстояние у

00:25:48

каждого элемента

00:25:55

добавим минимум

00:25:56

у для каждого из элементов вернемся

00:25:59

обратно к нашему рисунку и так первый

00:26:02

элемент у нас занимает первую строку и

00:26:04

две колонки

00:26:06

давайте создадим данный элемент

00:26:14

используя свойства грибковым мы задаем

00:26:17

параметр того что элемент должен

00:26:20

начинаться первой колонке

00:26:22

заканчивается же он должен в третьей

00:26:25

колонке данное свойство можно было бы

00:26:27

заменить на свойства span 2 как видите

00:26:30

результат такой же следующие второй

00:26:33

элемент у нас

00:26:35

растянут на две колонки и две строки

00:26:46

если же вместо span использовать имя

00:26:50

линии для строк и столбцов то данный код

00:26:53

будет выглядеть следующим образом

00:27:03

grid каллум мы говорим что элемент

00:27:07

и нация с третьей линии а заканчиваться

00:27:10

на 5 в grid ролл поговорим о том что

00:27:13

начинаться он должен с первой а

00:27:15

заканчиваться на третий третий элемент у

00:27:18

нас занимает одну колонку и две строки и

00:27:21

код для него будет выглядеть следующим

00:27:23

образом

00:27:30

далее нам осталось изменить еще два

00:27:34

элемента

00:27:35

а это девятый и десятый каждому из них

00:27:38

задав размерность в две колонки

00:27:54

аналогично и для 10

00:28:05

и теперь вы видите что мы

00:28:09

купил данной картинки и заняло это всего

00:28:12

лишь несколько строк причем данные

00:28:14

строки вполне могут быть удалены

00:28:21

в данном примере мы рассмотрели как с

00:28:23

помощью именованных линий мы можем

00:28:26

позиционировать элементы внутри css grid

00:28:29

лейаута о том как позиционировать

00:28:32

контент внутри данных элементов мы с

00:28:36

вами рассмотрим следующем видео уроки

00:28:41

и тема сегодняшнего урока это

00:28:43

выравнивание выравнивание css grid очень

00:28:46

похожа на выравнивание модели flexmax

00:28:50

давайте рассмотрим это на практике из

00:28:52

предыдущих примерах я оставил отвертку

00:28:55

grid внутри данные обертки

00:28:57

у нас находится только один элемент к

00:28:59

данному контейнеру я применяю свойства

00:29:02

дисплей grid для того чтобы включить css

00:29:04

гриб гриб template холмс у меня занимает

00:29:08

всю ширину

00:29:09

обращаю ваше внимание на то что элемент

00:29:12

1 и данная сетка имеет размерность одна

00:29:15

строка и 1 столбец и выравнивать в

00:29:18

контент мы будем внутри элемента как я

00:29:20

уже сказал выравнивание все с с grid

00:29:23

очень похожи на выравнивание во flex

00:29:26

бокс здесь также существуют свойство

00:29:29

которое можно применить к родителю

00:29:31

либо к элементу grid контейнеру могут

00:29:34

быть применены свойствах line айтюнс и

00:29:37

джесси fighters grid элементу могут быть

00:29:41

применены и свойства line сел и

00:29:44

6 файсал выравнивать они будут

00:29:46

соответственно по вертикали и по

00:29:49

горизонтали давайте разберем сначала

00:29:51

свойства которое применяется grid

00:29:54

элемент и первое свойство это online

00:29:56

sales которое выравнивает элемент по

00:29:58

вертикали

00:30:01

умолчанию данное свойство имеет значение

00:30:03

stretch что растягивает контент по всему

00:30:07

контейнеру если stretch мы заменим на

00:30:11

старт то элемент

00:30:13

выровняться по вертикали и окажется в

00:30:16

начале контейнера если же старт заменить

00:30:20

на and the element соответственно

00:30:22

оказывается внизу контейнер и последний

00:30:25

параметр которая принимает данное

00:30:27

свойство это центр и как нетрудно

00:30:29

догадаться элемент окажется ровно по

00:30:32

центру второе свойство которое

00:30:34

выравнивает

00:30:35

элемент по горизонтали называется 6

00:30:38

файлов

00:30:41

puma ча нею она тоже принимает значение

00:30:44

stretch что растягивает его по всей

00:30:47

ширине однако если stretch мы также

00:30:50

заменим на старт то элемент у нас

00:30:53

окажется самом начале

00:30:55

горизонтальной оси если старт мы заменим

00:30:58

на and the он оказывается в конце

00:31:01

горизонтальной оси последнее значение

00:31:04

это тоже центр которая выравнивает

00:31:07

элемент по горизонтали по центру в

00:31:11

результате применяя свойства и line сел

00:31:13

в центр и грести файсал центр

00:31:16

мы выравниваем элемент внутри контейнера

00:31:19

по центру это свойство которое

00:31:21

применяется grid элементу grid

00:31:24

контейнеру применяются два других

00:31:26

свойствах это line at emc

00:31:32

в этот элемент по вертикали и just for

00:31:34

items

00:31:39

которое выравнивает его по горизонтали

00:31:40

данное свойство также применяют

00:31:43

параметры stretch который идет по

00:31:45

умолчанию start и end

00:31:55

и как вы поняли все четыре свойства

00:31:57

принимают одинаковые параметры

00:32:03

выравнивание

00:32:04

они выполняют также одинаковая и

00:32:06

соответственно с этими свойствами

00:32:09

выравнивание может быть либо растянута

00:32:11

либо начинаться сначала оси

00:32:14

горизонтальной или вертикальной либо с

00:32:18

конца оси

00:32:19

либо выравнивать элемент по центру

00:32:24

тема сегодняшнего урока это выравнивание

00:32:27

внутри grid контейнера в предыдущем

00:32:29

видеоуроке мы с вами рассмотрели каким

00:32:32

образом может осуществляться

00:32:34

выравнивание внутри grid элемента

00:32:36

однако иногда бывает такое что общий

00:32:38

размер сетки может быть меньше размера

00:32:41

grid контейнера это может произойти если

00:32:44

grid элементы сетки имеют размеры с

00:32:47

негибкими единицами например

00:32:49

фиксированный размер в пикселях

00:32:50

в этом случае можно установить

00:32:53

выравнивание сетки внутри grid

00:32:55

контейнера есть два свойства которое

00:32:57

применяется только grid контейнеру и

00:33:00

осуществляют выравнивание grid элементов

00:33:02

в нем первое свойство

00:33:04

этот жест и контент это свойство

00:33:07

выравнивает сетку вдоль оси строки

00:33:10

второе свойство это line контент и как

00:33:14

нетрудно догадаться данное свойство

00:33:16

будет выравнивать сетку вдоль оси

00:33:18

столбца по умолчанию оба эти свойства

00:33:21

принимает значение старт однако какие

00:33:25

еще значения они могут принимать давайте

00:33:27

рассмотрим на практическом примере

00:33:29

в данном случае у нас есть div элемент с

00:33:32

классом grid в котором содержится три ой

00:33:34

там s-класс amg ride айт он так как элемент

00:33:37

us классом греет еще не задано значение

00:33:39

дисплей greet the айтемы подчиняется

00:33:41

блочной модели после того как мы

00:33:44

раскомментируем значение

00:33:45

они растянутся на всю ширину по

00:33:48

умолчанию как вы помните из предыдущих

00:33:50

уроков

00:33:51

каждое айтемы получает значение stretch

00:33:54

то есть они будут занимать всю свободную

00:33:57

область grid контейнера однако если

00:33:59

задать данным артемом фиксированную

00:34:02

ширину и высоту то они займут начальное

00:34:06

значение

00:34:07

вдоль осей строки и столбца или значение

00:34:11

старт давайте рассмотрим с вами первое

00:34:13

свойство

00:34:14

это свойство justify контент а я напомню

00:34:17

что данное свойство будет выравнивать

00:34:19

сетку

00:34:20

вдоль оси строки или по горизонтали

00:34:22

следующее значение которое принимает

00:34:25

данное свойство это значение and она

00:34:29

будет выравнивать сетку

00:34:30

по правому краю grid контейнер значение

00:34:34

scent sheer

00:34:35

выравнивает сетку в центре grid

00:34:38

контейнера stretch растягивает элементы

00:34:41

в данном случае работу этого свойства мы

00:34:43

не видим так как ширина у нас задано

00:34:46

фиксированная однако если мы уберём это

00:34:49

значение то элементы растянуться на всю

00:34:51

ширину

00:34:52

следующее значение это space раунд она

00:34:56

размещает ровно и количество

00:34:58

пространства между каждым элементом

00:35:00

сетки с полу размерными пространствами

00:35:03

на дальних концах очень похожи на него

00:35:07

свойства space between

00:35:08

она тоже размещает равное количество

00:35:10

пространства между каждым элементом

00:35:12

сетки и без пробелов на данных концах в

00:35:16

данном случае элементы прижались влево

00:35:19

потому что в каждой строке у нас

00:35:21

находится ровно по одному элементу

00:35:22

однако если бы их было несколько то

00:35:25

между ними было бы пространство и они бы

00:35:28

примыкали границам гриб контейнера

00:35:30

последнее свойство это свойство space

00:35:34

evenly она размещает ровное пространство

00:35:37

между элементами сетки включая дальние

00:35:40

концы второе свойство это онлайн-контент

00:35:44

она выравнивает сетку вдоль оси столбца

00:35:47

или вдоль вертикальной оси и как и

00:35:50

свойства заступаю контент данное свойство

00:35:53

принимает те же семь значений при

00:35:55

передачу ему значения and выравнивание

00:35:58

сетки

00:35:59

будет в нижней части creed контейнера

00:36:01

при передаче значение с интро они

00:36:04

поднимутся в середину при передаче

00:36:07

значение stretch мы также пока что

00:36:09

ничего не увидим так как значение height

00:36:12

у нас задано фиксированной однако если

00:36:14

его мы закомментируем то элементы

00:36:17

растянуться на всю высоту grid

00:36:19

контейнера следующее значение это space

00:36:22

раунд размещает ровно и количество

00:36:25

пространства между каждым элементом

00:36:26

сетки с полу размерными пространствами

00:36:30

но дальних концах аналогия свойства

00:36:33

space between

00:36:34

она также размещает равное количество

00:36:36

пространства между каждым элементом

00:36:38

причем без пробелов на дальних концах и

00:36:41

как вы видите первые последние элементы

00:36:44

примыкают границам creed контейнера и

00:36:47

последнее значение это space и видный

00:36:50

данное значение размещает ровное

00:36:53

пространство между элементами сетки

00:36:56

включая

00:36:57

дальние концы как вы видите два данных

00:37:00

свойства легко запомнить так как во

00:37:02

первых они применяются только grid

00:37:04

контейнеру а во-вторых каждое из этих

00:37:06

свойств принимает одни и те же семь

00:37:09

значений а именно start and sent for

00:37:13

stretch space раунд space between

00:37:16

и space и винный причем как работают

00:37:19

данное свойство

00:37:20

понятно язык перевода но нас

00:37:24

сегодняшняя наш

00:37:25

тема это размещение элементов внутри

00:37:28

grid layout и согласно автоматическому

00:37:30

алгоритму

00:37:31

размещение grid элементы выкладываются

00:37:34

по сетке в grid контейнере

00:37:37

друг за другом что вы уже в принципе и

00:37:39

видели они заполняют собой свободное

00:37:42

пространство если например great

00:37:44

элементу не хватает места в первом ряду

00:37:46

то он автоматически переходит на второй

00:37:48

ряд

00:37:49

данный пример мы с вами тоже рассмотрели

00:37:51

в предыдущих уроках и большой плюс grid

00:37:54

лейаута заключается в том что он

00:37:57

позволяет взять алгоритм авто замещение

00:37:59

под свой контроль

00:38:01

вообще если говорить о размещении

00:38:03

элементов внутри grid layout а то весь

00:38:06

этот механизм будет очень похож на

00:38:08

модель flexmax

00:38:10

я не случайно сравниваю flexmax в каждом

00:38:13

уроке с grid дело в том что на мой

00:38:16

взгляд css grid побрал все лучшее что

00:38:19

есть в aflex боксе а также улучшил это и

00:38:22

дополнил поэтому практически в каждом

00:38:25

уроке я провожу параллель как уже

00:38:28

существующими сетками так и с уже

00:38:30

существующим flex боксом и обращаю ваше

00:38:33

внимание на то что css grid довольно

00:38:38

мощный инструмент который в скором

00:38:40

будущем может начать активно

00:38:42

использоваться разработчиками при

00:38:44

построении layout of поэтому на мой

00:38:46

взгляд изучении данной темы будет очень

00:38:49

полезно ну вернемся к коду

00:38:51

итак у меня есть 10 элементов внутри

00:38:54

grid контейнера и данный макет у нас

00:38:57

имеет четыре колонки и четыре строки за

00:39:00

алгоритм размещения отличает свойства

00:39:03

grid out of low которая есть у

00:39:05

контейнера

00:39:09

данное свойство по умолчанию принимает

00:39:13

значение ролл в результате чего как было

00:39:15

сказано все элементы выстраиваются

00:39:17

строку второе значение которое может

00:39:20

быть применено к данному свойству это

00:39:23

каллум как только мы применим данное

00:39:25

свойство наши элементы начнут

00:39:27

размещаться в колонку если сравнивать с

00:39:30

listbox это очень похожи на свойства flex

00:39:32

direction который отвечает за

00:39:34

направление главной оси и также может

00:39:37

быть изменено на вертикальное помимо

00:39:39

параметров ром и колу

00:39:41

ему может быть присвоен еще один

00:39:42

параметр это параметр

00:39:44

dance давайте посмотрим как работает

00:39:46

этот параметр

00:39:47

и как с помощью css grid мы можем

00:39:51

создать что-то похожее на сетку man sony

00:39:54

и используя сравнительно небольшое

00:39:56

количество css кода

00:39:57

давайте немного изменим наш макет а в

00:40:00

частности второй третий элемент макета

00:40:03

мы сделаем два раза больше

00:40:09

сделаем мы это с помощью свойства

00:40:11

грибковым

00:40:14

и напомню для того чтобы сделать элемент

00:40:17

в два раза больше чем остальные мариш

00:40:19

добавим span 2 и изменим great to all

00:40:23

the flow обратно на ролл в результате

00:40:25

чего наша сетка изменилось однако после

00:40:28

второго элемента

00:40:30

у нас появилось пространство и как раз

00:40:32

для таких случаев существуют ключевое

00:40:34

слово dance если мы добавим данное слово

00:40:37

свойство grid of the flow

00:40:40

то наши элементы сомкнуться данный

00:40:43

layout по-прежнему не плохо адаптируется

00:40:47

причем данные элементы не прыгают также

00:40:51

очень большим плюсом является то что мы

00:40:53

фактически

00:40:54

при изменении порядка элементов не

00:40:56

изменяем структуру дом dance является

00:40:59

своего рода заполнителем свободного

00:41:02

пространства внутри css grid рассмотрим

00:41:06

еще один вариант

00:41:07

изменение порядка элементов для этого

00:41:10

места and только три элемента уберем

00:41:12

лишний код как и в флик xbox css grid

00:41:16

существует такое свойство как

00:41:18

ордер или порядок по умолчанию оно равно

00:41:22

нулю однако если мы зададим

00:41:24

данное значение единицы то наш второй

00:41:27

элемент окажется последним это значение

00:41:30

может быть задано и отрицательно тогда

00:41:33

элемент под номером 2 станет первым это

00:41:37

очень удобно точно так же как и во flex

00:41:39

бокс менять порядок элементов при

00:41:43

перестраивании сетки

00:41:44

однако стоит отметить что layout

00:41:48

построены с помощью css grid работает

00:41:51

быстрее чем layout построен из помоев

00:41:54

flexx бокса в описании к данному видео я

00:41:57

прикреплю ссылку на статью в которых

00:42:00

сравниваются скорости и как вы увидите

00:42:03

даже при создание простейшего лейаута

00:42:05

css grid отрабатывает быстрее чем flexx

00:42:09

бокс данный layout будет довольно

00:42:11

простым но по аналогии вы можете себе

00:42:14

представить насколько сильно упадет

00:42:16

скорость загрузки если создавать сетку с

00:42:19

помощью flex бокса

00:42:24

его урока вложенность css grid различные

00:42:28

grid контейнеры могут быть вложены друг

00:42:30

в друга в результате чего

00:42:32

внутри одной греть сетки может быть

00:42:34

создано другая

00:42:35

независимая это очень удобно при

00:42:38

построении больших сайтов и при

00:42:40

проектировании сложных дизайнов давайте

00:42:43

посмотрим каким образом будет работать

00:42:46

вложенность css grid для демонстрации я создал

00:42:50

базовую разметку

00:42:51

у нас есть внешний контейнер с классом

00:42:54

grid один который вложен внутренний

00:42:56

контейнер с классом grid 2

00:42:58

в стилях мы превращаем элемент классом

00:43:01

grid в grid контейнер давайте добавим

00:43:04

класть grid внутреннему контейнеру

00:43:11

после чего давайте

00:43:13

немного динамичности уже созданной сетки

00:43:16

с помощью свойства grid темплейт

00:43:18

collapse

00:43:30

в данном свойстве я использую рипит и

00:43:33

параметр of the hill которая как вы

00:43:35

помните из предыдущего урока анализирует

00:43:38

пустое пространство и заполняет его

00:43:41

следующим grid контейнером также я

00:43:43

использую параметр мин-макс то есть наш

00:43:46

сайт он не может стать меньше чем 200

00:43:48

пикселей и посмотрим работу нашей grid

00:43:50

сетки

00:43:54

она начинает перестраиваться в

00:43:56

зависимости от разрешения

00:43:58

теперь давайте добавим другой порядок

00:44:01

перестроения в нашу внутреннюю сетку

00:44:17

и как вы видите внутри элемента мы

00:44:20

создали 2 колоночный макет причем если

00:44:23

снаружи наш контейнер динамически

00:44:26

изменяет сетку

00:44:27

то внутри внутри него контейнера сетка

00:44:30

по-прежнему остается 2 колоночный

00:44:32

данная возможность позволяет строить еще

00:44:35

более

00:44:36

адаптируемые layout и как ее можно

00:44:39

использовать

00:44:40

предположим данный там мы можем

00:44:43

использовать в качестве меню

00:44:44

изменим немного нашу разметку

00:44:50

ты чего сделаем наш макет 4 colo ночным

00:44:53

и как вы видите у нас получилось 4

00:44:56

пункта меню которое не изменяется своем

00:44:58

контейнере

00:44:59

зависимости от разрешения настолько

00:45:01

большое растяжение происходит из-за того

00:45:04

что внешнему контейнеру я указал высоту

00:45:06

равную высоте в порт а если мы

00:45:09

закомментируем это значение

00:45:10

то нашла я у примет следующий вид и в

00:45:13

данном контексте нашей даме

00:45:15

больше всего похоже на меню в качестве

00:45:18

еще одного примера мы можем например

00:45:20

взять выравнивание внутри формы а именно

00:45:23

выравнивание лейбла

00:45:24

и in tutta заменим наши айтемы на

00:45:27

соответствующие имена лейбл и input

00:45:34

и закомментируем последний div элемент

00:45:39

после чего немного подправим наш css а в

00:45:43

частности изменим размеры нашего

00:45:45

внутреннего grid контейнера

00:45:55

мы сделали его в 2 раза больше после

00:45:58

чего изменим сетку с 4 колоночный на 2к

00:46:01

лодочную а также изменим размеры

00:46:04

каждый из колонок

00:46:09

и теперь если представить что в данном

00:46:12

layout и данные секции является лейблом

00:46:16

а данные им потом то легко увидеть что

00:46:21

без использования flex бокса или флота

00:46:24

или имитации таблице мы смогли выровнять

00:46:27

лейблы

00:46:29

input и возможность вкладывать grid

00:46:31

контейнеры друг в друга существенно

00:46:34

увеличивает возможности плэй аута и

00:46:37

позволяет создавать более сложные

00:46:39

структуры

00:46:43

тема сегодняшнего

00:46:45

к это свойство of the hill и автохит

00:46:48

рассмотрев базовое понятие css grid мы

00:46:52

потихоньку углубляемся в изучении

00:46:54

данного модуля и в этом видеоуроке мы

00:46:56

рассмотрим насколько css grid может быть

00:47:00

гибким без использования медиа корей в

00:47:04

качестве разметки я создал 10 блоков div

00:47:07

со своим порядковым номером обертки с

00:47:10

классом grid я задаю дисплей grid

00:47:12

свойство greed corp

00:47:13

заменяет два свойства это грибком gap

00:47:17

игритт рука

00:47:18

она добавляет margin каждому из grid

00:47:22

айтемов ну и чтобы это более или менее

00:47:24

цивильно смотрелось я растянул контейнер

00:47:28

на высоту в порт пока что как такового

00:47:31

response ago

00:47:32

у нас здесь нету блоки ведут себя как

00:47:34

стандартная блочная модель давайте

00:47:36

добавим свойства grid template холмс

00:47:42

vk

00:47:43

с помощью

00:47:44

хрипит мы добавим 3 колонки то есть

00:47:47

создадим 3 колоночный out причем размер

00:47:49

каждого и сайтом of у нас будет 100

00:47:52

пикселей теперь мы получили стандартные

00:47:55

3 колоночный layout однако ни о каком

00:47:58

использую здесь не может идти речь для

00:48:00

того чтобы придать нашему макету хоть

00:48:03

какую-то отзывчивость для устройств мы

00:48:05

добавим ему вместо трех колонок

00:48:07

параметр out a feel

00:48:11

а вот а фил будет

00:48:13

жировать пустое пространство и в данное

00:48:16

пространство он будет добавлять новый

00:48:18

там как вы видите при появлении

00:48:24

либо при уменьшении размеров экрана

00:48:29

china it перестраиваться

00:48:32

однако выглядит она

00:48:34

ему плохо потому что у нас есть

00:48:36

разрешение в которых справа у нас

00:48:39

имеется очень большая пустая область

00:48:41

для того чтобы избежать этой области мы

00:48:43

добавим свойства мин-макс

00:48:45

а я напомню что это максимальная и

00:48:47

минимальная ширина конкретной колонки

00:48:50

для каждой из колонок

00:48:54

и минимально сделаем их 100 пикселей

00:48:57

максимально же мы добавим авто для того

00:49:02

чтобы они растягивались на всю ширину

00:49:04

как вы видите наш макет адаптируется под

00:49:07

величину экрана а также адаптирует наши

00:49:10

айтемы под эту ширину и казалось бы все

00:49:13

уже готово то есть данный вариант уже

00:49:15

вполне может быть применен для response

00:49:18

его однако если мы предположим

00:49:21

закомментируем всем наших блоков оставив

00:49:24

только три мы увидим что у нас по

00:49:27

прежнему может появиться пустое

00:49:29

пространство то есть если мы используем

00:49:31

3 колоночный макет что же делать в таком

00:49:34

случае css grid предусмотрел еще одно

00:49:37

свойство которое называется of the feet

00:49:39

of the feet будет растягивать дочерние

00:49:43

греты элементы на всю ширину в

00:49:45

результате чего как такого пространства

00:49:47

у нас нету и как вы видите из данного

00:49:50

урока без использования

00:49:52

media query мы вполне можем получить

00:49:54

адаптивный layout который будет

00:49:57

перестраиваться зависимости от ширины

00:50:00

экрана

00:50:01

однако это только лишь начало но на

00:50:08

нами ранее знания давайте создадим

00:50:10

какой-нибудь простой макет чтобы ещё раз

00:50:12

повторить большинство свойств css grid

00:50:16

посмотреть как он работает и как может

00:50:18

быть применен для response of дизайна

00:50:21

для того чтобы сэкономить время я

00:50:23

заранее создал разметку в качестве grid

00:50:26

контейнера у нас будет выступать

00:50:28

body внутри body у нас располагается

00:50:30

стандартные элементы лейаута это header

00:50:34

навигация

00:50:35

а сайт обычно эта секция с рекламой main

00:50:39

секция где содержится основной контент и

00:50:42

footer и с вёрст ином виде данный layout

00:50:46

используя flex бокс выглядит следующим

00:50:48

образом это 3 колоночный макет header и

00:50:52

footer будут занимать всю ширину а

00:50:55

средняя часть будет разделена между меню

00:50:59

контентом я сойду с левой стороны

00:51:01

находится весь код который мне

00:51:03

понадобился для того чтобы создать

00:51:05

данный layout используя flexx бокс и

00:51:07

если знать flexmax то все довольно

00:51:10

понятно однако свойства

00:51:12

line cells или ордер а также свойства

00:51:15

flex интуитивно не совсем понятны а

00:51:18

теперь мы посмотрим как точно такой же

00:51:20

макет мы можем сверстать используя css

00:51:24

grid сейчас наш layout выглядит

00:51:26

следующим образом

00:51:28

поскольку css стили добавлены только для

00:51:31

визуального оформления вся разметка

00:51:34

подчиняется блочной модели и первое что

00:51:36

мы сделаем превратим наш body варит

00:51:39

контейнер

00:51:43

как было сказано

00:51:45

и наш

00:51:46

дед будет 3 колоночный давайте

00:51:48

воспользуемся свойством great template

00:51:50

каллум и создадим эти колонки

00:52:00

в данном свойстве для первой и последней

00:52:03

колонке мы использовали мин-макс который

00:52:06

мы задали промежуток от 150 до 200

00:52:10

пикселей это размеры на которые будут

00:52:12

изменяться наше первое и последнее

00:52:15

колонки для средней колонке мы

00:52:17

использовали размерность во flash

00:52:20

давайте привяжем части нашей разметки а

00:52:22

именно хедер на of a site

00:52:25

main и footer с помощью свойства grid

00:52:28

эры grid layout для того чтобы используя

00:52:31

в дальнейшем свойства breed темплейт rs

00:52:34

к ним можно было обращаться

00:52:52

а теперь с помощью свойства grid

00:52:56

rs давайте укажем как данные секции

00:53:00

должны располагаться в ялте

00:53:15

как вы видите grid template эры

00:53:19

а лидирует расположение каждой из секций

00:53:22

федор занимая всю ширину поэтому на все

00:53:26

три колонки мы указываем данную секцию

00:53:28

вторая строка состоит из трех элементов

00:53:31

это навигация главная часть я сайт

00:53:35

соответственно во второй строке указан

00:53:37

in of main inside

00:53:39

footer так же как их вейдер занимает всю

00:53:41

ширину соответственно в каждой из

00:53:43

колонок

00:53:44

также располагается секция footer а

00:53:46

теперь давайте немного улучшим наш макет

00:53:49

а в частности прибьем footer книзу

00:53:52

для этого мы закомментируем часть кода

00:53:58

сделать используя ceкc с

00:54:00

kreed это довольно просто и первое что

00:54:02

мы сделаем мы зададим высоту для боди

00:54:05

равную высоте в порта

00:54:10

далее с помощью

00:54:12

grid template rose мы зададим высоту

00:54:14

каждый из строк

00:54:21

и как вы видите теперь наш футаж прибит

00:54:23

к низу раскомментируем разметку

00:54:28

и давайте добавим с вами response of к

00:54:31

нашему лайалл ту использовать мы будем

00:54:33

медиа куэрри

00:54:39

изменим свойства нашего боде

00:54:42

контейнера а в частности наш 3

00:54:44

колоночный макет на разрешение 510

00:54:47

должен стать двух колонн ночным а секция

00:54:50

сайт должна быть скрыта

00:55:09

в свойстве great template collapse я

00:55:11

использовал атрибут рипит который

00:55:14

повторил одну колонку

00:55:16

два раза ее ширина равна одному friction

00:55:19

а теперь давайте зададим шаблон для

00:55:22

нашей разметки так как у нас 2

00:55:24

колоночный макет и a site

00:55:26

мы скрыли на шаблон выглядит следующим

00:55:28

образом

00:55:37

и проверим работу нашего кода

00:55:41

все прекрасно

00:55:43

они меньше чем 500 10 пикселей наш макет

00:55:46

перестроился 2 колоночный

00:55:48

а секция сайт была скрыта и еще раз grid

00:55:52

template rs прекрасно визуализирует наш layout на

00:55:56

данном разрешении

00:55:57

давайте создадим еще один медиа кори для

00:56:00

разрешения 320 для того чтобы

00:56:02

перестроить наш 3 колоночный макет в 1

00:56:05

колоночный

00:56:17

проверяем

00:56:21

все прекрасно работает как вы видите

00:56:23

свойства грудь template

00:56:25

rs прекрасно отражает работу лейаута на

00:56:29

каждом из разрешений если изначально

00:56:31

layout был 3 колоночный

00:56:33

то в каждой из строк мы указывали по три

00:56:36

секции в переходе на двух колонн oчeны в

00:56:39

каждый строк указывается по 2

00:56:41

и когда наш макет становится однако

00:56:43

лодочным мы указываем по одной секции

00:56:46

хочу заметить что данные секции могут

00:56:49

быть указаны в одну линию

00:56:53

однако и

00:56:54

их располагать друг под другом то

00:56:56

визуально сь в коде возрастает в разы и

00:56:58

так на данном примере мы с вами

00:57:01

рассмотрели насколько мощной гибкой и легко

00:57:04

настраиваемый является css grid а на

00:57:08

этом у меня все подписывайтесь на канал

00:57:10

пока

Описание:

Всех приветствую в курсе «CSS Grid». Модуль CSS3 Grid Layout - это один из самых интересных, модулей в семействе CSS3. Задача, которую решает модель CSS3 Grid Layout, очень проста и понятна - предоставить удобный механизм расположения контента по виртуальной сетке. В данном видео-курсе мы с вами рассмотрим все особенности данной сетки, её использование для вёрстки, а так же сравним с уже с существующими способами построения «каркаса» веб-страницы. ✒ Timeline: ✔ 0:00 - Введение в курс ✔ 3:27 - Применение сетки к контейнеру ✔ 8:40 - Создание 3х колоночного макета ✔ 14:30 - Управление размерами и позицией grid-элемента ✔ 20:45 - Именование grid-линий, создание сетки, позиционирование элементов ✔ 28:39 - Выравнивание grid-элементов ✔ 32:23 - Выравнивание grid-контейнера ✔ 37:23 - Управлять порядком элементов внутри grid-контейнера ✔ 42:22 - Вложенность grid-элементов ✔ 46:42 - Гибкость grid-элеменов при изменении размеров экрана ✔ 50:04 - Создание гибкого макета ✒ Используемые ресурсы и инструменты: ✔ Codepen (Онлайн редактор кода): https://codepen.io/ ✒ Полный список готовых и планируемых курсов: ✔ Trello: https://trello.com/b/R6rD7qq8 ✒ Автор курса: ✔ YouTube: https://www.youtube.com/YauhenKavalchuk ✔ Instagram: https://www.facebook.com/unsupportedbrowser ✔ Twitter: https://twitter.com/YauhenKavalchuk ✔ VK: https://vk.com/YauhenKavalchuk ✔ LinkedIn: https://www.linkedin.com/in/YauhenKavalchuk ✔ GitHub: https://github.com/YauhenKavalchuk ✔ VK (Группа): http://vk.com/webdevcom ✒ Поддержать развитие канала: https://github.com/YauhenKavalchuk/youtube/blob/main/sponsoring.md

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "CSS Grid. Полный курс"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "CSS Grid. Полный курс" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "CSS Grid. Полный курс"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "CSS Grid. Полный курс" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "CSS Grid. Полный курс"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "CSS Grid. Полный курс"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.