Как работать с grid css

Кратко о CSS Grid Layout

CSS Grid Layout — это самый мощный инструмент для создания разметки, который доступен в CSS на сегодняшний день. Это двумерная система, которая может содержать строки и столбцы (в отличие от модуля Flexbox, который в целом является одномерной системой). Предназначение Grid Layout — полностью изменить способ проектирования пользовательских интерфейсов, дизайн которых основан на сетке.

Да, с помощью CSS всегда можно было создать макет, но каждый подход имеет свои недостатки и, по сути, является хаком. Сначала для верстки использовались таблицы, затем float’ы, позиционирование и inline-block… Данные инструменты не были разработаны специально для создания колоночных макетов, и многие необходимые функции были недоступны (например, вертикальное центрирование). Решение практически каждой проблемы приравнивалось к «танцу с бубном».

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

Начало работы

Работа с Grid Layout похожа на Flexbox и заключается в применении специальных CSS-правил к родительскому элементу (grid-контейнеру) и к его дочерним элементам (grid-элементам). Для начала необходимо:

  • определить grid-контейнер путем добавления к нему свойства display со значением grid ;
  • задать размеры строк и столбцов, используя свойства grid-template-rows и grid-template-columns ;
  • поместить дочерние элементы в сетку при помощи свойств grid-row и grid-column .

Как и в случае с Flexbox, последовательность расположения HTML-элементов не сильно важна для Grid: при помощи CSS можно упорядочить объекты по вашему желанию. Это позволяет легко перестраивать макет, используя медиа-запросы. Только представьте себе, что для адаптации веб-страницы под разные размеры экрана вам понадобится написать всего несколько строк CSS-кода. Grid Layout однозначно является самым мощным модулем из когда-либо представленных.

Компоненты Grid

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

Grid-контейнер

Grid-контейнер (англ. grid container) — это элемент, которому задано свойство display: grid . Он является непосредственным родителем всех grid-элементов. Пример grid-контейнера:

Grid-элементы

Grid-элементы (англ. grid items) — прямые потомки grid-контейнера. Важно: потомки grid-элементов уже не являются потомками grid-контейнера. Пример grid-элементов:

Grid-линии

Grid-линии (англ. grid lines) — это разделительные линии, которые составляют структуру сетки. Линии могут быть горизонтальными и вертикальными (grid-линии строк и grid-линии столбцов) и располагаться по обе стороны от строки или столбца. Пример grid-линии:

Grid line CSS

Grid-путь

Grid track CSS

Grid-ячейка

Grid cell CSS

Grid-область

Grid area CSS

Поддержка браузерами

По состоянию на декабрь 2017 года модуль CSS Grid Layout поддерживается следующими браузерами:

  • Firefox 52+;
  • Chrome 57+;
  • Safari 10.1+;
  • Opera 44+;
  • Edge 16+;
  • IE 10-11 и Edge 12-15 (частичная поддержка с префиксом -ms- ).

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

Как работает CSS grid-autoflow?

Столкнулся с проблемой того, что не понимаю как работают "неявные гриды". Документацию читал, читал MDN, еще пару ресурсов. Остался открытый вопрос.

При этом получается такой результат example result

Почему пятый блок становится перед вторым?

Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.

Посмотрите другие вопросы с метками css css3 css-grid или задайте свой вопрос.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

CSS Grid Layout: Быстрый старт

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

Ваш браузер

CSS Grid Layout (известный своим друзьям как «Grid») находится в стадии разработки и пока что поддержка браузеров для него довольно слабая. Чтобы начать использовать это сейчас, вам либо нужно будет использовать IE11 (хотя он использует более старую версию спецификации), Microsoft Edge, Chrome Canary или Firefox Nightly.

Пожалуй, проще всего включить функции Экспериментальной веб-платформы в Chrome: chrome://flags/#enable-experimental-web-platformfeatures .

Experimental Web Platform features in Google ChromeExperimental Web Platform features in Google ChromeExperimental Web Platform features in Google ChromeНажмите сюда

Настройка сетки

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

