Урок 8. CSS Grid Layout. Обзор макета и создание HTML-структуры

Содержание материала:

CSS Grid: адаптивная верстка реального макета

Всем привет, дорогие друзья! Сегодня мы на реальном примере сверстаем крутой адаптивный макет, используя технологию CSS Grid. В данном уроке мы не будем использовать никаких фреймворков для адаптивной верстки и в полной мере насладимся чистым CSS и новыми возможностями CSS Grid. В конце видео мы протестируем верстку на реальном мобильном устройстве 🙂

Результат HTML вёрстки: Смотреть

Полезные материалы и референсы:

  • Рефересны, исходники: Скачать
  • Урок «Gulp для самых маленьких»
  • Урок «CSS Gr >

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

CSS Grid Layout — лучшие практики. Часть 2

Автоматическое или обозначенное расположение элементов

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

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

Какой метод позиционирования выбрать?

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

Решите вместе со своей командой, хотите ли вы именовать строки, используя Template Areas, или будете сочетать различные типы макетов. Я поняла, что мне нравится использовать для небольших компонентов Grid Template Areas. Однако нет ничего правильного или неправильного. Выясните, что лучше для вас.

CSS Grid в сочетании с другими механизмами размещения

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

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

В моей собственной работе я склонна применению Flexbox для компонентов, где я хочу, чтобы натуральный размер этих компонентов в сильной степени влиял на их расположение, опираясь на другие элементы вокруг. Я также часто использую Flexbox, потому что хочу воспользоваться выравниванием, принимая во внимание, что свойства Box Alignment (https://drafts.csswg.org/css-align/) доступны только для использования в Flexbox и CSS Grid. Также я могу применить контейнер Flex с одним дочерним элементом, только чтобы выровнять его.

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

Вложенные CSS Grid и элементы Flex

Нет абсолютно никаких проблем с созданием Grid Item(элемент сетки) как Grid Container (контейнер сетки), в результате чего одна сетка будет располагаться внутри другой. Вы можете сделать то же самое с Flexbox, создав Flex Item и Flex Container. Также можно сделать Grid Item и Flex Container или Flex Item и Grid Container — ни одна из этих задач не вызовет трудностей!

А вот то, что на данный момент нет возможности сделать — это вложить одну сетку в другую и использовать во вложенной сетке структуру треков родительского грида, т.е. линии вложенного грида не выравниваются по линиям родительского грида. Это было бы очень полезно, и это то, что должен решить предложенный в втором уровне спецификации по гриду элемент под названием Subgrid. Вложенный грид в настоящее время становится новым гридом, поэтому нужно быть осторожным с изменением размеров, чтобы обеспечить соответствие размеров дочерних треков с размерами родительских.

Вы можете располагать на одной странице несколько гридов одновременно

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

Отказы и поддержка старых веб-браузеров

«Грид, в сочетании с @supports, позволил нам лучше контролировать количество различных вариантов макета. Он также отлично поработал с нашим подходом прогрессивного улучшения, что означает, что мы можем вознаградить тех, у кого есть современные веб-браузеры, не препятствуя доступу к контенту тем, кто не использует новейшие технологии».

— Джо Ламберт, работающий на сайте rareloop.com

В опросе многие люди упоминали более старые обозреватели, однако мнения разделились поровну между теми, кто считает поддержку старых версий трудной, и те, кто считает ее легким благодаря Feature Queries, и тот факт, что грид замещает другие методы создания макетов. Я подробно написала о механизме создания этих резервных копий в статье «Использование CSS Grid: поддержка веб-браузеров без Grid».

В общем, современные обозреватели гораздо более совместимы между собой, чем их предыдущие коллеги. На текущий момент браузеры содержат гораздо меньше ошибок, и если вы правильно используете HTML и CSS,то в разных обозревателях вы будете видеть одно и тоже.

Конечно, есть ситуации, когда один веб-браузер еще не поддерживает определенную спецификацию или некоторых ее частей. С CSS Grid нам очень повезло, что в веб-браузерах он был полностью реализован в течение короткого промежутка времени. Поэтому наше внимание должно быть сосредоточено на тестировании кода в браузерах с его поддержкой и без. Возможно, вы также решили использовать префиксные версии свойств -ms в IE10 и IE11, которые затем потребует тестирования в качестве третьего типа обозревателей.

Веб-браузеры, поддерживающие современный CSS Grid Layout (а не версию IE), также поддерживают Feature Queries. Это означает, что вы можете протестировать его поддержку перед использованием.

Тестирование в браузерах без поддержки грида

При использовании fallbacks (резервный вариант) для веб-браузеров без поддержки грида (или с использованием префиксных версий -ms для IE10 и 11) вы захотите проверить, как они отображают его. Для этого вам нужен способ просмотра вашего сайта в выбранном обозревателе.

Я не стала бы применять подход для проверки вашего Feature Query, путем задания некорректных значений свойствам грида. Такой способ будет работать только в том случае, если ваша таблица стилей невероятно проста, и вы помещаете абсолютно все, что связано с вашим гридом внутри Feature Query. Это очень хрупкий и трудоемкий способ работы, особенно если вы активно используете грид. Кроме того, старый программы могут не поддерживать не только CSS Grid Layout, но и другие свойства CSS.

Есть несколько простых способов наставить себя на правильный путь тестирования ваших fallbacks. Самый простой способ — если у вас достаточно быстрое подключение к Интернету и вы не платите абонентскую плату — это воспользоваться таким сервисом, как BrowserStack. Это сервис, который позволяет просматривать веб-сайты (даже те, что разрабатываются на вашем компьютере локально) на целом ряде реальных веб-браузеров. BrowserStack предлагает бесплатные учетные записи для проектов с открытым исходным кодом.

Чтобы протестировать локально, моим предложением было бы использовать виртуальную машину с установленным вами целевым обозревателями. Microsoft предлагает бесплатные загрузки виртуальной машины с версиями IE для IE8, а также Edge. Вы также можете установить на виртуальную машину более старую версию браузера без поддержки CSS Grid. Например, получив копию Firefox 51 или ниже. После установки вашего старого Firefox обязательно отключите автоматические обновления, как описано здесь, так как в противном случае он будет спокойно обновлять себя!

Затем вы можете протестировать свой сайт в IE11 и в Firefox на одной виртуальной машине (это гораздо менее хрупкое решение, чем неправильные значения свойствам). Настройка может занять около часа или около того, но после вам будет очень удобно тестировать свои fallback’и.

Отучивание от старых привычек

«Это был мой первый раз, когда я использовал грид, так что было много понятий, которые нужно изучить, и свойства чтобы понять. Я нашел наиболее трудным это отучиться от того, что делал годами, например, очистка float’ов и упаковка в контейнеры в виде div’ов.

Многие люди, ответившие на опрос, упомянули о необходимости отучения от старых привычек и о том, насколько макеты будет легче изучать людям, совершенно не знакомым с CSS. Я склонна согласиться. При обучении людей лично у начинающих мало проблем с CSS Grid, в то время как опытные разработчики стараются использовать его как одномерный макет. Я видела попытки применения в «сетчатых систем» с применением грида контейнеров, которые нужны лишь для сеток основанных на float или flex.

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

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

Заключение

В завершение, приведу очень короткий список текущих наилучших практик! Если вы обнаружили, что какие-то рекомендации не работают или работают не совсем корректно в вашей ситуации, напишите о них в комментариях.

  • Держите в уме возможность переупорядочивания контента. Убедитесь, что визуальное представление не теряет связь с структурой данных в документе.
  • Тестирование с использованием реальных целевых веб-браузеров с локальной или удаленной виртуальной машиной.
  • Не забывайте, что старые методы компоновки все еще актуальны и полезны. Попробуйте разные способы реализации шаблонов. Не зацикливайтесь на CSS Grid.
  • Знайте, что, будучи опытным разработчиком интерфейсов, у вас, вероятно, будет целый набор предубеждений о том, как должен создаваться макет. Постарайтесь смотреть на новые методы свежим взглядом, а не адаптировать их к старым приемам.
  • Продолжайте разбираться. Мы все еще новички в этом. Проверяйте свою работу и делитесь своими открытиями.

Четыре различных способа создания HTML / CSS макета для сайта

В этой статье я хочу рассказать о четырех различных способах создания макетов с несколькими столбцами. Каждый способ имеет свои плюсы и минусы. Чтобы продемонстрировать, как эти макеты работают и выглядят, я создал простой сайт, на котором используются HTML-таблицы , свойство CSS float , CSS-фреймворк и флексбокс.

Первый день новой жизни

В этой статье мы используем четыре различных способа верстки сайта:

  • Таблицы . Вам даже не нужно использовать отдельный файл стилей. И, что более важно, они не ломаются.
  • Float . Мы говорим о свойстве CSS . Это довольно распространенный способ создания макета веб-страницы. И в этом случае нам необходимо будет использовать отдельную таблицу стилей. Файл HTML используется, только чтобы определить контент веб-страницы. Если вы хотите выровнять контент, то должны использовать файл CSS .
  • CSS-фреймворки . Они работают так же, как JavaScript-фреймворки . Подключите исходный файл в заголовке (например,
  • ), и он готов к работе! Вам не нужно задавать значения свойств самостоятельно. Для этого используются классы, которые разработчики фреймворка приготовили для вас.
  • Флексбокс . Флексбокс — это короткое название CSS Flexible Box Layout Module . Это более новая по сравнению со свойством float технология. Основной принцип флексбокс — предоставить контейнеру возможность изменять ширину, высоту и порядок содержащихся в нем элементов. Если вы хотите наилучшим образом заполнить все свободное пространство, нужно использовать для верстки div флексбокс. Например, для охвата всех типов устройств и размеров экрана. Плавающий контейнер будет расширять содержащиеся в нем элементы, чтобы заполнить весь экран.

Теперь пора попробовать каждый из них.

Способы создания

Это дизайн моего сайта:

Таблицы

Для создания шапки сайта я использовал свойство position: relative . Давайте попробуем сделать это с нуля, используя табличную верстку.

Вот мой HTML-код :

И вот, что я получил:

Как видите, это не та же самая шапка. Она выглядит знакомо, но ее расположение немного изменилось. И вот почему. Вы знаете, что таблицы отлично подходят для симметричного позиционирования. Но для других целей они подходят не так хорошо. Также обратите внимание на громоздкость кода. Но у таблиц есть одна полезная особенность. Вот какую хитрость мы можем сделать:

И вы увидите, что макет стал выглядеть так:

Таким образом, можно легко определить, что где находится, если запутались.

Теперь плохая новость. Еще раз посмотрите на HTML-код . Это простая таблица, но представьте, как она будет выглядеть с десятками ячеек. Вот какой исходный код у меня:

В этом случае вам нужно использовать блочную верстку сайта с помощью CSS . Применив что-то наподобие этого:

Вы указываете переместить

Float

Свойство float широко применяется при блочной верстке сайта. Мы будем использовать это свойство для вывода основной области размещения контента. Небольшой пример поможет вам лучше понять, как это работает:

В нем есть три разноцветных элемента

И вот, что у нас получилось:

При верстке слоями вы указываете через свойство float , что хотите, чтобы ваш элемент

Следующий плавающей элемент будет смещаться, пока не встретит первый, и так далее. Следующий за плавающим элемент будет обтекать его как вода! Но если вы не хотите спускать все свои объекты « на воду «, можно использовать свойство clear . Оно определяет, какие стороны элемента не должны обтекать плавающие элементы.

Вот как выглядит часть моего макета для основного контента:

Теперь давайте сделаем ее плавающей:

Мы добавили несколько стилей и получили что-то вроде этого:

У нас есть большой блок для статей и блок поменьше для новостей. Мы использовали свойство float: left и для изображений. Обратите внимание, как они обтекаются тегом

. Этот макет выглядит, как ваш любимый журнал.

CSS-фреймворки

Если вы немного ленивы

Если у вас нет времени возиться с кодом при CSS верстке , можно использовать один из CSS-фреймворков . В нашем примере мы используем Bootstrap . Для этого нужно скачать его и подключить в HTML-файле .

Bootstrap содержит сетку, которая состоит из 12 равных по размеру столбцов. HTML-элементы упорядочиваются так, чтобы охватывать различное количество столбцов. Таким образом, создаются пользовательские макеты. Каждая часть контента выравнивается относительно этой сетки через указанное количество столбцов, на которые они растягиваются.

В этом примере мы создали строку. После этого поместили в нее два равных по размеру столбца. Каждый из них охватывает шесть из двенадцати доступных столбцов.

Далее мы создаем раздел « Скоро в прокате «. Он будет содержать четыре постера фильмов. Путем несложных математических вычислений определяем, что каждый из них будет охватывать по три столбца.

Я также добавил класс thumbnail , чтобы сделать постеры красивее. Он также содержится в Bootstrap .

И вот, что я получил:

Выглядит неплохо. И при верстке сайта из PSD вам даже не нужно редактировать файл CSS . Но вы не видите, что происходит внутри.

Флексбокс

Классика завтрашнего дня

Мы будем использовать флексбокс, чтобы создать раздел сайта « Бокс-офис «. Вот HTML-код :

Вот CSS-код для контейнера “ boxoffice ”:

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

Для флексбокса задаются два типа свойств. Первый используется для управления гибким контейнером, второй — для заполнения гибких элементов. Рассмотрим подробно первый тип.

По умолчанию, главная ось горизонтальная, поэтому элементы будут растягиваться в ряд. Для изменения основной оси мы можем использовать свойство flex-direction . Оно может принимать следующие значения: row , row-reverse , column и column-reverse . Мы будем использовать значение column . Давайте также добавим свойство height . Для чего это нужно, вы поймете чуть позже:

Вот как выглядит наш небольшой бокс-офис:

Мы использовали свойство height , потому что не хотим, чтобы контейнер флексбокса перекрывал изображение стрелки в нижней части фона.

Флексбокс также дает возможность вносить изменения в содержимое без изменения HTML-файла . Например, если вы хотите поменять расположение элементов на противоположное, вы можете изменить значение flex-direction на columns-reverse . Это изменит направление флексбокса на противоположное. Но вам нужно будет также изменить порядок расположения элементов внутри контейнера.

Для этого мы используем свойство justify-content . Доступные для него значения: flex-start , flex-end , center , space-between и space-around . Для него нужно установить значение justify-content , которое эквивалентно flex-end .

И вот каким образом отразились эти изменения:

Также можно перемещать элементы вдоль поперечной оси. Для этого используется свойство align-items. Вы можете задать для него следующие значения: flex-start , flex-end , center , baseline или stretch .

Чтобы использовать его, добавьте свойство в селектор флексбокса:

Все элементы сместятся к правому краю:

Есть еще одно полезное свойство — flex-wrap . Представьте, что бокс-офис быстро увеличивается. Что произойдет, если он станет больше, чем контейнер? Ничего плохого, если вы используете свойство flex-wrap .

Топ-пост этого месяца:  Пагинация в AngularJS

Попробуйте добавить следующий код:

И вот, что в результате получится:

Как видите, элементы теперь укладываются в несколько столбцов. Значение по умолчанию для этого свойства – nowrap . При его применении элементы будут располагаться в один столбец ( или строку — это зависит от значения flex-direction ). Можно использовать значение wrap-reverse . Тогда элементы будут располагаться в обратном порядке.

Есть много полезных свойств. С их помощью вы можете изменять параметры каждого отдельно взятого элемента контейнера. Например, свойство order позволяет изменять порядок размещения элементов без необходимости вносить изменения в HTML-код .

Какой из способов выбрать?

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

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

Float . Свойство float является наилучшим выбором, если у вас не слишком высокие требования. Это простой способ сделать ваш сайт более привлекательным. Его применение для изображений является, как по мне, признаком хорошего тона. Только нужно помнить, как работают свойства float и clear . Этого достаточно для начала.

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

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

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

Но, как я уже сказал, это относительно новая функция CSS . Поэтому нужно учитывать ее поддержку браузерами . Вот подборка ошибок , которые мне удалось найти, и возможные пути их решения.

Надеюсь, теперь вы знаете, что такое верстка сайта. До новых встреч!

Данная публикация представляет собой перевод статьи « 4 Different HTML-CSS Layout Techniques to Create a Site » , подготовленной дружной командой проекта Интернет-технологии.ру

Видеокурс «Технология CSS Gr >

Автор: Денис Булыга — Webformyself

В видеокурсе находится вся необходимая информация, как для новичков, так и более продвинутых разработчиков, изучив которую, можно начать самостоятельно заниматься версткой сайтов c нуля на достаточно продвинутом уровне. Благодаря курсу новички в сжатые сроки могут изучить HTML, CSS и новейшие технологии верстки, чтобы в последующем постепенно начинать верстать более сложные макеты. В этом пособии на практике используются самые актуальные в 2020 году и ближайшей перспективе технологии для верстки: Flexbox и CSS Grid. При этом все рутинные процессы автоматизированы при помощи последней версии Gulp 4.

Смотреть видео:

Технология CSS Grid. Руководство по адаптивной верстке. (Денис Булыга — Webformyself)

  • Блок №1. Верстка макета Landing Page

В первой части курса вы познакомитесь с макетом Landing Page. Эта часть включает в себя 27 уроков общей продолжительностью более 6 часов. Вы начнете с обзора того, что предстоит сверстать и увидите все составляющие макета. Далее будет показано несколько способов, как из макета Photoshop возможно экспортировать изображения для верстки. Вы увидите возможности автоматизации, пошаговую установку и настройку необходимых плагинов и, конечно же, настройку сборки при помощи Gulp 4, которую вы в дальнейшем сможете использовать для своей работы. Увидите описание HTML-разметки каждого из блоков, стилизацию и адаптацию их под различные разрешения экранов, чтобы верстка выглядела одинаково на различных устройствах. В итоге Вы увидите полноценную верстку Landing Page.

  • Урок 1. Обзор PSD-макета и готовой верстки Landing Page

В этом уроке будет показана готовая верстка страницы Landing Page и разобраны все блоки и элементы из которых состоит данная страница.

  • Урок 2. Экспорт изображений для верстки из Adobe Photoshop CC 2020

В данном уроке будет рассмотрено два способа экспорта изображений из графического редактора Photoshop CC 2020, а также создание иконок при помощи копирования SVG.

  • Урок 3. Установка Node Js, Gulp CLI и инициализация проекта

В текущем уроке Вы узнаете, как установить утилиты Node.js и Gulp CLI глобально на ваш компьютер. Вкратце рассмотрена структура файлов и папок, инициализация проекта, и установка всех необходимых модулей для дальнейшей работы.

  • Урок 4. Начало создания автоматизированной сборки при помощи Gulp 4

В этом видео Вы увидите создание сборки на Gulp 4, в которой производится декомпозиция файлов и настройка таких задач как: компиляция SCSS кода в CSS, конкатенация и минификация скриптов, копирование и удаление файлов проекта.

  • Урок 5. Создание дополнительных задач по автоматизации

В данном видео сборка будет дополнена следующими задачами: минификация изображений, создание SVG-спрайтов, генерация изображений формата Web, установка слежения за изменением различных файлов и запуск сервера и автоматическая перезагрузка при помощи Browsersync.

  • Урок 6. Подготовка к верстке и детальный обзор проекта

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

  • Урок 7. Создание HTML-разметки для шапки сайта

В данном видеоуроке увидите написание HTML-разметки шапки сайта, логотипа и блока меню.

  • Урок 8. Полная стилизация шапки сайта

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

  • Урок 9. Создание разметки для блока баннера

В этом видео начнется работа над блоком баннера и создание для него всей необходимой структуру.

  • Урок 10. Стилизация баннера и написание собственного миксина

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

  • Урок 11. HTML-структура блока с преимуществами

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

  • Урок 12. Полная стилизация преимуществ

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

  • Урок 13. HTML-разметка блока с работами

В этом видеоуроке Вы узнаете о реализации блока Works.

  • Урок 14. Написание стилей для блока работ

В этом уроке создается необходимая сетка для блока при помощи CSS Grid и верстка элементов согласно макету.

  • Урок 15. Доступность интерактивных элементов и адаптация блока работ

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

  • Урок 16. Написание структуры для информационного блока

В данном видео увидите написание HTML-разметки для блока Responsive.

  • Урок 17. Полная стилизация информационного блока

В этом видео увидите стилизацию и адаптацию при помощи медиа запросов блок Responsive.

  • Урок 18. Создание разметки для блока скиллов

В этом уроке увидите написание HTML-структуры блока со скиллами.

  • Урок 19. Стилизация блока со скиллами

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

  • Урок 20. Анимация линий блока прогресса

В этом видеоуроке создается JavaScript-функция, при помощи которой будет реализована плавная анимация линий прогресса элементов при прокрутке страницы.

  • Урок 21. HTML-структура блока новостей

В данном видео создается HTML-разметка для блока новостей.

  • Урок 22. Полная стилизация блока с новостями

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

  • Урок 23. HTML-разметка блока карусели

В этом уроке увидите создание HTML-структуры для блока с каруселью.

  • Урок 24. Стилизация карусели и подключение плагина OwlCarousel

В данном видеоуроке увидите стилизацию блока карусели, установку и подключение плагина OwlCarousel, а при помощи медиа запросов и настроек карусели адаптацию ее под различные разрешения.

  • Урок 25. HTML-разметка блока контактов

В этом видеоуроке увидите создание структуры блока контактов и подключения Яндекс карты при помощи конструктора карт Яндекса.

  • Урок 26. Полная стилизация блока контактов

В этом уроке увидите стилизацию и адаптацию под различные разрешения блок контактов.

  • Урок 27. Полная реализация подвала

В этом уроке завершается верстка страницы Landing Page.

  • Блок №2. Верстка главной страницы сайта студии

Во второй части курса показана верстка главной страницы сайта студии. Данная часть включает в себя 25 уроков общей продолжительностью более 6 часов. Этот блок является более сложным по сравнению с предыдущим, т.к. его реализация будет полностью «резиновой», используя при этом адаптивную типографику, SVG-спрайты, ретинизацию изображений и многие другие возможности, о которых вы узнаете в данном блоке. Начнем с обзора макета, после чего будет рассмотрен еще один способ экспорта графики, а именно SVG из Adobe Illustrator. Далее подготовка к верстке, создание проекта и установка в него необходимых зависимостей, и шаг за шагом реализация имеющихся блоков. В результате, используя уже готовую сборку проекта при помощи Gulp 4 из предыдущего блока курса, вы полностью увидите процесс верстки главной страницы сайта студии.

  • Урок 1. Обзор макета

В данном уроке Вы увидите PSD-макет, который в последующих уроках будет верстан. Также вкратце рассказано о некоторых особенностях, которые будут использоваться при его верстке.

  • Урок2.ЭкспортSVGизAdobe Illustrator

В этом видео увидите еще один способ сохранения векторных изображений при помощи графического редактора Adobe Illustrator.

  • Урок 3. Подготовка к верстке

В данном видеоуроке Вы познакомитесь со структурой проекта.

  • Урок 4. HTML-разметка шапки сайта

В этом видеоуроке увидите написание HTML-структуры шапки сайта.

  • Урок 5. Стилизация шапки сайта

В этом видеоуроке увидите, как создается Grid-сетка для шапки сайта, а также ее стилизация.

  • Урок 6. Адаптив шапки сайта

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

  • Урок 7. Улучшение типографики

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

  • Урок 8. Создание разметки для блока меню

В этом видеоуроке увидите создание HTML-разметки для блока меню.

  • Урок 9. Стилизация блока меню

В данном уроке увидите написание CSS-стилей для блока меню и кнопки гамбургера.

  • Урок 10. Доработка меню

В этом уроке увидите завершение реализации блока меню с добавлением JavaScript-кода.

  • Урок 11. HTML-разметка блока проектов

В этом видеоуроке увидите создание HTML-разметки для блока проектов.

  • Урок 12. Стилизация блока проектов. Часть 1

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

  • Урок 13. Стилизация блока проектов. Часть 2

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

  • Урок 14. Стилизация блока проектов. Часть 3

В этом видео размещается информация внутри элементов на свои места согласно дизайн макета.

  • Урок 15. Адаптация блока проектов

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

  • Урок 16. HTML-разметка блока студио

В данном видео добавляется разметка для блока студио.

  • Урок 17. Стилизация блока студио. Часть 1

В этом видео увидите начало стилизации блока студио, создание сетки для данного блока и написание CSS для некоторых внутренних элементов.

  • Урок 18. Стилизация блока студио. Часть 2

В этом видео увидите написание CSS-стилей для блока с работниками.

  • Урок 19. Адаптация блока студио

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

  • Урок 20. HTML-разметка блока с новостями

В данном видео увидите начало работы над блоком новостей и создание необходимой HTML-разметки данного блока.

  • Урок 21. Стилизация блока новостей

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

  • Урок 22. Адаптация блока новостей

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

  • Урок 23. Разметка подвала

В данном видеоуроке увидите написание HTML-структуры подвала страницы сайта.

  • Урок 24. Полная стилизация подвала сайта

В этом видео увидите полную стилизацию и адаптацию подвала сайта под различные разрешения.

  • Урок 25. Подключение Google maps

В данном видео познакомитесь с API Google Maps, при помощи которого будет подключена и настроена Google-карта для страницы сайта.

БОНУСЫ

  • Бонус 1. Премиум-курс «Учебник по основам HTML для начинающих»

Автор: Андрей Бернацкий

Учебник призван заложить фундамент и дать базовые основы языка гипертекстовой разметки текста HTML всем новичкам, включая наиболее востребованные в верстке теги. Изученных тегов вам будет вполне достаточно для создания сайтов практически любой сложности, и при этом объем материалов будет приемлемым для качественного усвоения и запоминания, не забивая и без того перегруженную голову новичка лишними деталями. Задания для самостоятельного выполнения дадут возможность лучше изучить HTML и закрепить полученные знания на практике. В курсе разбирается форматирование текста, работа с изображениями, ссылками, списками, таблицами и формами.

  • Бонус 2. Премиум-курс «Учебник по основам CSS для начинающих»

Автор: Андрей Бернацкий

При верстке веб-страниц HTML отвечает за разметку страницы, то есть за ее построение. А за оформление страницы, то есть за ее дизайн и внешний вид, отвечает CSS. В учебнике по основам CSS для начинающих подробно изучаются необходимые для создания сайтов CSS-свойства. Изученных свойств вам будет вполне достаточно для создания сайтов практически любой сложности, и при этом количество свойств будет приемлемо для качественного усвоения и запоминания. В курсе предусмотрены задания для самостоятельного выполнения, что поможет закрепить знания из курса на практике. Разделы CSS, которые изучаются в учебнике: способы подключения CSS к странице и назначения классов, оформление текста, свойства фона, размеры и отступы, границы элементов, плавающие блоки, позиционирование и видимость блоков.

  • Бонус 3. Премиум-курс «Верстка сайта для начинающих»

Автор: Андрей Бернацкий

При создании сайтов этап верстки идет после этапа дизайна. В курсе по верстке сайта для начинающих есть приближение к реальной разработке, и верстается HTML-страница из готовой картинки формата PSD, созданной дизайнерами на предыдущем этапе. Курс рассчитан преимущественно на новичков в сайтостроении и верстке. Но также будет полезен и тем разработчикам, у которых уже есть знания по HTML и CSS, но не хватает навыков в верстке реальных макетов с нуля. Макет, который верстается в курсе, имеет очень распространенную, двухколоночную структуру. Поэтому, выполнив верстку данного макета и полностью разобравшись с ней, у вас больше не будет сложностей с версткой сайтов подобной структуры. В курсе пошагово показано, как выполнить верстку на примере конкретного проекта.

  • Бонус 4. Премиум-курс «HTML5. Основы»

Автор: Андрей Бернацкий

В данном премиум-курсе рассматриваются основы HTML5, наиболее востребованные и актуальные в процессе верстки. HTML5 — это не полностью новая технология или полностью новый стандарт, а дополненный новыми возможностями HTML4. Поэтому все что работало в HTML4 будет работать и в HTML5. Конечно, есть некоторые конструкции, которые уже устарели и в HTML5 не вошли, о чем детально рассказано в самом курсе. HTML5 предоставляет более широкие функциональные возможности и упрощает процесс создания сайтов, нежели более устаревшие спецификации, которые все еще активно «по старинке» используются незадачливыми верстальщиками. В уроках курса продемонстрированы важные новшества, которые появились в HTML5 и которых не было в предыдущих спецификациях стандарта.

  • Бонус 5. Премиум-курс «CSS3. Основы»

Автор: Денис Булыга

В данном премиум-курсе рассматриваются основы CSS3, наиболее востребованные и актуальные в процессе верстки. Основными преимуществами CSS3 являются простота использования, ускорение процесса разработки и оформления web-страниц, уменьшение размера кода, практически 100% кроссбраузерность, при этом множество свойств уже можно использовать без префиксов. Наиболее прогрессивная и «прокачанная» спецификация CSS3 предоставляет нам множество возможностей и свойств, при помощи которых можно реализовывать различные визуальные эффекты, некоторые из которых ранее применялись только с использованием JavaScript или изображений. Данный видеокурс от команды Webformyself поможем вам в изучении множества новых возможностей и свойств CSS3, которые сделают вашу работу более продуктивной и комфортной!

  • Бонус 6. Премиум-курс «Теория и практика адаптивной верстки»

Автор: Денис Булыга

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

    Бонус 7. Премиум-курс «CSS Gr >Автор: Денис Булыга

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

  • Бонус 8. Премиум-курс «Flexbox»

Автор: Денис Булыга

В новом премиальном видеокурсе рассматривается CSS-модуль Flexbox, используя который можно верстать гибкие макеты различной сложности, при этом не используя float и inline-block. Если вы имеете какие-то начальные знания в области верстки, то это будет плюсом при прохождении курса, однако и новички могут осваивать данную технологию с нуля. На протяжении курса изучаются все основные свойства, которые нам предоставляет Flexbox, а также по шагам разобраны необходимые в процессе верстки полезные функции модуля. В каждом уроке разбирается не только теория, но и приводятся примеры, касающиеся изучаемых CSS-свойств Flexbox. В практической части курса показывается верстка макета с чистого листа, начиная от написания структуры HTML и заканчивая CSS-стилями.

  • Бонус 9. Премиум-курс «Препроцессор Sass»

Автор: Денис Булыга

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

  • Бонус 10. Мини-курс «Построение сеток при помощи Masonry»

Автор: Денис Булыга

В данном бонусном мини-курсе вы узнаете о JavaScript-библиотеке Masonry, при помощи которой можно создавать сетку и компактно располагать элементы внутри нее по вертикали, при этом анализируя их высоту. Также узнаете о возможных параметрах данного плагина и увидите подключение и построение сетки для макета из второго блока курса.

Технология CSS Gr >Технология CSS Grid. Руководство по адаптивной верстке

Верстка — это создание веб-страниц с помощью специальных языков. Верстка — это также интересная, постоянно меняющаяся область деятельности в создании сайтов. Это процесс перевода макета сайта, созданного дизайнером в графической программе, в HTML-страницу. При этом используются специальные языки, которые для этого предназначены: HTML, CSS, JavaScript. Соответственно, верстальщик — это человек, который занимается кодированием HTML-страницы.

Верстальщик — это профессия, в которой можно постоянно развиваться, и очень много смежных профессий в веб-разработке неразрывно связаны с версткой.

CSS Grid – высший пилотаж в верстке

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

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

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

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

Возможности CSS Grid

Фиксированные и гибкие размеры полос Фиксированные и гибкие размеры полос

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

Расположение элемента Расположение элемента

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

Создание дополнительных полос для хранения контента Создание дополнительных полос для хранения контента

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

Управление выравниванием Управление выравниванием

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

Управление перекрывающимся контентомУправление перекрывающимся контентом

CSS Grid позволяет поместить в одну ячейку сетки более одного элемента. Также области могут частично перекрывать друг друга. Управление перекрывающимся контентом можно удобно контролировать с помощью свойства z-index

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

Благодаря курсу новички в сжатые сроки могут изучить HTML, CSS и новейшие технологии верстки, чтобы в последующем постепенно начинать верстать более сложные макеты.

В этом пособии на практике используются самые актуальные в 2020 году и ближайшей перспективе технологии для верстки: Flexbox и CSS Grid. При этом все рутинные процессы автоматизированы при помощи последней версии Gulp 4.

Кратко о CSS Gr >

CSS Gr > Предназначение 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-путь
Grid-ячейка
Grid-область

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

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

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

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

В следующем уроке мы рассмотрим свойства для grid-контейнера.

CSS Grid Layout: возвращение табличной вёрстки. Часть 1

Новый метод размещения содержания на веб-странице появившийся относительно недавно под названием CSS Grid Layout является замечательным подтверждением известной истины, что новое ­— это хорошо забытое старое.

Как возвращение Одиссея

Земля, как известно, круглая. И чем дальше от нас что-то отдаляется, тем ближе оно к нам с другой стороны и, следовательно, вот-вот внезапно вернётся. Поэтому Одиссей, как бы далеко он не уплыл, обязательно возвратится к своей Пенелопе.

За 30 лет, в течение которых развивается Всемирная Паутина, многое, связанное с этой мировой Сетью, казалось бы, от нас ушло навсегда. Современный Веб это совсем не та легковесная Паутина 90-х годов. И в первую очередь от нас ушла именно легкость создания и работы веб-страниц. Нынешние веб-сайты тяжеловесны и неповоротливы. Они обрюзгли и раскабанели от чрезмерного злоупотребления JavaScript и мультимедийными излишествами. Казалось бы, больше не осталось места сайтам с простой вёрсткой табличками, примером чего можно назвать старую версию сайта «Компьютерные Вести».

Но, видимо, интернет как и Земля круглый. Поэтому что именно вёрстка веб-страниц табличками внезапно, как Одиссей к Пенелопе, к нам и возвратилась. Новый метод размещения содержания на веб-странице, появившийся относительно недавно под названием CSS Grid Layout, можно смело назвать возвращением старой доброй вёрстки HTML-страниц таблицами.

CSS Grid Layout со второй попытки

Табличное расположение содержания на веб-странице — естественная и понятная концепция каждому человеку. Это как раскладывать вещи по полочкам в шкафу.

Естественно, вёрстка веб-страниц табличками в свое время была очень популярна. Для создания макета страницы использовались стандартные табличные HTML-теги TABLE, TR, TD и т.д.

Противоестественным же было использование табличных HTML-тегов одновременно и для табличного представления данных, и для создания шаблона веб-страницы. Поэтому еще во времена тотального господства MS Internet Explorer была предпринята попытка реализовать вёрстку таблицами посредством каскадных таблиц стилей CSS через свойство display: table. Но тогда в Microsoft не сочли эту идею интересной. А вместо неё для создания макета веб-страниц широкое распространение получила концепция «всплывающиех блоков» float div или же в просторечии «флоатов». Эта концепция является господствующей для веб-дизайна и по сей день.

Но, видимо было нужно обязательно намучиться с этими «всплывающими», как известная субстанция, «флоатами», которые постоянно всплывают не так и не там где надо, чтобы снова вернутся к идее простой и понятной таблицы. И в 2020 году Рабочая Группа Каскадных Таблиц Стилей (CSS Working Group) создала спецификацию CSS Grid Layout Level 1, которая возвращает нас снова к идее табличной вёрстки.

[CSS Grid Layout]

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

Технологически вёрстка посредством CSS Grid Layout осуществляется специальным модулем каскадных таблиц стилей браузера через свойство display: grid. Многоцелевое свойство CSS display указывает способы отображения HTML-элемента — например, блочное отображение block, строчное inline и отсутствие отображения none.

С появлением CSS Grid Layout табличные HTML-теги теперь рекомендуется применять только для форматирования табличной информации.

Также для CSS Grid Layout придумали и оригинальную собственную терминологию, призванную семантически отделить табличную вёрстку через CSS и HTML-таблицы. Вместо термина «таблица» используется понятие «сетка» — отсюда и название «CSS Grid». Колонки и строки называются «треки» или «полосы». Пространство и границы между ячейками называются «аллеи» или «дорожки». Что, правда, не мешает авторам документации и мастер-классов по CSS Grid по-прежнему использовать термины «таблица», «колонки», «строки». Потому что так понятнее.

И так как технологическое и семантическое различие CSS Grid Layout и HTML-таблиц не отрицает их общий смысл, то в первую очередь возможности вёрстки по сетке следует изучить по отношению к вёрстке табличными тегами. Что ниже мы и сделаем.

Компактность и лаконизм CSS Grid Layout

Для примера, создадим с помощью CSS Grid классический народный трёхколоночный табличный шаблон, подобный шаблону старого сайта «Компьютерные Вести». Это где в первой строке макета обычно размещаются заголовочные данные — название, логотип, выходные данные и т.д. А во второй строке таблицы помещаются меню, главное содержание и баннеры с котиками.

[Классический табличный макет веб-страницы]

Теперь создадим html-файл, где в заголовке head в правилах CSS зададим специальный контейнер, состоящий всего из пары строк:

Здесь мы создаем grid-контейнер mygrid, объявив его сеткой-таблицей через свойство display: grid. А потом через свойство grid-template-columns задаём шаблон таблицы из трёх колонок шириной 125, 468 и 125 соответственно.

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

Модуль браузера CSS Grid внутри блока mygrid автоматически сформирует трёхколоночную сетку-таблицу. Автоматически будет вычислено нужное количество строк и ячеек в этих колонках, в которые модуль CSS Grid разместит все прямые потомки контейнера каждый по отдельности в отдельной ячейке слева направо, начиная с верхней левой ячейки. В результате в два щелчка пальцами получаем олдскульный табличный шаблон сайта.

Можно поиграть в панели разработчика браузера, чтобы при желании добиться полного соответствия внешнего вида примера с олдскульным сайтом «КВ» — добавив, например, синевы в меню и прочих ништяков.

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

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

Ещё важно отметить, что свойство display: grid можно задавать любому блочному элементу HTML-страницы — , , и т.п. И потому при создании шаблона страницы целиком или её части можно обойтись даже без блоков

Таким образом, подводя итог первой части обзора CSS Grid Layout отметим, что в первую очередь новая технология возвращает Вебу былую лёгкость. И для создания макетов веб-страниц снова достаточно простого блокнота.

Во второй части мы рассмотрим функциональные возможности CSS Grid Layout. Это явное форматирование сетки, нотация, фракции, объединение ячеек, z-index, адаптивная вёрстка.

CSS Grid или Bootstrap?

  • CSS / CSS3
  • Flexbox CSS
  • JavaScript
    • JavaScript с нуля
    • JS и Jquery
  • Уроки по 1С-Битрикс
    • Контент менеджер
      • Авторизация на сайте
      • Элементы управления
      • Работа с информацией
      • Управление структурой
    • Сайт на 1С-Битрикс
      • Создание landing page
  • Видео новости
  • Модули расширений
  • Расширения и плагины
    • Bootstrap

Дополнительное видео

ПОДПИСКА на УРОКИ

CSS Grid или Bootstrap, что лучше?

Этим вопросом задаются многие, а также многие спрашивают, для чего нужна модульная сетка в web-дизайне?

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

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

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

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

От нас требуется сделать соответственную верстку под эти разрешения и заполнить блоки соответствующей информацией.

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

В уроке рассмотрим трех колоночный макет сетки при помощи этих двух гигантов, а начинаем мы с построения блоков.

Создаем модульную сетку

See the Pen wPYoNz by Denis (@Dwstroy) on CodePen.

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

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

Первая блок будет занимать шесть колонок по ширине, за ней два блока в три колонки. Сетка будет состоять из двух рядов, где второй ряд будет поделен на две части, первая часть отведена под первый блок, соответственно вторая под остальные три блока. В конечном итоге получили четырех блочную сетку.

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

Размечаем модульную сетку в Bootstrap

Затем, когда у нас есть дизайн по модульной сетки, делаем его разметку. Создаю index файл, разверну doctype . Прописываю заголовок «Верстка блоков по сетки Bootstrap» подключение, скрипта и jquery нам не понадобятся, их удаляю. Сверну область head для лучшего обзора.

Создаем четыре блока по дизайну модульной сетки. Делаем обертку с классом .container , в ней создаем блок с классом .pow , в который вкладываем четыре блока с классами .col-md- . В каждой ячейка размещаем блок с классом .img-bloc для оформления картинки. В нем вкладываем картинку, а ниже заголовок третьего уровня, в котором пропишем номер текущего блока.

Таких блоков будет четыре штуки, нажимаем Tab , и перед нами развернулась html структура.

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

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

В конечном итоге получаем такую структуру.

Создадим файл стилей и оформим эти контейнеры.

Переходим в стили и оформляем эти контейнеры. Делаю отступ сверху у основного контейнера на 50 пик.

У блоков с классом .img-bloc , уберем все лишнее за его пределами overflow: hidde , задам position: relative . Для тех, кто знаком с flexbox , задействуем его для выравнивания заголовков. Для этого прописываем display: flex и так как блоки будем адаптировать, зададим нижние отступы в 30 пик.

Переходим к оформлению заголовков. Позиционируем их абсолютно.

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

Для их выравнивания по горизонтали, основному блоку пропишем justify-content: center , я для выравнивания по вертикали align-items: center .

Зададим для всех картинок ширину в 100%, а для четвертого блока придется задать дополнительный класс cont-4 , для того что бы работать с его высотой, так как он у нас не стандартный.

В стилях пропишем для него ограничение по высоте до 275 пик.

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

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

Да и бог с этой вложенностью, подумают многие из вас. Сама вложенность это мелочи, что нам, жалко наштопать каких-то блоков!

И давайте посмотрим ее адаптацию, что у нас получается, а выходит следующее, блоки все выстраиваются в одну колонку и они просто огромные. Но это все мелочи, решается добавлением класса col-sm-6 .

В итоге получили четырех колоночный блок.

И вроде все нормально, но давайте еще больше ужмем экран, и тут снова видим огромные картинки, блоки перестроились в одну колонку.

Что мы делаем в таком случае, как уменьшить блоки?

Думаю много догадались, добавляем еще один класс col-xs-8 .

И что мы видим, вроде бы блоки уменьшились, но в тоже время они не по центру. Для их выравнивания по горизонтали добавляем col-xs-offset-2 , то есть, не учитываем две первые ячейки.

Теперь замечательно все адаптируется. Проверяем далее на других разрешений экрана, и что мы видим! На предыдущем разрешении все блоки рассыпались.

Почему это произошло? Причина вся в наследовании, все предыдущие классу унаследовали отступ, и теперь на другом разрешении их нужно сбросить offset поставить в ноль.

Сбрасываем отступы, прописываем col-sm-offset-0 .

И думаю, вы уже догадались, к чему я клоню!

Но давайте представим следующую картину, заказчик посмотрел на все это дело и говорит вам, а я хочу в адаптивке поменять некоторые элементы местами, то есть, блок 1 на блок 4 или блок 2 на блок 1, разницы не имеет.

И тут, начнете его слегка ненавидеть.

Вам придется делать полу пушь, прописывать еще дополнительные классы.

И в любом случае, такое количество классов, в такой вложенности, не так просто поддерживать.

col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-0 col-md-6

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

Насколько такие длинные строки из многочисленных классов актуальны. И задумаешься, а не проще ли самому это все адаптировать без сторонних библиотек!

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

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

Давайте рассмотрим на примере данной структуры, как реализовать такую модель сетки при помощи CSS Grid.

Делаем верстку на модуле CSS Gr >See the Pen NwObLR by Denis (@Dwstroy) on CodePen.

Текущие файлы я удалять не буду, просто переименую, и оставлю в этих директориях.

Создаю новый index и разворачиваю в нем doctype . Пропишу заголовок, удаляю подключение bootstrap , и скрипты. Переходим в CSS и описываем блоки.

Прописываем блок с классом .grid-container , в него вложим блок с классом .imageBox , в котором будет находиться картинка и изображение. Таких блоков делаем четыре штуки и разворачиваем структуру.

Прописываем изображение и заголовки.

Это и есть вся структура, для реализации сетки на модуле Grid . Она логична, понятна, и в ней присутствует основной контейнер, в котором вложены его элементы.

Далее создадим файл стилей, сброшу все отступы и делаю сверху отступ в 30 пик.

И для того что бы начать пользоваться мощным инструментом CSS Gr >grid_container display: grid .

Вторым этапом определим шаблон сетки, которые задаются при помощи свойства grid-area , но что бы его задать, нужно для элементов Gr >nth-child где в скобках укажем порядковый номер блока и при помощи grid-area зададим для каждой ячейки индивидуальное имя.

Затем зададим для блока Grid максимальную ширину в 900 пик. Почему в 900! Так как картинки по ширине занимают 430 пик, в сумме они будут 860 пик, и по 10 пик зададим у них отступы с каждой из сторон, выходит 40 пик., а полностью в сумме выйдет 900 пик.

Выравниваем при помощи margin: auto , далее описываем сетку.

Временно пока скрою текстовый блок, для этого отбираю его и задаю свойство display: none .

Далее формируем свою сетку, прописываем grid-template-areas , и далее, используя имена блоков, которые задавали ранее, указываю в каком порядке, сколько ячеек будут они занимать.

Элементы Grid контейнера выстроились, но они еще не знаю, сколько отведено для них пространство. Точнее они занимают определенное пространство ширины и высоты картинки, но нас это не устраивает. У блоков размеры картинок разные, и что бы нам индивидуально под каждый блок не нарезать картинку, сделаем это все при помощи CSS.

И давайте зададим 100% ширину картинки, что бы она занимала все пространство блока.

Затем для каждой ячейки зададим свой размер ширины, для этого воспользуемся свойством grid-template-columns и каждой колонке задаем определенный размер. Первой сделаем 2 фракции, и двум остальным по одной фракции.

Как видим, четвертый блок вылез за пределы основного контейнера. И что бы скрыть его часть, нужно для контейнера imagBox прописать overflow: hidden .

И данный стиль бы сработал, но из-за того что нет высоты контейнера, он не знает его границы. А какая должна быть высота? Обратимся к картинке, размер ее по высоте 450 пик., делим на пополам получается 225 пик.

При помощи grid-template-rows прописываем каждой строке высоту по 225 пик.

Ну и для отступов можно воспользуемся свойством grid-gap , где каждой из сторон зададим по 10 пик, но я использую margin в 10 пик, это задаст сразу отступы в дальнейшем для мобильных устройств.

В принципе с контейнером закончили работать, и переходи к его элементам. Блоку с классом .imageBox прописываем position: relative , делаем его flex контейнером.

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

И для его выравнивания по горизонтали, зададим .imegeBox justify-content: center , а для вертикали align-items: center .

Элементы выровняли и далее можно переходить к адаптивности сетки.

Адаптируем сетку на модуле CSS Grid

Создаем дополнительный файл, он у нас подключается в head при разрешении менее 920 пик. Делаем проверку, убедились что он подключается и поехали дальше.

При таком разрешении делаем двух колоночную сетку, первым делом зададим допустимую максимальную ширину в 730 пик. Зададим ширину колонок по 1 фракции, а ширину ряда по 370 пик.

На разрешении менее 768 пик, делаем максимальную допустимую ширину 450 пик, для высоты и ширены ячейки задаем 1 фракцию, и делаем размету в одну ячейку.

И последний штрих, что бы блоки не сжимались мене 150 пик, так как это уже не красиво смотрится. Создаем медиа запрос от 280 пик, и для блоков пропишем минимальную допустимую ширину в 150 пик.

На таком разрешении будет появляться скрол, и картинка ужиматься не будет.

Так вот мы написали сетку, она у нас адаптивна. И теперь заказчик говорит нам, а поменяй блоки местами, к примеру блок 1 и 3 между собой на основном разрешении.

Для этого вы переходите в файл css, и меняете их местами.

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

И так, я вам показал, как реализуется сетка на библиотеки bootstrap и модуле Grid , а вы для себя выберите вариант, с которым вам будет удобней работать.

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

CSS Gr >keynikel в 05.10.2020 05.10.2020

Рубрики
Что еще почитать?
  • Подсказки о доступности подсказок 16.10.2020
  • Плейсхолдеры в полях делают больно 10.10.2020
  • Сборка Webpack 4 для чайников и сочувствующих 22.06.2020
  • Блок со скошенными углами на CSS 19.04.2020
  • Использование инлайн SVG-спрайтов в WordPress теме 13.09.2020

Что вы узнаете:

  1. Как построить CSS-сетку, поддерживаемую браузерами.
  2. Как подключить Grid Layout.
  3. Разберетесь в основах строк и столбцов сетки.
  4. Познакомитесь с новой дробной единицей (fr).
  5. Поработаете со вложенными сетками.

ДА! Пора начинать!

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

Шаг 1. Построить CSS-сетку, поддерживаемую браузерами

На момент написания этой статьи (9.04.2020) поддержку браузерами CSS Grid нельзя назвать впечатляющей. Тем не менее, это не повод, не пытаться разобраться с ней уже сейчас.

Поддержка технологии браузерами

Действие: Обновите ваш Chrome, Firefox, Safari или Opera браузер, или просто скачайте последний Firefox или Chrome.

Шаг 2. Изучить основы Grid Layout

Как и во всем в этой жизни, знание основ поможет вам избежать большого количества головной боли.
Действие: Чтение и написание кода
Взгляните на этот код:

Урок 8. CSS Grid Layout. Обзор макета и создание HTML-структуры

Модуль CSS3 Grid Layout — это один из самых интересных, на мой взгляд, модулей в семействе CSS3. Официальная история модуля в виде черновика спецификации насчитывает сегодня чуть менее года. О предварительном анонсе еще с названием CSS Grid Alignment на TPAC 2010 Владимир Юнев писал еще в декабре 2010. Надо также отметить, что с чуть другим названием и несколько отличным синтаксисом, но с той же сутью, он был заявлен в качестве WD еще в 2007г. Сегодня работы по доводке модуля идут полным ходом, предварительная реализация уже есть в Internet Explorer 10 и есть надежда, что поддержка новых возможностей также появится в будущих версиях других популярных браузеров.

Зачем нужен Grid Layout?

Задача, которую решает модель CSS3 Grid Layout, очень проста и понятна любому веб-верстальщику (да и не только ему): предоставить удобный механизм расположения контента по виртуальной сетке.
В отличие от старых табличных подходов, основанных на использовании table, здесь не замусоривается семантика документа и представление четко отделено от содержания.

В отличие от различных вариаций блочной верстки со становящимися при сколь-нибудь сложной структуре безумными и многоэтажными float’ами в сочетании с вручную просчитанными отступами, здесь описание стилей становится тривиально простым и прозрачным. В отличии от абсолютного позиционирования с привязкой к координатам, здесь сохраняется гибкость. В отличие от популярных сегодня css/js-библиотек для разметки по сетке путем указания соответствующих классов (взять хоть те же bootstrap или yui css grids), здесь не замусоривается привязка классов.

Сплошное удовольствие! Осталось только дождаться широкой поддержки 🙂 Впрочем, если вы планируете делать приложения в стиле Metro для Windows 8 на html/js, ключевые возможности, описываемые в модуле CSS3 Grid Layout, уже работают — и можно двигаться вперед, используя удобные и практичные механизмы.

Основы

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

которое необходимо разнести на три колонки примерно вот так:

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

Вот пример кода на CSS:

section <
display : gr >;
gr >: 150px 1fr 200px ;
gr >: 50px 1fr 50px ;
>

section header <
gr >: 2 ;
gr >: 1 ;
>

section nav <
gr >: 1 ;
gr >: 2 ;
>

section article <
gr >: 2 ;
gr >: 2 ;
>

section as > <
gr >: 3 ;
gr >: 2 ;
>

section footer <
gr >: 2 ;
gr >: 3 ;
>

В самом простом варианте все, что нужно сделать, сводится к тому, чтобы указать в контейнере (section), что содержимое внутри него нужно располагать по сетке и задать виртуальную сетку, используя свойства grid-columns и grid-rows (чуть ниже я расскажу о том, какие значения они принимают). Далее для каждого элемента внутри достаточно сказать, где он должен располагаться.

И это все! Итого:

  1. Виртуальная сетка: grid-columns и grid-rows в контейнере
  2. Размещение элемента: grid-column и grid-row.

Теперь давайте разбираться в деталях и дополнительных возможностях.

Виртуальная сетка

Треки: строки и столбцы

Для создания виртуальной сетки, по которой в дальнейшем размешаются элементы, необходимо описать треки сетки (Grid Tracks) — строки и столбцы внутри сетки:

Линии сетки

Треки располагаются между линиями сетки (Grid Lines), которые, в свою очередь, находятся справа-слева и сверху-снизу от каждого трека:

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

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

Растяжение на несколько ячеек

Чтобы растянуть элемент на несколько ячеек сетки, можно использовать свойства grid-row-span и grid-column-span:

По умолчанию, оба свойства установлены в значение 1, что соответствует растяжению доступного пространства от указанной линии до следующей (+1).

Повторяющиеся треки

Часто бывает так, что предполагаемая для использования сетка содержит какой-то характерный шаблон:

Было бы удобным описывать такие сетки в более компактном и прозрачном виде — и такая возможность есть! Пример выше можно описать так:

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

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

Единицы измерения

Как вы уже могли заметить выше, местами я использовал необычное значение при указании размеров некоторых столбцов и строчек — 1fr. Об этом и других возможных значениях при указании длины мы сейчас и поговорим.

При описании ширины колонок и высоты строк (размеров треков) можно использовать следующие единицы и значения:

  • линейные размеры — стандартные единицы указания длины, определенные в модуле CSS3 Values and Units, например, pt, px, em, vw и т. д.;
  • проценты — размер трека в процентах от размеров контейнера с сеткой (хотя если высота или длина сетки зависит от контента, результат будет неопределенным);
  • доли (fraction) — неотрицательное число с последующей единицей измерения fr, размер каждой доли берется пропорциональным указанному числу (см. подробнее ниже);
  • max-content — ключевое слово для указания максимальной длины из максимальных длин элементов в треке;
  • min-content — ключевое слово для указания максимальной длины из минимальных длин элементов в треке;
  • minmax(min, max) — задает диапазон значений (принцип работы можно описать как minmax(p, q) = max(p, min(fill-available, q))
    — максимум из нижнего порога и минимума доступного пространства и верхнего порога);
  • auto — ключевое слово, эквивалентное minmax(min-content, max-content).

Давайте попробуем разобраться, как работают доли (fraction value)? Сетка занимает некоторое пространство по ширине и высоте. Оно может зависеть от контента, быть жестко фиксированным или занимать все доступное пространство во внешнем контейнере. Далее, при описании треков части колонок и строк вы можете явно задать, какого размера они должны быть, для еще какой-то части вы можете указать, что их длина зависит от контента.

Теперь, если из доступной длины, отведенной под сетку по вертикали или горизонтали, вычесть сумму всех таких явных или «контентных» длин, оставшееся пространство распределяется между остальными треками пропорционально указанным в них долях (размер доли, деленный на сумму всех таких долей):

На примере выше это три столбца c ширинами в соотношении 2:1:1 и две строки с высотами в соотношении 5:2.

Пример

В черновике спецификации приводится такой комплексный пример, позволяющий увидеть всю эту схему с разными типами значений сразу:

Здесь определяются следующие линии (треки, они же колонки в данном случае):

  1. Стартовая первая линия.
  2. Линия в 100px от первой.
  3. Еще одна линия на расстоянии 1/2 оставшегося после всех рассчетов пространства — от второй линии.
  4. И еще одна линия, чье расстояние от третьей равно максимальному из размеров контента элементов в колонке.
  5. Наконец, последняя линия, расположенная от четвертой на расстоянии, равном либо минимальной длине элементов в колонке, либо 1/2 оставшегося пространства, смотря, что больше.

Тут есть еще небольшой нюанс относительно учета долей, которые оказались внутри функции minmax: они учитываются в общей сумме долей только если обозначены в максимальной позиции. Доли, обозначенные в минимальной позиции, считаются равными 0px. Подробнее тонкости рассчета смотрите в спецификации.
Следующим шагом мы попробуем разобраться, как элементы размещаются между линиями сетки (внутри ячеек).

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

Теперь, когда элементы «привязаны» к линиям сетки, возникает естественный вопрос: а как же они располагаются между линиями?

Привязка элементов к границам ячейки контролируется с помощью свойств grid-column-align и grid-row-align. Для управления можно использовать следующие значения:

Думаю, действия очевидны из названия, отмечу лишь, что в каждом случае речь идет о позиционировании элемента по его margin-боксу. По умолчанию используется значение stretch.

Привязка в колонках (по горизонтали) соответствует направлению текста (например, в арабском языке start будет справа, а end слева). Привязка в строках (по вертикали) совпадает с направлением потока блоков (это, кстати, означает, что в некоторых восточно-азиатских языках строки и столбцы могут поменяться местами).

Управление слоями

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

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

Чтобы управлять порядком отображения таких слоев, текущая версия спецификации расширяет возможности z-index, позволяя управлять слоями элементов внутри сетки.

Замечание: в предыдущей версии спецификации, на которую опирается текущая версия IE10 (platform preview 5), для этих целей было определено отдельное свойство grid-layer, чтобы не конфликтовать с z-index, однако, далее в процессе обсуждений в рабочей группе это решение было пересмотрено.

#grid <
display : gr >;
gr >: ( 1fr ) [ 3 ] ;
gr >: ( 1fr ) [ 4 ] ;
>

#B <
gr >: 1 ;
gr >: 1 ;
gr >: 2 ;
/* grid-layer: 10; */
z-index : 10 ;
margin-top : 10px ;
>

#C <
gr >: 1 ;
gr >: 1 ;
gr >: 2 ;
margin-left : 50px ;
>

#D <
gr >: 2 ;
gr >: 3 ;
gr >: 2 ;
gr >: 2 ;
margin : 10px 0 0 10px ;
>

#E <
gr >: 2 ;
gr >: 2 ;
/* grid-layer: 5; */
z-index : 5 ;
margin : -20px ;
>

css3 grid library

Чтобы начать работать с сетками в браузерах, (еще) не поддерживающих модуль CSS Grid Layout, можно воспользоваться js-библиотекой eCSStender и расширением CSS3 Grid Alignment, обеспечивающими поддержку следующих свойств:

  • display: grid
  • grid-columns & grid-rows
  • grid-column & grid row
  • grid-column-span & grid-row-span

Пример работы можно посмотреть тут.

Немного о будущем, или какие еще возможности описаны в модуле

Наконец, давайте немного приоткроем двери в будущее и подглядим, какие еще возможности готовятся в модуле CSS3 Grid Layout.

Учтите, что на сегодня упоминаемые ниже возможности только описаны в черновике спецификации, но еще не имеют поддержки среди выпущенных браузеров (включая предварительные версии). Они также могут измениться в будущем в зависимости от реакции сообщества и рекомендаций рабочей группы CSS.

Указание конечной линии для привязки элемента

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

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

Именованные линии сетки

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

Далее при описании привязки элементов можно ссылаться на эти имена:

#header <
gr >: «content» ;
gr >: «header» ;
>

#article <
gr >: «content» ;
gr >: «content» ;
>

Также спецификация вводит 4 заранее именованных линии — вертикальные и горизонтальные start и end, фактически, обрамляющие всю сетку. Это полволяет, к примеру, расположить элемент «от второго столбца и до последнего», не задумываясь об общем количестве столбцов.

#menu <
gr >: 1 ;
gr >: start end ;
>

#footer <
gr >: 2 end ;
gr >: 3 ;
>

Именованные ячейки и шаблоны

Еще один способ размещения элементов по сетке заключается в использовании шаблонов, позволяющих описать виртуальную структуру блоков:

gr >: auto minmax ( min- content , 1fr ) ;
gr >: auto minmax ( min- content , 1fr ) auto auto ;
>

При этом для размещения элемента с прявязкой к той или иной виртуальной ячейке достаточно сослаться на нее соответствующим правилом:

Такой подход оказывается особенно удобным, если в зависимости от различных условий, например, разрешения экрана, вам нужно менять расположение элементов и даже переделать саму сетку. В подобной ситуации Grid Layout хорошо сочетается с Media Queries:

@media (orientation: portrait) <
#grid <
display : gr >;
gr >: «ln»
«ma»
«ba»
«ff» ;

gr >: auto minmax ( min- content , 1fr ) ;
gr >: auto minmax ( min- content , 1fr ) auto auto ;
>
>

@media (orientation: landscape) <
#grid <
display : gr >;
gr >: «ln»
«ma»
«mb»
«sf» ;

gr >: auto minmax ( min- content , 1fr ) ;
gr >: auto minmax ( min- content , 1fr ) auto auto ;
>
>

Обратите внимание, что привязка самой статьи к именованной ячейке при этом не меняется. (Ручки уже чешутся начать использовать, однако, ждем, когда это все реализуют в браузерах.)

Заключение

Я постарался дать в статье обзор ключевых возможностей модуля CSS3 Grid Layout. Надеюсь, они вдохновляют вас не менее, чем меня. 🙂

Напомню, что модуль продолжает развиваться, редакторы собирают отзывы от внешнего сообщества и внутри рабочей группы CSS. На действующую реализацию основного функционала можно посмотреть в Internet Explorer 10. Несколько интересных примеров можно найти на ietestdrive.com: The Grid System и Hands On: CSS3 Grid Layout:

Также еще раз отмечу, что возможности Grid Layout, уже поддерживаемые движком IE10, также можно использовать при разработке приложений в стиле Metro на HTML/JS для Windows 8.

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

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