Урок-18. “CSS Grid”

1-1.Властивість display: grid;

grid container #1

grid container #2

1-2.Властивість display: inline-grid;

inline-grid container #1

inline-grid container #2

2.Створення колонок і рядків в CSS Grid

3.Відступи між рядками та колонками

4.Явні і неявні сітки

5.Властивість grid-auto-flow

6.Робота з розмірами в CSS Grid

7.Функція repeat в СSS Grid

10 - ширший за всіх!

8.Розміщення елементів всередині Grid-контейнера

Main

9.Властивості `auto-fill` та `auto-fit`

10.Інструкція `minmax()`

item-1

item-2

item-3

item-4

10-1.Приклад використання функції `minmax()` в `grid-template-columns`

Елемент такої самої ширини, як і вміст, але не більше 300px - !!!

Елемент із гнучкою шириною, але не менше 200px

Негнучкий елемент з фіксованою шириною 150px.

11.Grid template areas

Main

12.Grid Alignment and Justification

item-1

item-2

item-3

item-4

item-5

item-6

item-7

item-8

item-9

item-10

13-1.Вкладені сітки (Nested Grids)

Image-1

Text 1

Image-2

Text 2

Image-3

Text 3

Image-4

Text 4

13-1.Приклад використання вкладених сіток (Nested Grids) для адаптивної та респонсивної версток

Skills

Speaking

Improve your English skills and confidence. Live classes and interactive lessons online. 20% extra free for a limited time only
Learn English online and improve your skills through our high-quality courses and resources – all designed for adult language learners.
Writing

One of the most important and extensive areas of natural science, the science that studies substances, also their composition
Reading

Perception and response actions of the user resulting from the use and or up coming use of the product,
system or service
Listening

Here you can find activities to practise your listening skills. Listening will help you to improve your understanding