Css grid примеры адаптивных сеток

Как использовать CSS Grid для создания адаптивного веб-макета

Макет CSS Grid — это двухмерная сетка, предназначенная для помощи веб-разработчикам в разделении элементов на столбцы и строки для создания согласованного и бесшовного макета для веб-приложений.

Логика CSS Grid заключается в том, что, если разработчик берет такой элемент, как div и отображает в нем сетку, он может затем разбить элемент на столбцы и строки — вместе известные как треки — где элементы можно взять и разместить в сетке. С CSS Grid, все это может произойти без дополнительной работы с использованием свойств позиционирования ( top , right , left , bottom ).

Есть случаи, когда можно использовать фреймворки CSS, а в других — CSS Grid, но, как и в большинстве случаев в веб-разработке, это зависит от вашего варианта использования.

В этой статье мы сосредоточимся на базовом дизайне с использованием строк, столбцов и областей для создания простого адаптивного веб-приложения с использованием CSS Grid.

CSS Grid: базовая терминология

Давайте начнем с того, что уделим несколько минут тому, чтобы понять некоторые из основных основ CSS Grid.

1. Контейнер сетки — ящик, в котором находится сетка. Это основной строительный блок CSS Grid.
2. Ячейка сетки — одна за другой элемент на сетке
3. Область сетки — одна или несколько ячеек, которые имеют форму квадрата или прямоугольника (но не L-образной формы).
4. Сетка треков – совокупность строк и столбцов, определяемых с помощью свойств grid-template-columns и grid-template-rows
5. Grid gaps — помогают создать на сетке промежутки. Вы не можете размещать содержимое внутри промежутка сетки.
6. Явная сетка — определяется вами с помощью grid-template-columns и grid-template-rows
7. Неявная сетка — определяется для вас браузером

Начало работы с CSS Grid

Отображение контейнера сетки и элементов

Контейнер сетки является отправной точкой для отображения сетки на элементе. Чтобы начать работу с сеткой, мы должны сначала отобразить сетку в контейнере, используя свойство ниже:

В CSS Grid отношения между контейнером grid и его элементами (elements) являются отношениями родителя и потомков соответственно. Каждая сетка имеет контейнер, содержащий элементы, и каждый элемент, помещенный в сетку, является элементом сетки.

Когда вы делаете контейнер grid ( display: grid; ), все его прямые дочерние элементы автоматически становятся элементами сетки.

Но отображение элементов в виде сетки само по себе мало что делает. Именно здесь вступают в игру другие концепции, такие как grid-template-columns и grid-template-rows , как вы увидите в нашем демо-фрагменте кода приложения ниже.

Использование единицы измерения fr и нотации repeat()

Хотя мы всегда можем использовать фиксированные единицы измерения при определении сеток, такие как px , CSS Grid layout также вводит новую единицу измерения, называемую fr .

Блок fr представляет собой часть доступного пространства в сеточном контейнере и может быть использован для создания гибких дорожек сетки.

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

Функция repeat() также помогает обеспечить согласованность и может быть использована для повторения всего или части трек листа например так:

Демо-версия: создание веб-приложения с CSS-Grid

Я включил полный набор кодов здесь, но ниже я разобью фрагменты кода с некоторыми внутренними комментариями, чтобы показать, как построить веб-приложение с помощью CSS Grid.

HTML

Сначала мы создадим простой HTML шаблон и заполним его фиктивным текстом, чтобы помочь установить некоторую структуру:

CSS

Здесь мы свяжем таблицу стилей (CSS) с нашим шаблоном HTML и реализуем макет с помощью CSS Grid. Мы добавили несколько комментариев к фрагментам кода для большей ясности.

body < background: #F1F0EE; margin: 0; >.container < /* first, create a grid container */ display: grid; /* define the amount and size of each column. Here we define 4 columns with equal fractions */ grid-template-columns: repeat(4, 1fr); /* create horizontal tracks as rows and here we create 4 rows with different sizes */ grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr; /* define where each element will be in the grid. We achieve this with grid-template-areas */ grid-template-areas: "nav nav nav nav" "main main main main" "about about about sidebar" "contact contact contact sidebar" "footer footer footer footer"; /* we can set gaps - gutters between the rows and columns*/ gap: 0.5rem; height: 100vh; font-weight: 800; font-size: 12px; color: #004d40; text-align: center; >/* Styling the Nav starts here */ nav < background-color: #3770F6; grid-area: nav; >nav ul < list-style: none; font-size: 16px; font-weight: bolder; float: left; >li < display: inline-block; >li a < color: #ffffff; >/* Styling the Nav ends here */ a:hover < color: #FF7F50; >main < grid-area: main; >main h2 < font-weight: bolder; >main p < text-align: left; >.sidebar < background: #D3D4D7; grid-area: sidebar; >.about < background: #D7D6D3; grid-area: about; >.contact < background: #BDBCBB; grid-area: contact; >footer < background-color: #3770F6; grid-area: footer; color: #ffffff; >footer a < color: #ffffff; >a < text-align: center; display: block; font-family: inherit; text-decoration: none; font-weight: bold; margin: 1rem; >/* For */ @media only screen and (max-width: 550px) < .container < grid-template-columns: 1fr; grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr; grid-template-areas: "nav" "sidebar" "main" "about" "contact" "footer"; >> 

CSS Grid: основные выводы

Есть много способов достичь схожих целей в CSS. Использование CSS Grid — это всего лишь один из способов размещения элементов в строках и столбцах для разработки согласованных, бесшовных веб-приложений с удобными интерфейсами.

Для получения дополнительной информации о CSS Grid я рекомендую W3 CSS Grid Layout Module и MDN CSS Grid.

Источник

CSS Grid: адаптивная верстка. Полноценный гайд с примерами макетов

Кстати, если ячейки отдалить друг от друга и увеличить своего рода margin, то образуется «разрыв» и «зеленые линии» станут пустотой.

Как создать CSS Grid?

• «display: grid» — создает сетку в режиме блока, растягивается во всю ширину и занимает свое пространство ; все , что было до него и после него , переносится на новые строки;
• «display: inline-grid» — создает сетку в режиме строки, остальные элементы обтекают такой контейнер, а он сам получается «встроенным».

• grid-template-rows: размер размер размер …;
• grid-template-columns: размер размер размер …;

Grid CSS: пример адаптивной верстки

Для понимания, что можно сделать, используя CSS Grid, предлагаем вам пример макета сайта, который будет выглядеть , как на представленном ниже рисунке. Такие макеты очень распространены в сети. Как они делаются — описано ниже рисунка.

Код HTML:

Заголовок

Основной контент

Код CSS Grid:

body

display: grid;

grid: «header header header» 80px

«nav section aside» 1fr

«footer footer footer» 50px

/ 15% 1fr 18%;

min-height: 100vh;

>

header

nav

section

aside

footer

Это просто пример, как разбить CSS сетку без дополнительных стилей. Обычно еще нужно указывать какие-нибудь личные стили для каждого элемента, хотя бы:

• background,
• padding,
• margin,
• font-family,
• и др.

Заключение

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

Источник

Как создавать адаптивные сетки

Адаптивная вёрстка позволяет создать сайт, способный динамично меняться в зависимости от устройства, на котором его открывают, и размера его экрана. С помощью адаптивных сеток возможно сделать дизайн, который легко перестраивается при необходимости.

Один из самых удобных методов — создание адаптивных сеток с помощью медиавыражений в CSS.

👉🏼 Медиавыражения — это способ, который помогает определить в стилях характеристики браузера или предпочтения пользователя, а затем применить стили или запустить другой код на основе этих параметров.

То есть на экране смартфона сайт будет выглядеть иначе, чем на экране ноутбука, чтобы пользователю было комфортно взаимодействовать с интерфейсом. Медиавыражения меняют ширину экрана, ориентацию устройства, настройки операционной системы и многое другое.

Любое медиавыражение начинается директивы @media , её указание необходимо, чтобы выражение заработало.

В скобках указывают характеристики — условия, при которых медиавыражение меняет вид сайта соответственно указанным свойствам.

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

Шаг 1. Получаем заказ, изучаем макет от дизайнера

В макете предусмотрены нужные размеры и особенности дизайна на разных устройствах. Оптимально начинать вёрстку с дизайна для мобильных устройств. Затем с помощью медиавыражений несложно сделать другие версии сайта.

Шаг 2. Размечаем мобильную версию сайта

Создаём разметку сайта в файле HTML, учитывая смысловое предназначение каждого блока

Шаг 3. Прописываем стили и создаём сетки

Указываем стили всем элементам в CSS. Верстаем сетки, используя инструменты Grid или Flexbox. В зависимости от вида сетки выбирается одно или другое свойство.

Grid — это технология, позволяющая создавать сетки, где каждый элемент может занимать определенное количество ячеек и строк.

В свою очередь Flexbox — это способ размещения элементов в одну в строку или колонку, с возможностью адаптации их размера и порядка в зависимости от дизайна сайта.

• Когда использовать флексы, а когда гриды
• Флексы для начинающих

Например, для создания сетки навигации для мобильного устройства используем флексы, выстраиваем элементы сверху вниз:

Шаг 4. Добавляем вьюпорт

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

Атрибут width=device-width означает, что размер сайта на устройстве равен размеру в пикселях, который указаны в CSS.

Атрибут initial-scale говорит о том, что сайт на устройстве будет выглядеть именно так, как описано в CSS, один к одному.

Шаг 5. Указываем стили для планшетной версии сайта

Сайт полностью свёрстан для мобильного устройства, приступаем к созданию размеров для планшета. Для этого указываем медиавыражения, которые будут перестраивать вёрстку под размер экрана.

Когда экран устройства становится шире, мобильная вертикальная сетка перестраивается в горизонтальную, элементы распределяются по пространству экрана.

Пример сетки на разных устройствах:

Чтобы сетка адаптировалась к ширине экрана, пишем в характеристике условия, при выполнении которых сетка будет меняться. Например, когда экран устройства будет шириной от 780px , сетка перестроится:

@media (min-width: 780px) < .navigation < display: flex; flex-direction: row; margin: 0 auto; >> @media (min-width: 780px) < .navigation_item < width: 390px; margin: 0 auto; >> 

Шаг 6. Приступаем к десктопной версии сайта

Здесь сетки могут ещё больше видоизменяться, в каких-то ситуациях лучше ввести гриды вместо флексов:

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

min-width и max-width — CSS-правила начинают работать от указанного значения и выше, включая значение. Когда пользователь открывает сайт на устройстве, ширина которого начинается от min-width , вёрстка перестраивается, блоки размещаются соответственно подходящему дизайну.

@media (min-width: 1200px) < .navigation < display: flex; justify-content: space-between; width: 540px; margin: 0 auto; >> @media (max-width: 1200px) < .nav-list < width: 60px; >> 

min-height и max-height — применяют, когда адаптируют плотность интерфейса для экранов разной высоты — например, для интерфейса электронной почты.

@media (min-height: 1024px) < .user-list < >> @media (max-height: 1024px) < .navigation < >> 

resolution — характеристика, которая говорит о плотности экрана. Её применяют с приставкой min- , чтобы указать на экраны с плотностью выше указанной.

@media (min-resolution: 2dppx) < .navigation < background-image: url("images/background@2x.png"); >> 

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник