Блог Joomlashack

Одним из основных изменений в будущей Joomla 4 станет внедрение CSS Grid.

CSS Grid революционизирует индустрию дизайна интерфейсов. Он быстро становится стандартом Интернета.

Joomla, скорее всего, сохранит Bootstrap 4 для обратной совместимости. Однако будущее ясно.

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

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

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

Это может звучать как система на основе таблиц, но в CSS Grid гораздо больше, чем проектирование в таблице.

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


Часть №1. Концепция CSS Grid

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

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

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

Взгляните на изображение ниже.

Если вы объявляете обертку div контейнер с class = ”main” в качестве сетки, будут рассматриваться только элементы header и body как элементы сетки.

Элементы

и

содержатся внутри элементов сетки, но не являются элементами сетки сами.

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

Вы также можете вставлять гибкий контейнер внутри контейнера сетки или наоборот. Это обеспечивает большую гибкость при проектировании и компоновке.

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

Вы не сможете стилизовать саму сетку — она ​​существует только в CSS.


Часть 2. Базовая терминология сетки CSS

Линия сетки

Это самая основная единица сетки. Компоненты сетки определяются путем размещения одной или нескольких линий сетки.

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

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

Контейнер сетки

Это элемент оболочки для всех элементов сетки. Вы определяете контейнер сетки с одним свойством CSS.

Пример:

  .main {display: grid  ;}  

Ячейка сетки

Ячейка сетки — это наименьшая поверхность, окруженная 4 линиями сетки. Это аналог ячейки электронной таблицы.

Область сетки

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

Обратите внимание, что текущий модуль CSS Grid позволяет определять области прямоугольной или квадратной формы, но вы не сможете определить «L» », Например фигура.

Grid Track

Grid Track — широкий термин для обозначения строк или столбцов.

Grid Gap

Зазор сетки — это пространство между ячейками сетки или областями сетки. Он действует аналогично margin.

Вы не можете размещать контент в Grid Gap. По умолчанию Grid Gap равен 0, это означает, что нет разделения между ячейками в сетке.

Разрыв определяется с помощью CSS grid- пробел свойство.


Часть №3. Создание вашей первой сетки CSS

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

  • Сетка будет содержать 9 элементов.
  • Каждый из этих элементов будет размещен в сетке 3×3.
  • Каждый столбец будет иметь ширину 100 пикселей.
  • Элементы сетки будут отделены друг от друга зазором в 20 пикселей.

HTML-код

  
1
2
3
4
5
6
7
8
9

Как видите, это всего лишь div , содержащий другие 9 div .

Код CSS

Добавьте базовый стиль:

 /* ГЛОБАЛЬНЫЕ СТИЛИ */* {box-sizing: border-box  ;} тело {цвет фона: #AAA;  размер фона: 340 пикселей, авто;  margin: 50px;}/* Каждый элемент в сетке содержит числа */. item {/* Центрировать содержимое элементов сетки.  Делаем каждый элемент сетки гибким контейнером */display: flex; /* Горизонтальное и вертикальное центрирование */justify-content: center;  align-items: center;  граница: 5px solid # 87b5ff;  радиус границы: 3 пикселя;  размер шрифта: 2em;  семейство шрифтов: без засечек;  font-weight: жирный;  background-color: # 1c57b5}  

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

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

Время объявить контейнер сетки:

  .container {display: grid;}  

Этот код превращает div с классом container в контейнер сетки, а все дочерние элементы внутри него — в элементы сетки.

Если вы посмотрите в свой браузер, вы не увидите никаких изменений.

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

Добавьте в код следующую строку и сохраните файл:

 .  контейнер {дисплей: сетка;  grid-template-columns: 100px 100px 100px;}  

Свойство grid-template-columns позволяет определять столбцы сетки.

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

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

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

Также обратите внимание на то, что между элементами сетки нет разделения.

Это разделение добавляется с помощью grid-column-gap и grid-row-gap .

Существует сокращенное обозначение, которое объединяет оба свойства: grid-gap .

  .container {display: grid;  сетка-шаблон-столбцы: 100 пикселей 100 пикселей 100 пикселей;  grid-gap: 20px;}  

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

Поздравляем! Вы только что создали свою первую сетку CSS!


Часть №4. CSS Grid в Joomla 4

Теперь вы знаете о CSS Grid, нажмите на эту ссылку, чтобы увидеть ее в Cassiopeia, шаблоне по умолчанию для Joomla 4.

Весь код, связанный с CSS Сетка в Cassiopeia обернута правилом @supports . Это проверяет, поддерживает ли браузер посетителя конкретное свойство CSS и его значение. В файле, на который мы ссылались выше, Joomla проверяет, может ли браузер отображать следующий код: display: grid .

  @supports (display: grid) {} ​​ 

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


Получить нашу книгу с объяснениями CSS Grid

Все Члены Joomlashack Pro получают доступ к нашей книге «CSS Grid Explained». Все, что вам нужно сделать, это подписаться на расширение, шаблон или обучение для Joomlashack.

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

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

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

Оцените статью
Botgadget.ru
Добавить комментарий