Скачать "CSS сетка (GRID) | CSS для Профи"

Обложка аудиозаписи

Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.

Предыдущее видео: Задаем имена областям css сетки в grid | CSS для Профи Следующее видео: Верстаем макет Austera на Bootstrap 4 | Практика Bootstrap 4 | Часть 2

Верстаем макет Austera на Bootstrap 4 | Практика Bootstrap 4 | Часть 2

Верстаем макет Austera на Bootstrap 4 | Практика Bootstrap 4 | Часть 2

Канал: Андрей Андриевский

Задаем имена областям css сетки в grid | CSS для Профи

Задаем имена областям css сетки в grid | CSS для Профи

Канал: Andrievskii Andreii

Адаптивность, mobile first | CSS для Профи

Адаптивность, mobile first | CSS для Профи

Канал: Андрей Андриевский

Верстаем макет Austera на Bootstrap 4 | Практика Bootstrap 4 | Часть 1

Верстаем макет Austera на Bootstrap 4 | Практика Bootstrap 4 | Часть 1

Канал: Андрей Андриевский

Flexbox верстка | CSS для Профи

Flexbox верстка | CSS для Профи

Канал: Andrievskii Andreii

Наследование и инструменты разработчика | CSS для Профи

Наследование и инструменты разработчика | CSS для Профи

Канал: Андрей Андриевский

Позиционирование и наложение | CSS для Профи

Позиционирование и наложение | CSS для Профи

Канал: Andrievskii Andreii

Выравнивание и промежутки в flexbox | CSS для Профи

Выравнивание и промежутки в flexbox | CSS для Профи

Канал: Andrievskii Andreii

Верстка мобильного меню, немного JS | CSS для Профи

Верстка мобильного меню, немного JS | CSS для Профи

Канал: Andrievskii Andreii

Адаптивные изображения в верстке | CSS для Профи

Адаптивные изображения в верстке | CSS для Профи

Канал: Andrievskii Andreii

Верстка

HNML

HTML5

CSS

CSS3

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

верстка с нуля

курс верстки

css для профи

наследование

Родительские элементы

Каскадность CSS

CSS и наследование

inherit css

initial css

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

css grid tutorial

css grid

css3 уроки

css3 grid

css grid уроки

Анатомия сетки

00:00:00

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

00:00:03

по css для профи плейлисту

00:00:06

и сегодня пришло время поговорить о

00:00:08

такой технология которые уже многие

00:00:11

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

00:00:13

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

00:00:15

появится в этом плейлисте

00:00:17

это сетки да то есть как вы можете

00:00:19

наблюдать сейчас у меня в tightly

00:00:22

css сетки они же гряды очень интересная

00:00:26

технология очень мощная и в принципе я

00:00:29

думаю что она не уступает тем же флик

00:00:32

сам хотя для меня flex и попроще может

00:00:35

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

00:00:36

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

00:00:41

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

00:00:43

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

00:00:46

поменяться в чем преимущества и отличия

00:00:50

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

00:00:52

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

00:00:54

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

00:00:55

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

00:00:58

как работает у нас гряды гряды работают

00:01:02

так же как и flex со строками и

00:01:04

колонками но выглядит это немножко

00:01:06

по-другому давайте попробуем представить

00:01:08

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

00:01:12

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

00:01:15

еще где-то здесь у нас есть третья

00:01:18

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

00:01:20

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

00:01:24

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

00:01:27

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

00:01:29

так что у нас элементы элементы

00:01:34

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

00:01:36

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

00:01:37

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

00:01:41

второй элемент здесь будет третий

00:01:44

элемент

00:01:45

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

00:01:47

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

00:01:50

потом здесь будет тоже элемент какой то

00:01:53

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

00:01:56

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

00:01:58

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

00:02:01

элементную соответственно здесь тоже у

00:02:03

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

00:02:08

можем используя css гряды да то есть

00:02:11

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

00:02:14

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

00:02:17

то есть если говорить про то выходит как

00:02:21

выходит что у нас основная линия да то

00:02:25

есть основная линия разграничения она

00:02:27

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

00:02:31

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

00:02:34

а колонки ну колонки понятно они вот у

00:02:37

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

00:02:39

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

00:02:42

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

00:02:44

находится на так так так сейчас

00:02:49

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

00:02:51

да вот вот он идет этот блок он занимает

00:02:55

помимо того что две строки так он еще

00:02:57

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

00:02:59

flexor такое сделать ну не то что

00:03:02

невозможно я не сказал бы что невозможно

00:03:04

но реально сложно то есть пришлось бы

00:03:06

вот сюда закидывать в эту область

00:03:10

родительского родительскую строку внутри

00:03:13

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

00:03:16

ну как бы нам пришлось бы немножко и

00:03:18

защищаться а здесь у нас

00:03:20

при помощи годов это будет очень легко

00:03:22

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

00:03:25

познакомимся для старта для знакомства с

00:03:29

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

00:03:31

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

00:03:34

по 3 ячейки в каждой строке для этого мы

00:03:38

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

00:03:40

кстати система такая же как и flex ах мы

00:03:44

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

00:03:46

давайте сразу ему сдадим класс kreed так

00:03:50

grid вот и где-то здесь мы его закроем

00:03:56

этот div внутри дива это у нас будет

00:04:01

контейнер родительский для элементов

00:04:04

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

00:04:06

соответственно 6 отзывов поэтому мы

00:04:09

сделаем вот так вот div добавим сюда

00:04:13

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

00:04:17

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

00:04:20

такой циферка чтобы понимать какой блок

00:04:23

так теперь мы это дело копируем и шесть

00:04:28

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

00:04:30

у нас 2

00:04:32

это у нас 3 4 5 и 6 так чуть ли лишнюю

00:04:44

выделю

00:04:45

6 есть сохраняемся переходим браузер

00:04:48

обновляемся ну собственно вот

00:04:51

бога вилку наши блоки друг подробным

00:04:54

идут ведут себя как типичная верстка

00:04:58

следующее что нам нужно сделать это

00:05:00

прийти в css ну и соответственно задать

00:05:02

какие-то стили

00:05:03

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

00:05:07

я их задам я уже пройдусь прокомментирую

00:05:10

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

00:05:14

дисплее уже не flex agreed то есть мы

00:05:17

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

00:05:20

задать некоторые tex contemplate и для

00:05:23

нашего контейнера гряда дата это мы

00:05:25

сейчас

00:05:26

общему контейнер в котором находится

00:05:27

шесть блоков задаем 1 слой свойство

00:05:31

которое мы зададим это количество

00:05:34

grid template так нам нужно найти это

00:05:37

свойство гри template холмс это свойство

00:05:41

которое определяет сколько талонах у нас

00:05:44

будет да поэтому мы здесь так как у нас

00:05:47

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

00:05:48

соответственно 3 колоночки 1

00:05:51

fr1 ифр-1

00:05:54

есть я объясню потому что за значение fr

00:05:57

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

00:06:00

будет строк поэтому нам нужно так только

00:06:03

я здесь не то написал нам нужен template

00:06:07

вот так вот grid to play пмс это лишнее

00:06:11

а здесь нам нужен grid template roses in

00:06:23

grid template роуз есть и так как у нас

00:06:26

будет сегодня строке то мы задаем

00:06:29

соответственно де единицы эфир через

00:06:32

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

00:06:35

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

00:06:39

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

00:06:43

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

00:06:46

grid гэп и сделаем но я не знаю сделаем

00:06:50

один ем эти уступы 1-е

00:06:54

давайте сохранимся это делом обновимся

00:06:59

ну в целом уже картина как-то

00:07:00

вырисовываются да но здесь есть такая

00:07:04

маленькая проблемка то что нам нужно

00:07:07

задать какой-то фон как-то выделить эти

00:07:09

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

00:07:13

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

00:07:16

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

00:07:19

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

00:07:23

вот такую запись и лектора и здесь

00:07:25

зададим определенные свойства во-первых

00:07:28

мы зададим background

00:07:30

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

00:07:34

синим далее мы сделаем цвет текста

00:07:41

белым и

00:07:44

что мы еще можем сделать мы можем

00:07:46

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

00:07:50

циферки не прилегали плотно к нашему

00:07:54

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

00:07:58

border border

00:08:04

хотя нет зачем border давайте просто

00:08:07

border-radius для красоты один пиксель

00:08:11

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

00:08:14

будет 1 м все есть по идее сейчас все

00:08:17

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

00:08:19

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

00:08:22

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

00:08:25

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

00:08:27

создавали в нашем

00:08:28

html маркете да то есть вот первый

00:08:31

второй третий и внизу идут 4 5 6 самое

00:08:35

интересное что независимо от того как мы

00:08:36

будем двигать нашу ячейку да ну на наш

00:08:40

браузер контент ширина браузера

00:08:44

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

00:08:47

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

00:08:49

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

00:08:52

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

00:08:55

понятно мы объявляем нашему контейнеру

00:08:59

родительскому дисплей со свойством grid

00:09:02

то есть теперь мы говорим что будем

00:09:03

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

00:09:06

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

00:09:08

годам свойство которое отвечает за grid

00:09:12

им пайка мтс здесь мы задаем количество

00:09:15

колонок для нашего

00:09:17

родителя то есть если бы мы захотели

00:09:20

здесь сделать больше колонок то

00:09:22

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

00:09:24

дописывать еще один fr но есть такая

00:09:28

такой нюанс что количество колонок и

00:09:32

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

00:09:34

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

00:09:36

ведь если бы здесь допишите еще одну

00:09:38

колонку то есть самостоятельно не

00:09:41

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

00:09:45

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

00:09:47

какие показатели у вас будут здесь

00:09:49

заданный но по сути понимать то тут не

00:09:51

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

00:09:53

который верстает следующее это grid

00:09:57

template роуз ну все аналогично с

00:09:59

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

00:10:02

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

00:10:04

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

00:10:07

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

00:10:09

есть шесть дивов да мы могли бы вот

00:10:12

здесь задать одну строку а здесь

00:10:14

продублировать еще 3

00:10:16

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

00:10:18

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

00:10:21

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

00:10:24

бы три строки и в каждой строке по два

00:10:26

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

00:10:28

любом случае у нас должно шесть блоков

00:10:30

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

00:10:32

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

00:10:34

самостоятельно

00:10:38

теперь по поводу значения fr fr

00:10:42

это новая единица измерения которое мы с

00:10:44

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

00:10:46

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

00:10:50

единица которое применяется в рядах и

00:10:53

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

00:10:56

колонки то есть что такое доля колонки

00:10:59

если проводить аналогию с флик сами то

00:11:02

там было такое свойство flex гроув я

00:11:05

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

00:11:06

есть мы могли указать flex гроф для

00:11:09

какого-то

00:11:11

пространство сложить все единицы flex

00:11:14

гроу потом получить поделить

00:11:16

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

00:11:18

единицы каждая единица получала бы свой

00:11:20

размер соответственно здесь такая же

00:11:22

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

00:11:24

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

00:11:27

сохраняемся обновляем страницу видим что

00:11:31

теперь первый блок в два раза больше чем

00:11:33

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

00:11:36

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

00:11:39

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

00:11:40

объясню что вообще происходит

00:11:43

значит мы получаем получается мы имеем

00:11:50

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

00:11:52

есть вот такая ширина

00:11:54

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

00:11:58

нас будет я не знаю ну скажем так тысячу

00:12:03

400 пикселей да ну она не точно 1400

00:12:07

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

00:12:10

здесь вот есть количество единиц

00:12:12

измерения фариг их 4 до 21 и 1 значит

00:12:16

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

00:12:20

4 получаем единицу ну давайте поделим

00:12:24

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

00:12:26

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

00:12:30

20 40 360 от нас получается 360 и

00:12:36

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

00:12:39

единица то есть вот это 1 равна в нашем

00:12:42

случае 360 пикселей и что выходит что

00:12:46

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

00:12:49

два fr она будет 720 да здесь условно

00:12:52

720 а в этих по 360

00:12:55

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

00:12:57

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

00:13:00

потренироваться поэкспериментировать я

00:13:02

думаю все станет понятно

00:13:04

аналогично же аналогично это влияет и на

00:13:07

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

00:13:09

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

00:13:12

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

00:13:13

и видим что вторая строка стала в два

00:13:15

раза шире в два раза шире первой строке

00:13:18

то есть единицы вот эти фрк не

00:13:20

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

00:13:23

что на вторую это как бы значения

00:13:25

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

00:13:27

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

00:13:30

измерения здесь одни что для колонок что

00:13:32

для строк также следует заметить что мы

00:13:34

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

00:13:36

единицы измерения именно fr

00:13:38

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

00:13:41

задать величину и давайте зададим

00:13:42

величину 400 пикселей сохранимся

00:13:46

обновляем все вот здесь у нас 400

00:13:49

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

00:13:50

400 пикселей давайте наведем видим 400

00:13:53

на 82 дата с 400 пикселей ну а эти

00:13:57

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

00:14:00

нас осталось да вот у нас осталось вот

00:14:03

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

00:14:07

получается 400 пикселей вот а то что

00:14:11

осталось мы просто поделили на 2 потому

00:14:13

что у нас две единицы осталось и каждому

00:14:16

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

00:14:20

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

00:14:22

можно пикселей м и проценты все что

00:14:26

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

00:14:27

можем указать что мы хотим чтобы вот

00:14:30

этот блок был у нас всегда 50 процент

00:14:34

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

00:14:36

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

00:14:39

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

00:14:41

блоками и эти блоки уже самостоятельно

00:14:43

как-то распределяются

00:14:45

также мы можем задать не только одному

00:14:47

блоку мы можем задать и другим блокам

00:14:49

тоже процентное соотношение здесь мы

00:14:51

можем задать допустим 40 процентов а

00:14:55

этому останется либо один fr

00:14:57

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

00:14:59

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

00:15:02

процентном соотношении 10 процентов но

00:15:06

скорее всего из-за того вот ну то есть

00:15:08

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

00:15:10

отступаю нас нужно прописывать бог

00:15:13

сайзинг border бокс да ну мы этого не

00:15:15

делаем поэтому таком случае мы просто

00:15:17

можем оставить один fr

00:15:19

и он получит как раз то что осталось для

00:15:22

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

00:15:25

темплейт амита то есть template и так бы

00:15:28

шаблон шаблон которым мы задаем как себя

00:15:31

будет вести

00:15:33

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

00:15:36

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

00:15:37

сложного нет но это только начало и как

00:15:41

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

00:15:43

загуглил в шамбалу шаблоны html да и вот

00:15:47

нашел такое изображение

00:15:48

давайте сейчас попробуем разбит

00:15:51

логически его на сетку если бы нам

00:15:55

пришлось верстать этот макет при помощи

00:15:57

годов я для этих целей буду использовать

00:16:04

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

00:16:06

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

00:16:09

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

00:16:13

будет находиться вот в этом промежутке

00:16:14

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

00:16:17

это будет первая строка здесь мы можем

00:16:20

наблюдать сама страха у нас будет

00:16:22

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

00:16:25

сейчас я открою редактор

00:16:34

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

00:16:36

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

00:16:38

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

00:16:42

мы четко наблюдаем две колонки вот у нас

00:16:46

одна колонка

00:16:47

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

00:16:50

целом их можно делить четко по середине

00:16:52

ничего в этом страшного нету следующем

00:16:56

блоком следующей строкой у нас будет вот

00:16:59

этот участок вот он то есть там есть

00:17:02

такой пунктик незаметно или нет это на

00:17:04

второй блок здесь тоже у нас будет две

00:17:06

колонки

00:17:07

но мы уже четко наблюдаем что они имеют

00:17:10

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

00:17:16

следующей строкой соответственно у нас

00:17:18

будет вот этот участок

00:17:19

здесь мы можем выделить уже четыре

00:17:22

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

00:17:24

будем делать че ты даже 5 5 колонок

00:17:26

здесь мы будем делать соответственно

00:17:28

нибудь все одинаковой ширины до

00:17:30

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

00:17:32

один fr прописывать ну либо задавать нам

00:17:36

по 20 процентов это уже зависит от тех

00:17:37

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

00:17:39

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

00:17:43

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

00:17:45

вот сюда такую большую строку

00:17:48

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

00:17:51

в свою очередь может делиться либо вот

00:17:53

на такие ячейки либо вот на такие ячейки

00:17:56

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

00:17:59

строками поэтому мы пожалуй здесь еще

00:18:01

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

00:18:04

равнозначные 3 родительских элемента что

00:18:07

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

00:18:09

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

00:18:12

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

00:18:16

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

00:18:18

наше соотношение здесь я бы сделал один

00:18:22

fr и здесь тоже был бы один fr вы здесь я

00:18:26

бы сделал два fr а здесь был бы один fr

00:18:30

соответственно вот эта часть была бы в

00:18:32

два раза больше за эту здесь так как у

00:18:35

нас пять элементов то все можно

00:18:37

прописывать один fr как бы

00:18:40

это будет нормально здесь тоже три

00:18:42

равнозначных элементов поэтому везде

00:18:44

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

00:18:47

нормально та же самая ситуация у нас

00:18:49

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

00:18:53

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

00:18:55

спокойно подходите и разрисовывает и

00:18:58

макет и заранее понимаете как вам нужно

00:19:00

html верстать да почему заранее важно

00:19:03

вот такие вещи делать иногда можно это

00:19:06

делать прямо вот на макете да там

00:19:08

создали play

00:19:09

этот лист еще один и слой и туда

00:19:14

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

00:19:16

как верстать в будущем вы конечно

00:19:17

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

00:19:20

же не будете сразу северсталь то сразу

00:19:22

все кто-то верстает вот допустим вот эту

00:19:24

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

00:19:27

а потом вот эту и так далее кто-то

00:19:29

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

00:19:30

потом начинает дизайне но на чем я хочу

00:19:33

сделать акцент

00:19:34

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

00:19:36

потому что вот первый блок это один

00:19:38

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

00:19:40

какой-то геев он не важно как вы его

00:19:43

хедер назовете где вы задаете ему класс

00:19:46

и внутри этого дива вы уже помещаете два

00:19:49

дочерних элемента то есть здесь у нас

00:19:51

допустим будет nov потому что это

00:19:54

навигация до меню

00:19:55

а здесь у нас будет просто какой-то div

00:19:58

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

00:20:00

этого уже родительского контейнера и

00:20:02

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

00:20:05

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

00:20:08

дисплей grid вот так вот grid а эти

00:20:14

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

00:20:16

посредством display the grid template 2

00:20:20

игритт template

00:20:21

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

00:20:24

думаю что на этом урок закончим это по

00:20:26

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

00:20:29

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

00:20:31

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

00:20:34

вот таких картинок ну конечно вы можете

00:20:36

попробовать что-то сверстать при желании

00:20:40

но я накачаю вот таких вот template of и

00:20:42

ваша задача будет сесть и прорисовать

00:20:44

вот так вот раз

00:20:45

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

00:20:48

строки где колонки и какое соотношение

00:20:50

сторон на этом я с вами буду прощаться

00:20:53

благодарю что досмотрели это видео до

00:20:55

конца не забудьте поставить лайк а также

00:20:58

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

00:21:00

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

00:21:03

последних видео также напоминаю вы

00:21:06

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

00:21:09

и здесь есть реквизиты также есть

00:21:12

webmoney кошельки просто говорю что я

00:21:14

такая возможность есть это будет

00:21:16

мотивировать чаще делать уроки

00:21:18

ну и как вы понимаете мне тоже нужно за

00:21:20

что-то жить на этом с вами прощаюсь

00:21:21

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

00:21:25

пока

Описание:

ПОДДЕРЖАТЬ АВТОРА И КАНАЛ: https://www.liqpay.ua/uk/checkout/card/380638562538 Webmoney: Z166344793421 R369744777501 U871336351200 Телеграмм чат: https://t.me/joinchat/FQXf-hN9LRuCosQCWtzY3g - Использование первой реальной системы разметки CSS — сетки. - Возможности CSS-сетки. - Компоновка элементов с помощью сетки. - Совместное применение flex-блоков и CSS-сетки для создания целостной разметки веб-страницы. МАТЕРИАЛЫ УРОКА: https://drive.google.com/drive/folders/1DkcfJ0aL6IfnGiF-Q5BMh__1RrZCEMIs?usp=drive_open БАЗОВЫЙ КУРС ПО HTML & CSS: https://www.youtube.com/watch?v=GFqCX2AefQk

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "CSS сетка (GRID) | CSS для Профи"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "CSS сетка (GRID) | CSS для Профи" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "CSS сетка (GRID) | CSS для Профи"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "CSS сетка (GRID) | CSS для Профи" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "CSS сетка (GRID) | CSS для Профи"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "CSS сетка (GRID) | CSS для Профи"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.