Терминология

Проще говоря, эти направляющие или линии сетки, образуют горизонтальные и вертикальные направляющие сетки. Дорожки сетки служат рядами и столбцами, между которыми расположены отступы (gutters). Там, где пересекаются горизонтальные и вертикальные дорожки сетки, получаются ячейки, так же как в таблицах. Все эти важные термины нужно понимать.

На изображении ниже вы увидите демонстрационную сетку, показывающую:

  1. линии сетки
  2. столбцы
  3. строки
  4. ячейки

Для графического макета, это может показаться более знакомо, если мы используем одну и ту же сетку, но сужаем несколько дорожек, чтобы создать отстыпы между областями содержимого.

  1. отступы

Нам нужно прояснить один последний термин, прежде чем двигаться дальше:

  1. область сетки

Область сетки — это любая часть нашей сетки, огороженная четырьмя линиями сетки; может содержать любое количество ячеек сетки.

Пора строить эту сетку в браузере! Начнем с разметки.

Разметка сетки

Чтобы воссоздать сетку выше, нам нужен элемент контейнера; все, как ты любишь:

В нем мы собираемся разместить девять дочерних элементов.

Создайте форк этого начального pen’а, если хотите продолжать вместе. Я добавил несколько базовых стилей, чтобы визуально отличать каждый элемент сетки.

Правила сетки

Во-первых, мы должны объявить, что наш элемент контейнера является сеткой, используя новое значение свойства display :

Правильно, это было легко. Затем мы должны задать нашу сетку, указав, сколько дорожек сетки она будет иметь, как по горизонтали, так и по вертикали. Мы делаем это с помощью свойств grid-template-columns и grid-template-rows :

Вы увидите пять значений для каждого. Значения для столбцов grid-template-columns указывают, что «первый столбец должен быть 150px в ширину, второй 20px в ширину, третий в 150px» и т.д. для пяти столбцов, более или менее соответствующих нашему изображению финского флага. Пять значений для grid-template-rows содержат нечто подобное. Каждый из них будет auto по умолчанию, принимая высоту от содержимого, но мы хотим быть более точными с нашими отступами, давая им высоту 20px , поэтому нам нужно перечислить все пять рядов.

Каждому из наших элементов автоматически присвоена область сетки в хронологическом порядке. Не плохо, но что случилось с пунктами 2, 4 и 7? Они попали в вертикальные отступы, потому что наши отступы — вполне законные дорожки сетки и, если мы не будем более конкретными, именно эти их расположения в сетке будет принадлежать этим пунктам. Пришло время добавить некоторые правила для наших элементов.

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

Синтаксис, доступный нам в данный момент, может быть довольно сложным, но мы сделаем всё как можно проще, используя то, что на самом деле является сокращенным свойством. Мы начнем с нашего первого пункта, указав, что мы хотим, чтобы он начинался с grid-column 1 и grid-row 1:

Наш элемент автоматически заполнит минимальное свободное пространство между линиями сетки. Наш второй пункт немного менее очевиден. Мы также хотим, чтобы он начинался с grid-row 1, но мы хотим, чтобы он пропустил grid-column 2 и вместо этого начал в grid-column 3. Столбец 2 останется пустым, чтобы сформировать наш отступ.

Продолжаем в том же духе, перескакивая через наши отступы столбцов и рядов, заканчивая, наконец, нашим девятым пунктом:

Вывод

Вот и все, вы работаете с сеткой! Напомним четыре основных этапа:

  1. Создать элемент контейнера и задать ему display: grid; .
  2. Используйте этот же контейнер для определения дорожек сетки с помощью свойств grid-template-columns и grid-template-rows .
  3. Поместите дочерние элементы в контейнер.
  4. Укажите, где каждый дочерний элемент находится в сетке, указав его grid-column и grid-row .

В следующей части этой серии мы глубже разберем синтаксис сетки, улучший способ определения наших отступов, изучим гибкие макеты, единицу fr, функцию repeat() и продолжим работу с нашей простой сеткой. Увидимся там!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *