Макеты CSS Grid

Август 12, 2022

Содержание

2. Макеты Хронологически: использовали таблицы, обтекания (floats), позиционирование и инлайновые блоки (inline-block), Flexbox (но предназначен для «одномерных»
3. Grid Layout Набор свойств CSS Grid Layout предлагает систему компоновки на основе сетки, состоящую из строк
4. Grid Layout Grid представляет собой пересекающийся набор горизонтальных и вертикальных линий — один набор определяет столбцы,
5. Grid Layout Элемент HTML становится grid-контейнером при установки свойства display grid - формирует сетку как блок;
6. Grid Layout Header Navbar Article Ads
7. Grid Layout .row { display: grid; margin: auto; grid-template-rows: 60px 1fr ; grid-template-columns: 20% 1fr 15%;
8. grid-template-rows — это CSS свойство, которое определяет названия линий и путь размера функции grid rows. CSS
9. Отступы между рядами и колонками сетки grid-column-gap grid-row-gap grid-gap – свойство, определяющее желоба между строками и
10. Линия сетки Разделительные линии, составляющие структуру для сетки. Они могут быть вертикальными ("линии колонок") или горизонтальными
11. Линия сетки
12. Линия сетки Трек сетки Ячейка сетки Область сетки
13. Свойство grid-template-areas Свойство grid-template-areas определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства
14. Свойство grid-template-areas grid-template-columns grid-tempate-rows Дополнительная единица измерения: "fr (fraction)".
15. Свойство grid-template-areas .header{ grid-area: header; } .nav{ grid-area: nav; } .article{ grid-area: article; } .ads{ grid-area:
16. Выравнивание по горизонтали: justify-content: start | end | center | stretch | space-around | space-between |
17. Выравнивание по горизонтали: justify-content: start | end | center | stretch | space-around | space-between |
18. Создаем шаблон сайта с CSS Grid:
19. Изменяем шаблон сайта с CSS Grid: Вы можете изменить шаблон просто перераспределив грид-области в grid-template-areas. Таким
20. Изменяем шаблон сайта с CSS Grid:
21. Создаем простой CSS Grid размером 3 на 3 ячейки: Вот пример простого 3x3 грида с небольшими
22. Создаем простой CSS Grid размером 3 на 3 ячейки: Заполняем body , добавляем 9 блоков внутрь
23. Создаем простой CSS Grid размером 3 на 3 ячейки: Заполняем style #grid { display: grid; grid-template-rows:
24. Создаем простой CSS Grid размером 3 на 3 ячейки: Заполняем style #grid { display: grid; -
25. Создаем простой CSS Grid размером 3 на 3 ячейки: Функция repeat() Вы можете использовать функцию repeat()
26. Создаем шаблон сайта с CSS Grid Гриды включают в себя интуитивный синтаксис, в котором вы можете
27. Создаем шаблон сайта с CSS Grid
28. Создаем шаблон сайта с CSS Grid Код шаблона. Заполняем body, используя теги html 5 Header Article
29. Создаем шаблон сайта с CSS Grid Код шаблона. Прописываем стиль body { display: grid; - делаем
30. Создаем шаблон сайта с CSS Grid Код шаблона. Прописываем стиль body { display: grid; grid-template-areas: "header
31. Создаем шаблон сайта с CSS Grid Код шаблона. Прописываем стиль. Назначаем каждую из этих грид-областей каждому
32. Создаем шаблон сайта с CSS Grid Код шаблона. Прописываем стиль для основных тегов. header, footer, article,
33. Изменяем шаблон сайта с CSS Grid Изменяем шаблон Вы можете изменить шаблон просто перераспределив грид-области в
35. Скачать презентацию

Слайд 2

Макеты
Хронологически:
использовали таблицы,
обтекания (floats),
позиционирование и инлайновые блоки (inline-block),
Flexbox (но предназначен

для «одномерных» макетов, а не для сложных двумерных).

Слайд 3

Grid Layout
Набор свойств CSS Grid Layout предлагает систему компоновки на основе

сетки, состоящую из строк и столбцов, что упрощает проектирование веб-страниц без использования плавающих элементов и позиционирования.

Слайд 4

Grid Layout
Grid представляет собой пересекающийся набор горизонтальных и вертикальных линий —

один набор определяет столбцы, а другой строки. Элементы могут быть помещены в сетку, соответственно строкам и столбцам.
Поддержка браузерами
В 2020 году поддержка браузерами достигает 94 %

Слайд 5

Grid Layout
Элемент HTML становится grid-контейнером при установки свойства display
grid - формирует

сетку как блок;
inline-grid - формирует сетку как инлайновый блок;

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

Слайд 6

Grid Layout

Header

Navbar

Article

Слайд 7

Grid Layout
.row
{ display: grid; margin: auto;
grid-template-rows: 60px 1fr ;

grid-template-columns: 20% 1fr 15%;
grid-gap: 10px;
width: 1000px; height: 1000px;
justify-items: center; justify-content: space-between; grid-template-areas: "header header header" "nav article ads"; }

Слайд 8

grid-template-rows — это CSS свойство, которое определяет названия линий и путь

размера функции grid rows. CSS свойство grid-row определяет с какой строки в макете сетки будет начинаться элемент, сколько строк будет занимать элемент, или на какой строке завершится элемент в макете сетки. Является сокращенным свойством для свойств grid-row-start и grid-row-end.

Слайд 9

Отступы между рядами и колонками сетки
grid-column-gap
grid-row-gap
grid-gap – свойство, определяющее желоба между

строками и столбцами сетки.
.container{grid-gap: 10px 15px; }

Слайд 10

Линия сетки
Разделительные линии, составляющие структуру для сетки. Они могут быть вертикальными

("линии колонок") или горизонтальными ("линии строк") и располагаться по обе стороны от строки или столбца.

Слайд 11

Линия сетки

Слайд 12

Линия сетки
Трек сетки
Ячейка сетки
Область сетки

Слайд 13

Свойство grid-template-areas
Свойство grid-template-areas определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью

свойства grid-area. Повторение названия области приводит к тому, что содержимое охватывает эти ячейки. Точка означает пустую ячейку. Сам синтаксис предоставляет визуализацию структуры сетки. С помощью свойства grid-area мы можем назначить каждой из этих областей свое собственное имя. Именование областей еще не создает никакого макета, однако теперь у нас есть именованные области, которые мы можем в нем использовать.

Слайд 14

$Свойство grid-template-areas grid-template-columns grid-tempate-rows Дополнительная единица измерения: "fr (fraction)".$

Свойство grid-template-areas
grid-template-columns
grid-tempate-rows
Дополнительная единица измерения: "fr (fraction)".

Слайд 15

Свойство grid-template-areas
.header{ grid-area: header; }
.nav{ grid-area: nav; }
.article{ grid-area: article;

}
.ads{ grid-area: ads; }

Слайд 16

Выравнивание по горизонтали:
justify-content: start | end | center | stretch |

space-around | space-between | space-evenly;
Выравнивание по вертикали:
align-content

Слайд 17

Выравнивание по горизонтали:
justify-content: start | end | center | stretch |

space-around | space-between | space-evenly;
Выравнивание по вертикали:
align-content

Слайд 18

Создаем шаблон сайта с CSS Grid:

Слайд 19

Изменяем шаблон сайта с CSS Grid:
Вы можете изменить шаблон просто перераспределив

грид-области в grid-template-areas. Таким образом, если мы сменим на это: grid-template-areas: "nav header header" "nav article ads"; }

Слайд 20

Изменяем шаблон сайта с CSS Grid:

Слайд 21

Создаем простой CSS Grid размером 3 на 3 ячейки:
Вот пример простого 3x3 грида

с небольшими отступами между элементами.

Слайд 22

Создаем простой CSS Grid размером 3 на 3 ячейки:
Заполняем body ,

добавляем 9 блоков внутрь болока с классом grid

Слайд 23

Создаем простой CSS Grid размером 3 на 3 ячейки:
Заполняем style

Слайд 24

Создаем простой CSS Grid размером 3 на 3 ячейки:
Заполняем style

Слайд 25

Создаем простой CSS Grid размером 3 на 3 ячейки:
Функция repeat()
Вы можете

использовать функцию repeat() для повторяющихся объявлений значения размера элемента. Для примера, вместо того, чтобы делать это:
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;Мы можем сделать так:
grid-template-rows: repeat(5, 1fr);

Слайд 26

Создаем шаблон сайта с CSS Grid
Гриды включают в себя интуитивный синтаксис,

в котором вы можете виртуально «видеть» шаблон в коде, поэтому становится очень легко создавать и изменять сам шаблон.
Даже значительные изменения могут быть сделаны за несколько секунд.
Этот интуитивный синтаксис также помогает с адаптивным веб-дизайном. Создание разных шаблонов для разных устройств становится довольно несложной задачей при использовании грид разметки.

Слайд 27

Создаем шаблон сайта с CSS Grid

Слайд 28

Создаем шаблон сайта с CSS Grid
Код шаблона. Заполняем body, используя теги

html 5

Header

Article

Ads

Слайд 29

Создаем шаблон сайта с CSS Grid
Код шаблона. Прописываем стиль

Свойство grid-area это сокращение свойства, которое позволяет вам размещать грид-элементы в гриде. В нашем случае, мы просто отсылаемся к названиям, которые мы уже предварительно указали в grid-template-areas.

Слайд 32

Создаем шаблон сайта с CSS Grid
Код шаблона. Прописываем стиль для основных

тегов.

header, footer, article, nav, div { padding: 20px; background: gold; }

Слайд 33

Изменяем шаблон сайта с CSS Grid
Изменяем шаблон
Вы можете изменить шаблон просто

перераспределив грид-области в grid-template-areas.
Таким образом, если мы сменим на это:
grid-template-areas: "nav header header" "nav article ads" "nav footer ads";

Макеты CSS Grid

Содержание

МакетыХронологически:использовали таблицы, обтекания (floats), позиционирование и инлайновые блоки (inline-block),Flexbox (но предназначен

Grid LayoutНабор свойств CSS Grid Layout предлагает систему компоновки на основе

Grid LayoutGrid представляет собой пересекающийся набор горизонтальных и вертикальных линий —

Grid LayoutЭлемент HTML становится grid-контейнером при установки свойства displaygrid - формирует

Grid Layout Header

Header

Navbar

Article

Ads

Grid Layout.row { display: grid; margin: auto; grid-template-rows: 60px 1fr ;

grid-template-rows — это CSS свойство, которое определяет названия линий и путь

Отступы между рядами и колонками сеткиgrid-column-gapgrid-row-gapgrid-gap – свойство, определяющее желоба между

Линия сетки Разделительные линии, составляющие структуру для сетки. Они могут быть вертикальными

Линия сетки

Линия сеткиТрек сеткиЯчейка сеткиОбласть сетки

Свойство grid-template-areasСвойство grid-template-areas определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью

Свойство grid-template-areasgrid-template-columnsgrid-tempate-rowsДополнительная единица измерения: "fr (fraction)".

Свойство grid-template-areas.header{ grid-area: header; } .nav{ grid-area: nav; } .article{ grid-area: article;

Выравнивание по горизонтали:justify-content: start | end | center | stretch |

Выравнивание по горизонтали:justify-content: start | end | center | stretch |

Создаем шаблон сайта с CSS Grid:

Изменяем шаблон сайта с CSS Grid: Вы можете изменить шаблон просто перераспределив

Изменяем шаблон сайта с CSS Grid:

Создаем простой CSS Grid размером 3 на 3 ячейки:Вот пример простого 3x3 грида

Создаем простой CSS Grid размером 3 на 3 ячейки:Заполняем body ,

Создаем простой CSS Grid размером 3 на 3 ячейки:Функция repeat()Вы можете

Создаем шаблон сайта с CSS GridГриды включают в себя интуитивный синтаксис,

Создаем шаблон сайта с CSS Grid

Создаем шаблон сайта с CSS GridКод шаблона. Заполняем body, используя теги

Создаем шаблон сайта с CSS GridКод шаблона. Прописываем стиль для основных

Изменяем шаблон сайта с CSS GridИзменяем шаблонВы можете изменить шаблон просто

Похожие презентации

Макеты
Хронологически:
использовали таблицы,
обтекания (floats),
позиционирование и инлайновые блоки (inline-block),
Flexbox (но предназначен

Grid Layout
Набор свойств CSS Grid Layout предлагает систему компоновки на основе

Grid Layout
Grid представляет собой пересекающийся набор горизонтальных и вертикальных линий —

Grid Layout
Элемент HTML становится grid-контейнером при установки свойства display
grid - формирует

Grid Layout

Header

Grid Layout
.row
{ display: grid; margin: auto;
grid-template-rows: 60px 1fr ;

Отступы между рядами и колонками сетки
grid-column-gap
grid-row-gap
grid-gap – свойство, определяющее желоба между

Линия сетки
Разделительные линии, составляющие структуру для сетки. Они могут быть вертикальными

Линия сетки
Трек сетки
Ячейка сетки
Область сетки

Свойство grid-template-areas
Свойство grid-template-areas определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью

Свойство grid-template-areas
grid-template-columns
grid-tempate-rows
Дополнительная единица измерения: "fr (fraction)".

Свойство grid-template-areas
.header{ grid-area: header; }
.nav{ grid-area: nav; }
.article{ grid-area: article;

Выравнивание по горизонтали:
justify-content: start | end | center | stretch |

Выравнивание по горизонтали:
justify-content: start | end | center | stretch |

Изменяем шаблон сайта с CSS Grid:
Вы можете изменить шаблон просто перераспределив

Создаем простой CSS Grid размером 3 на 3 ячейки:
Вот пример простого 3x3 грида

Создаем простой CSS Grid размером 3 на 3 ячейки:
Заполняем body ,

Создаем простой CSS Grid размером 3 на 3 ячейки:
Функция repeat()
Вы можете

Создаем шаблон сайта с CSS Grid
Гриды включают в себя интуитивный синтаксис,

Создаем шаблон сайта с CSS Grid
Код шаблона. Заполняем body, используя теги

Создаем шаблон сайта с CSS Grid
Код шаблона. Прописываем стиль для основных

Изменяем шаблон сайта с CSS Grid
Изменяем шаблон
Вы можете изменить шаблон просто