Глава 9. Верстка на Grid Layout.

Все про grid. Наиболее полное руководство по css grid.

Здравствуйте! В этой статье я хотел бы обобщить все те свойства grid  layout,  которые были рассмотрены в предыдущих уроках по верстки на  grid.  Система grid  позволяет задавать направление элементам на странице сразу в 2-х направлениях в отличие от того же Flexboxa где можно задавать только в одном направлении.

css grid layout

Прочитать больше

Именованные grid-линии и функция repeat

Здравствуйте! Я уже  писал о именованных линиях в сетке grid.  А в этом уроке мне хотелось бы рассмотреть  более детально  функцию repeat в  грид верстке. С помощью этой функции repeat вы  можете размножить столбцы и строки, которые вы создаете  как раз между именованными grid-линиями:

Давайте как всегда рассмотрим на примере.

именованные грид линии и функция repeat

 

Прочитать больше

Как сделать макет страницы на Grid Layout

Здравствуйте! В этом завершающем уроке по верстке на грид  мне хотелось бы рассмотреть создание простейшего макета страницы  с помощью Grid Layout. Наш макет будет состоять из шапки, футера или подвала, области контента, панели навигации и боковой панели или сайдбара.

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

 

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

 

Прочитать больше

Области грида

Здравствуйте! В этом уроке мы рассмотрим такое понятие как  области в Grid Layout. Эти области мы можем задавать c помощью вертикальных и горизонтальных линий, которые и будут задавать  границу этой области. Области могут включать несколько ячеек грида и особенно полезны при определении семантических отношений между элементами на странице.

 

Области грида

 

Прочитать больше

Именованные grid-линии в Grid Layout

Здравствуйте! В этом уроке речь пойдет о  именованных линиях в  Grid Layout. Дело в том, что  в гридах  мы можем дать для каждой линии грида, название, указав это название в  квадратных скобках, а затем это можно использовать для  позиционирования элементов по сетке грид. Давайте для примера, создадим  такую веб-страницу:

Именнованные линии в грид

 

 

Прочитать больше

Направление и порядок элементов в сетке grid

Здравствуйте! В этом уроке в продолжении темы Верстка на grid рассмотрим как в гридах можно менять направление и порядок расположения элементов. А именно свойства grid-auto-flow и order.

Свойство grid-auto-flow

В грид-контейнере  всегда  все элементы располагаются  горизонтально то есть в  ряд, а как тоько места в контейнере больше нет, то элементы переносятся соответственно на следующую строку. А вот с помощью свойства grid-auto-flow  можно изменить направление элементов. Собственно  свойство принимает 2 значения:

  • row:  это значение по умолчанию, элементы  могут располагаться горизонтально,  а как только  места уже не будет хватать  будут  переноситься на следующую строку
  • column: элементы будут  располагаться вертикально друг под другом,  а как только места в столбце не будет  хватать, то  элементы  будут переноситься  на следующий столбец

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

 

 

Прочитать больше

Наложение элементов grid

Здравствуйте! На прошлом уроке мы с Вами рассмотрели позиционирование элементов в сетке грид, а на этом рассмотрим такую особенность, которая возникает при позиционировании элементов, как  наложение элементов в гриде.

Изменяя положение элементов вы легко можете накладывать элементы друг на друга, при этом будут  создаваться  слои из элементов. Например, определим следующий грид-контейнер:

 

наложение элементов grid

Прочитать больше

Позиционирование элементов в Grid

Здравствуйте! В этом уроке рассмотрим как позиционируются элементы в грид-сетке. По сути грид-сетка  представляет из себя  набор ячеек, которые получаются  на пересечении столбцов и строк. А сами строки и столбцы образуются с помощью grid-линий:

 

Позиционирование элементов grid

Прочитать больше

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

Здравствуйте! Продолжаем  разбиратться с  версткой на гридах. Итак из прошлых уроков  вы уже знаете как создавать строки и столбцы в грид как задавать размеры грид-элементам, а из этого урока вы узнаете как задавать интервалы между строками и столбцами в грид-сетке.   Итак для  задания интервалов  между столбцами и строками используются свойства grid-column-gap и grid-row-gap.

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

 

 

Прочитать больше

Размеры строк и столбцов Grid Layout

Здравствуйте! Продолжаем разбираться с версткой на основе Grid Layout. И в этом уроке в продолжении урока по строкам и столбцам grid разберем как задавать размеры строкам и столбцам в  сетке grid. Размеры можно задавть как фиксироваными, так и автоматическими. А сейчас давайте разбираться по порядку.

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

 

Прочитать больше

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: