Как называется сетка горизонтальных и вертикальных столбцов, которые образуют пиксели на экране

Обновлено: 02.07.2024

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

Как это работает

Сетки служат контейнером для всех строк и столбцов. Сетки занимают всю ширину своего контейнера, но добавление фиксированного атрибута будет указывать ширину в зависимости от размера экрана, см. размер сетки ниже.
Строки – это горизонтальные группы столбцов, которые правильно выстраивают столбцы в линию.
Содержимое должно быть размещено внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
Атрибуты size- указывают количество столбцов, которые следует использовать вместо 12 по умолчанию для каждой строки. Таким образом, size="4" можно добавить к столбцу, чтобы занять 1/3 сетки или 4 из 12 столбцов.
Столбцы без значения размера будут автоматически иметь одинаковую ширину. Например, каждый из четырех экземпляров size-sm будет автоматически иметь ширину 25 % для точки останова small и выше.
Ширина столбцов задается в процентах, поэтому они всегда изменчивы и имеют размер относительно своего родительского элемента.
Столбцы имеют отступы между отдельными столбцами, однако отступы можно удалить из сетки и столбцов, добавив в сетку класс ion-no-padding. Дополнительные стили, которые можно применить к сетке, см. в разделе Утилиты CSS.
Существует пять уровней сетки, по одному для каждой точки останова: все точки останова (очень маленькие), малые, средние, большие и очень большие.
Уровни сетки основаны на минимальной ширине, что означает, что они применяются к своему уровню и всем, что выше их (например, size-sm="4" применяется к малым, средним, большим и очень большим устройствам).
Сетки можно легко настроить с помощью переменных CSS. См. раздел о настройке сетки.

Живой пример

Вы можете просмотреть живой пример этого в Angular здесь и для React здесь.

Размер сетки

По умолчанию сетка занимает 100 % ширины. Чтобы установить определенную ширину в зависимости от размера экрана, добавьте фиксированный атрибут. Ширина сетки для каждой точки останова определяется в переменных CSS --ion-grid-width-. Дополнительные сведения см. в разделе о настройке сетки.

Живой пример

Вы можете просмотреть живой пример этого в Angular здесь и для React здесь.

Атрибуты сетки

По умолчанию сетка занимает всю ширину экрана. Это можно изменить с помощью приведенного ниже атрибута.

Имя	Значение	Описание
xs	100%	Не устанавливать ширину сетки для экранов xs
sm	540px	Установить ширину сетки 540 пикселей, когда (min-width: 576px)
md	720px	Установить ширину сетки до 720 пикселей, когда (min-width: 768px)
lg	960px	Установите ширину сетки до 960 пикселей, когда (min-width : 992px)
xl	1140px	Установите ширину сетки равной 1140px, когда (min-width: 1200px)

Свойство	Описание
fixed	Установить макс. ширина на основе текущего размера экрана.

Точки останова по умолчанию

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

< th>Префикс извлечения< /tr>

Имя	Значение	Префикс ширины	Префикс смещения	Префикс отправки	Описание
xs	0	размер -	offset-	push-	pull-	Установить столбцы, когда (min-width: 0)
sm	576px	size-sm-	смещение-sm-	push-sm -	pull-sm-	Установить столбцы, когда (min-width: 576px)
md	768px	size-md-	смещение-md-	push-md-	pull-md-	Установить столбцы, когда (min-width: 768px)
lg	992px	size-lg-	offset-lg-	push-lg-	pull-lg-	Установить столбцы, когда (мин. ширина: 992px)
xl	1200px	size-xl-	смещение-xl-	push -xl-	pull-xl-	Установить столбцы, когда (мин. ширина: 1200 пикселей)

Столбцы с автоматическим расположением

Равной ширины

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

Установка ширины одного столбца

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

Живой пример

Вы можете просмотреть живой пример этого в Angular здесь и для React здесь.

Переменная ширина

Установив для свойств размера значение "авто", размер столбца может изменяться в зависимости от естественной ширины его содержимого. Это чрезвычайно полезно для установки ширины столбца с использованием пикселей. Размер столбцов рядом со столбцом переменной ширины изменится, чтобы заполнить всю строку.

Живой пример

Вы можете просмотреть живой пример этого в Angular здесь и для React здесь.

Отзывчивые атрибуты

Все точки останова

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

Сложенные по горизонтали

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

Живой пример

Вы можете просмотреть живой пример этого в Angular здесь и для React здесь.

Изменение порядка

Смещение столбцов

Переместите столбцы вправо, добавив свойство смещения. Это свойство увеличивает поле слева от столбца на количество указанных столбцов. Например, в следующей сетке последний столбец будет смещен на 3 столбца и займет 3 столбца:

Смещения также можно добавлять на основе точек остановки экрана. Вот пример сетки, где последний столбец будет смещен на 3 столбца для экранов md и выше:

Живой пример

Вы можете просмотреть живой пример этого в Angular здесь и для React здесь.

Тяни и толкай

Измените порядок столбцов, добавив свойства push и pull. Эти свойства регулируют левый и правый столбцы на указанное количество столбцов, упрощая изменение порядка столбцов. Например, в следующей сетке столбец с описанием 1 из 2 будет последним столбцом, а 2 из 2 — первым.

Push и pull также можно добавить на основе точек останова экрана. В следующем примере столбец с описанием столбца 3 из 3 фактически будет первым столбцом для экранов md и выше:

Живой пример

Вы можете просмотреть живой пример этого в Angular здесь и для React здесь.

Выравнивание

Выравнивание по вертикали

Все столбцы можно выровнять по вертикали внутри строки, добавив в строку разные классы. Список доступных классов см. в разделе Утилиты css.

Столбцы также могут выравниваться иначе, чем другие столбцы, путем добавления класса выравнивания непосредственно к столбцу. Список доступных классов см. в разделе Утилиты css.

Живой пример

Вы можете просмотреть живой пример этого в Angular здесь и для React здесь.

Горизонтальное выравнивание

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

Живой пример

Вы можете просмотреть живой пример этого в Angular здесь и для React здесь.

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

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

Количество столбцов

Количество столбцов сетки можно изменить с помощью переменной CSS --ion-grid-columns. По умолчанию имеется 12 столбцов сетки, но это можно изменить на любое положительное целое число и использовать для расчета ширины каждого отдельного столбца.

Отступы сетки

Отступ в контейнере сетки можно задать для всех точек останова с помощью переменной CSS --ion-grid-padding. Чтобы переопределить отдельные точки останова, используйте переменные CSS --ion-grid-padding-.

Ширина сетки

Чтобы настроить значения ширины фиксированной сетки в зависимости от размера экрана, переопределите значения --ion-grid-width- для каждой точки останова.

Заполнение столбца

Отступы для столбцов можно задать для всех точек останова с помощью переменной CSS --ion-grid-column-padding. Чтобы переопределить отдельные точки останова, используйте переменные CSS --ion-grid-column-padding-.

Сетка Bootstrap — это самый быстрый и простой способ создания адаптивного макета веб-сайта.

Что такое Bootstrap Grid System?

Система сеток Bootstrap обеспечивает простой и эффективный способ создания адаптивных макетов любых форм и размеров. Он построен с использованием flexbox с подходом mobile-first. Кроме того, он полностью адаптивен и использует систему из двенадцати столбцов (по 12 столбцов в каждой строке) и шесть уровней адаптивности по умолчанию.

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

Аналогично вы можете использовать классы .col-md-* для создания столбцов сетки для устройств со средним экраном, таких как планшеты, классы .col-lg-* для таких устройств, как небольшие ноутбуки, классы .col-xl-* для ноутбуки и настольные компьютеры, а также классы .col-xxl-* для больших экранов настольных компьютеров.

В следующей таблице приведены основные функции сетки Bootstrap.

Приведенная выше таблица демонстрирует одну важную вещь: применение любого класса .col-sm-* к элементу будет иметь эффект не только на небольших устройствах, но также на средних, больших и очень больших устройствах (ширина области просмотра ≥768 пикселей), если класс .col-md-* , .col-lg-* , .col-xl-* или .col-xxl-* отсутствует.

Аналогичным образом класс .col-md-* повлияет не только на средние устройства, но и на большие и очень большие устройства, если класс .col-lg-* , .col-xl-* или .col -xxl-* класс отсутствует.

Теперь возникает вопрос, как создавать строки и столбцы, используя эту адаптивную сетку из 12 столбцов. Ответ довольно прост: сначала создайте контейнер, который действует как оболочка для ваших строк и столбцов, используя любые классы контейнеров, такие как .container , после этого создайте строки внутри контейнера, используя класс .row, и создайте столбцы внутри любой строки. вы можете использовать классы .col-* , .col-sm-* , .col-md-* , .col-lg-* , .col-xl-* и .col-xxl-*.

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

Создание макетов из двух столбцов

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

Пример

Примечание. В макете сетки содержимое должно быть помещено внутри столбцов ( .col и .col-* ), и только столбцы могут быть непосредственными дочерними элементами строк ( .row ). Кроме того, строки должны быть помещены в контейнер (неподвижный или фиксированный) для правильного заполнения и выравнивания.

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

Поскольку система сетки Bootstrap основана на 12 столбцах, поэтому, чтобы столбцы располагались в одной строке (т. е. рядом друг с другом), сумма номеров столбцов сетки в одной строке не должна превышать 12. Если вы внимательно просмотрите приведенный выше пример кода, вы обнаружите, что количество столбцов сетки (например, col-md-* ) в сумме составляет двенадцать (6+6, 4+8 и 3+9) для каждой строки.

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

Аналогичным образом вы можете создавать и другие макеты по вышеуказанному принципу. Например, в следующем примере обычно создаются макеты из трех столбцов для экранов ноутбуков и настольных компьютеров. Он также работает на планшетах в ландшафтном режиме, если разрешение экрана больше или равно 992 пикселям (например, Apple iPad). Однако в портретном режиме столбцы сетки, как обычно, будут горизонтальными.

Пример

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

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

Вы также можете создать столбцы одинаковой ширины для всех устройств (x-small, small, medium, big, x-large и xx-large), просто используя класс .col без указания любой номер столбца.

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

Пример

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

Если вы попробуете следующий пример, вы обнаружите, что столбцы в строке с классом .col имеют одинаковую ширину.

Пример

Поведение переноса столбцов

Теперь мы собираемся создать более гибкие макеты, которые изменяют ориентацию столбцов в зависимости от размера области просмотра. В следующем примере будет создан макет из трех столбцов на больших устройствах, таких как ноутбуки и настольные компьютеры, а также на планшетах (например, Apple iPad) в ландшафтном режиме, но на средних устройствах, таких как планшеты в портретном режиме (768 пикселей ≤ ширина экрана < 992 пикселей), он изменится на макет из двух столбцов, где третий столбец перемещается внизу первых двух столбцов.

Пример

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

Создание макетов с несколькими столбцами с помощью Bootstrap

С помощью новой системы сеток Bootstrap mobile first flexbox вы можете легко контролировать, как макет вашего веб-сайта будет отображаться на различных типах устройств с разными размерами экрана или области просмотра, таких как мобильные телефоны, планшеты, настольные компьютеры и т. д. Давайте рассмотрим следующую иллюстрацию.

На приведенном выше рисунке всего 12 блоков контента на всех устройствах, но их расположение зависит от размера экрана устройства, например, на мобильном устройстве макет отображается как макет сетки с одним столбцом, который имеет 1 столбец и 12 строк, расположенных выше. друг друга, тогда как на планшете он отображается как сетка из двух столбцов, которая имеет 2 столбца и 6 строк.

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

Теперь вопрос в том, как мы можем создавать такие адаптивные макеты, используя эту систему сетки Bootstrap flexbox. Начнем с основного целевого устройства. Предположим, что нашим основным целевым устройством является ноутбук или обычный настольный компьютер. Поскольку наш макет ноутбука имеет 3 столбца и 4 строки, т. е. макет сетки 3x4, код HTML для создания такой структуры сетки будет выглядеть примерно так.

Пример

Совет. Класс .container-lg делает контейнер шириной 100 %, если ширина окна просмотра меньше 992 пикселя, что позволяет использовать всю доступную ширину на небольших экранах.

Если вы видите вывод приведенного выше примера на большом устройстве, таком как ноутбук или настольный компьютер, ширина экрана или области просмотра которого больше или равна 1200 пикселей, но меньше 1400 пикселей, вы обнаружите, что макет имеет 4 строки, где каждая строка имеет 3 одинаковых столбца, что приводит к макету сетки 3x4.

Теперь пришло время настроить наш макет для других устройств. Давайте сначала настроим его для средних устройств, таких как планшеты (768 пикселей ≤ ширина области просмотра < 1200 пикселей). Так как на планшете наш макет отображался как сетки 2x6 (т.е. 2 столбца и 6 строк). Итак, продолжайте и добавьте класс .col-md-6 в каждый столбец.

Пример

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

Аналогичным образом вы можете настроить макет для очень больших устройств, таких как большой экран рабочего стола, добавив класс .col-xxl-3 в каждый столбец, так как каждая строка в этом макете содержит 4 столбца (то есть макет сетки 4x3). . Вот окончательный код после объединения всего процесса.

Пример

Совет. Согласно приведенному выше рисунку нет необходимости настраивать макет для мобильных телефонов; поскольку столбцы на очень маленьких устройствах автоматически становятся горизонтальными и отображаются в виде сетки столбцов 1 x 12 при отсутствии классов .col-* или .col-sm-*.

Вложение столбцов сетки

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

Пример

Создание столбцов переменной ширины

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

Пример

Выравнивание столбцов сетки

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

Вертикальное выравнивание столбцов сетки

Вы можете использовать классы .align-items-start , .align-items-center и .align-items-end для вертикального выравнивания столбцов сетки вверху, посередине и внизу контейнера соответственно.

Пример

Отдельные столбцы внутри строки также можно выровнять по вертикали. Вот пример:

Пример

Примечание. Вы можете пропустить число в классе сетки .col-* и просто использовать класс .col для создания столбцов одинакового размера для всех устройств (очень малых, малых, средних, больших и очень больших).

Горизонтальное выравнивание столбцов сетки

Вы можете использовать классы .justify-content-start , .justify-content-center и .justify-content-end для горизонтального выравнивания столбцов сетки слева, по центру и справа от контейнера соответственно. Давайте посмотрим на следующий пример, чтобы увидеть, как это работает:

Пример

Кроме того, вы можете использовать класс .justify-content-around для равномерного распределения столбцов сетки с пробелами половинного размера на обоих концах, тогда как вы можете использовать класс .justify-content-between для равномерного распределения столбцов сетки там, где первый столбец помещается в начало, а последний столбец помещается в конец.Попробуйте следующий пример, чтобы увидеть, как это работает на самом деле:

Пример

Пожалуйста, ознакомьтесь с руководством по css3 flexbox, чтобы узнать больше о выравнивании flex-элементов.

Изменение порядка столбцов сетки

Вы даже можете изменить визуальный порядок столбцов сетки, не изменяя их порядок в фактической разметке. Используйте класс .order-last, чтобы упорядочить столбец последним, а класс .order-first — чтобы упорядочить столбец первым. Рассмотрим пример:

Пример

Вы также можете использовать классы .order-* для упорядочения столбцов сетки в зависимости от порядковых номеров. Столбец сетки с более высоким порядковым номером идет после столбца сетки с более низким порядковым номером или столбца сетки без классов порядка. Он включает поддержку от 1 до 12 на всех пяти уровнях сетки.

Пример

Смещение столбцов сетки

Вы также можете перемещать столбцы сетки вправо для выравнивания, используя классы смещения столбцов, такие как .offset-sm-* , .offset-md-* , .offset-lg-* и т. д.

Эти классы смещают столбцы, просто увеличивая левое поле на указанное количество столбцов. Например, класс .offset-md-4 в столбце .col-md-8 перемещает его вправо на четыре столбца от исходного положения. Попробуйте следующий пример, чтобы увидеть, как это работает:

Пример

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

Пример

Примечание. Вы можете использовать класс .col-auto для создания столбцов, которые занимают ровно столько места, сколько необходимо, т. е. сами размеры столбцов зависят от содержимого.

Создание компактных столбцов

Вы можете удалить стандартные промежутки между столбцами, чтобы создать компактные макеты, добавив класс .g-0 в .row . Этот класс удаляет отрицательные поля из строки и горизонтальное заполнение из всех непосредственных дочерних столбцов. Вот пример:

Пример

Перенос столбцов на новую строку

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

Пример

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

Как медицинский иллюстратор, я помешан на терминологии. Ежедневно я имею дело с сотнями анатомических терминов, большинство из которых имеют латинские или греческие корни. А я сторонник точности. Как и в нашем родном языке, изменение всего одной буквы может полностью изменить значение слова, например, префикс myo- (означающий мышцу) становится mylo- (коренной), который может стать миело- (имеется в виду либо костный мозг, либо спинной мозг). Как подтвердят мои ученики, я также являюсь сторонником загадочных форм множественного числа латинских терминов. Множественное число от ramus communicans – это rami communicantes, а от фаланги – фаланги в единственном числе. Не существует такого понятия, как «фаланга».

Думаю, неудивительно, что моя одержимость терминологией распространилась и на другие аспекты моего преподавания. Одна из моих любимых мозолей — это неправильное использование слова «точка», особенно когда оно используется в выражении «точек на дюйм» или DPI. Этот простой термин применяется к нескольким различным (и очень разным) понятиям в графическом искусстве, что приводит к широко распространенной путанице. Давайте изучим эти концепции и почему важно их придерживаться.

Полутоновые точки

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

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

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

Линии точек

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

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

Несмотря на то, что линейный растр остается постоянным для одного изображения (и обычно для всей печатной части), можно использовать разные линейные растры для разных печатных частей (см. рис. 3).

Выбор линейного экрана почти полностью зависит от типа бумаги, на которой выполняется печать. Газетная бумага, например, обладает высокой впитывающей способностью, позволяя чернилам впитываться в бумагу и вызывая увеличение полутоновых точек — явление, известное как растискивание точки. Если линии точек расположены слишком близко друг к другу, чернила будут растекаться, и мелкие детали будут потеряны. Поэтому для печати на газетной бумаге (и другой дешевой бумаге) требуются очень грубые линии, обычно около 85 LPI. На экранах с такими грубыми линиями полутоновые точки часто видны невооруженным глазом, и этот факт использовал поп-артист Рой Лихтенштейн (рис. 4). Бумага более высокого качества имеет покрытие для минимизации растискивания точек и, следовательно, поддерживает растровые изображения с более тонкими линиями. Большинство книг, журналов и других печатных материалов печатаются с разрешением 133 или 150 LPI, в то время как для некоторых книг по искусству и корпоративных отчетов могут использоваться очень тонкие экраны с разрешением 200 LPI и выше.

Электронные полутона

Фотопроцесс создания полутонов был отраслевым стандартом почти 100 лет. В 1970-х годах такие компании, как Crossfield Electronics и Linotype-Hell, разработали электронные генераторы точек, которые использовали лазер для преобразования отсканированного изображения в полутоновый негатив на пленке. В 1984 году Linotype представила Linotronics 100 и 300, первые фотонаборные устройства, в которых использовалась лазерная технология для преобразования цифрового изображения в полутон. Выпуск Linotronics совпал с появлением компьютера Macintosh с Aldus Pagemaker, первой в мире программой для верстки страниц. Apple и Linotronics также были первыми, кто применил язык описания страниц Adobe PostScript, позволяющий компьютеру отправлять графическую информацию на фотонаборное устройство (и на недавно выпущенный лазерный принтер Apple). Так началась эра настольных издательских систем.

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

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

Представьте, что поверхность печати (бумага, пленка или пластина) разделена на сетку крошечных пространств (см. рис. 5). Каждое из этих маленьких мест соответствует наименьшей возможной отметке, которую может создать лазерное устройство. Если лазер попадает в определенное место, он включается, чтобы создать черное пятно или элемент принтера. Для создания полутонового рисунка, то есть полутоновых точек, расположенных упорядоченными линиями, принтер делит свой образец пятен на сетку из вертикальных столбцов и горизонтальных рядов. На пересечении каждой строки и столбца находится группа точек печати, известная как полутоновая ячейка. Принтер может включать и выключать точки в каждой ячейке для создания полутоновых точек разного размера. Если в каждой ячейке включено только несколько пятен, получается небольшая полутоновая точка, которая дает вид светло-серого цвета. По мере того, как в каждой ячейке включается больше точек, полутоновые точки становятся больше, создавая более темные оттенки серого.

Расстояние между этими крошечными точками или элементами определяет разрешение принтера.Я предпочитаю термин «пятна на дюйм» (SPI), обозначающий количество крошечных пятен или элементов принтера, которые устройство может разместить на линейном дюйме. К сожалению, большинство производителей принтеров используют более знакомое выражение «точек на дюйм» или DPI — тенденция, которая началась с первых матричных принтеров в 1970-х годах. Это привело к значительной путанице между пятнами принтера и полутоновыми точками. Фактически, многие профессионалы в области графики изменили терминологию на противоположную, используя слово точка (и DPI) для обозначения крошечных меток или элементов, сделанных принтером, и слово пятно для того, что традиционно называлось полутоновыми точками. Ситуация еще более осложняется тем, что SPI также используется в качестве меры разрешения цифрового сканера (в выборках на дюйм).

Несмотря на современные тенденции, я предпочитаю традиционное использование слова "точка" для обозначения полутоновых точек, которые различаются по размеру для создания различных оттенков серого. Это была общепринятая терминология более 100 лет, и она включена в другие графические термины, такие как растискивание точек, обсуждавшееся выше. Я продолжу использовать термин «точки на дюйм» в этом блоге, говоря о разрешении принтера, но читатели должны знать, что он часто используется взаимозаменяемо с термином «точки на дюйм» или DPI.

Пиксели

Один из наиболее распространенных (и неточных) вариантов использования термина "число точек на дюйм" – это описание плотности пикселей в цифровом изображении. Пиксель (сокращение от «элемент изображения») — это наименьший редактируемый компонент растрового изображения. Пиксели обычно имеют квадратную форму (за исключением некоторых форматов цифрового видео) и располагаются в виде сетки из горизонтальных рядов и вертикальных столбцов. Надлежащий термин для разрешения растрового изображения — пиксели на дюйм (PPI), мера количества пикселей в линейном дюйме как по горизонтали, так и по вертикали. Квадрат в один дюйм с разрешением 300 пикселей на дюйм будет иметь ширину 300 пикселей и высоту 300 пикселей, всего 90 000 пикселей.

Программное обеспечение для сложной графики, такое как Adobe Photoshop, использует правильную терминологию пикселей на дюйм при описании растровых изображений (например, проверьте диалоговое окно «Размер изображения» в Photoshop). Однако неточный термин «точки на дюйм» начал проникать в некоторые графические программы, отражая широко распространенное неправильное использование этого термина для обозначения любой меры разрешения. Даже Adobe Illustrator, близкий родственник Photoshop, стал жертвой путаницы между PPI и DPI. При экспорте файла PSD, PNG или BMP из Illustrator параметры разрешения перечислены в PPI. Но при экспорте файла JPEG или TIFF выходное разрешение указывается в DPI.

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

Что в имени?

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

Возможно, самая большая проблема, с которой сталкиваются мои студенты, заключается в том, что они предполагают, что между разрешением в пикселях цифрового файла (PPI), выходным разрешением печатающего устройства (SPI или DPI) и частотой полутонового экрана ( ЛПИ). Например, они могут предположить, что для печати на лазерном принтере с разрешением 1200 точек на дюйм само изображение должно иметь разрешение 1200 точек на дюйм. И они обычно в неведении относительно того, как эти цифры соотносятся с частотой полутонового экрана. Связь есть, но не обязательно один к одному.

Правильное разрешение файла цифровой графики (в PPI) зависит от типа создаваемого изображения, в частности от того, является ли оно штриховым рисунком или непрерывным тоном (см. рис. 6). Штриховой рисунок относится к любому изображению, состоящему из сплошных черных линий, пунктирных точек или других черных объектов на сплошном белом фоне. Отсутствуют оттенки серого (т. е. полутона). При создании (или сканировании) штрихового рисунка разрешение изображения должно быть достаточно высоким. Большинство издателей требуют, чтобы штриховые рисунки были подготовлены с разрешением 600–1000 пикселей на дюйм. Это гарантирует, что черные линии будут четкими и гладкими при выводе на принтер с высоким разрешением.

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

Практическое правило заключается в создании непрерывных тоновых изображений с разрешением в пикселях (PPI), которое в два раза превышает разрешение полутонового экрана (LPI), которое будет использоваться при печати конечного изображения. Например, если изображение будет напечатано в газете с разрешением 85 пикселей на дюйм, достаточно разрешения 170 пикселей на дюйм. Для книги или журнала, напечатанного с разрешением 133 или 150 пикселей на дюйм, разрешение цифрового изображения должно быть 266 или 300 пикселей на дюйм. Поскольку 133 и 150 LPI являются наиболее распространенными линейными экранами, используемыми для большей части офсетной печати, многие художники делают все свои изображения с непрерывным тоном с разрешением 300 пикселей на дюйм. Но этого разрешения будет недостаточно для высококачественной печати (артбуки, корпоративные отчеты и т. д.), где используются линейные экраны с разрешением 200 LPI или более. Поэтому еще до того, как начать иллюстрацию, художник должен знать, как будет использоваться это изображение. Если окончательное использование относится к печатному изделию, художник должен знать растровую линию, которая будет использоваться принтером.

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

Напомним, что маленькие пятна, создаваемые печатающим устройством, подразделяются на кластеры, называемые полутоновыми ячейками (см. рис. 5). Пятна в полутоновой ячейке включаются или выключаются для создания полутоновых точек разного размера, что приводит к появлению разных оттенков серого. Количество пятен в каждой полутоновой ячейке определяет изменение размеров полутоновых точек и, следовательно, количество различных оттенков серого, которые могут быть получены. Например, полутоновая ячейка с 16 точками в ширину и 16 точками в высоту будет иметь в общей сложности 256 точек (16 x 16 = 256) и может создавать 256 полутоновых точек различных размеров и, следовательно, 256 оттенков серого. Так уж получилось, что человеческий глаз может различить только несколько сотен оттенков серого, поэтому 256 примерно достаточно для воспроизведения всего диапазона видимых оттенков серого.

Чтобы определить количество точек в полутоновой ячейке, вам нужны две части информации: разрешение печатающего устройства (в точках на дюйм) и частота строк на экране (в строках на дюйм). Просто разделите разрешение принтера на размер строки экрана, и ответ покажет вам, сколько точек находится в каждой ячейке полутона по горизонтали и вертикали. Квадрат этого — общее количество пятен в ячейке. Например, вы печатаете 150-строчный экран на лазерном принтере с разрешением 1200 SPI. 1200 разделить на 150 равно 8, что означает, что ячейка полутона имеет 8 точек в ширину и 8 точек в высоту, всего 64 точки (8 x 8 = 64). Следовательно, эта комбинация линейного экрана и разрешения принтера будет давать отпечаток только с 64 оттенками серого. Отпечаток будет иметь заметные полосы и будет довольно некрасивым (см. рис. 7).

Суть в том, что типичный офисный лазерный принтер с разрешением 1200 SPI не имеет достаточного разрешения для печати приличных полутонов при 150 LPI. Вам нужно как минимум 2400 SPI для создания полутоновой ячейки, состоящей из 16 x 16 точек, что дает 256 оттенков серого без видимых полос. Вот почему профессиональное оборудование для печати — фотонаборные и пластинчатые — обычно печатают с разрешением не менее 2400 SPI. В связи с растущим спросом на экраны с большим числом строк (200 LPI и выше) эти устройства часто печатают с разрешением 3 600 SPI или даже выше.

Сводка

Термин "точек на дюйм" или DPI часто неправильно используется художниками-графиками, иллюстраторами и фотографами, часто используется вместо более точных терминов, таких как количество строк на дюйм (для полутоновых экранов), количество точек на дюйм. дюйм (для разрешения принтера) или пикселей на дюйм (для разрешения цифровых изображений). Это приводит к путанице в отношениях между этими понятиями. Надеюсь, я помог прояснить эти термины (и то, как они соотносятся друг с другом).

Джим Перкинс — профессор программы медицинской иллюстрации в Рочестерском технологическом институте, где он читает курсы общей анатомии человека, научной визуализации и компьютерной графики. Он также является практикующим иллюстратором, создающим иллюстрации для нескольких самых продаваемых медицинских учебников, в основном в области патологии и физиологии.В течение 20 лет он был единственным иллюстратором серии текстов по патологии Роббинса и Котрана. Он также является частью команды иллюстраторов, продолжающих работу покойного доктора Фрэнка Х. Неттера, которого многие считают величайшим художником-медиком 20-го века. Чтобы увидеть примеры работ Джима, перейдите по следующим ссылкам:

Выраженные взгляды принадлежат автору (авторам) и не обязательно совпадают с мнением Scientific American.

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

Что такое сетка?

Сетка – это набор пересекающихся горизонтальных и вертикальных линий, определяющих столбцы и строки. Элементы могут быть размещены на сетке внутри этих столбцов и строк. Макет сетки CSS имеет следующие особенности:

Фиксированные и гибкие размеры дорожек

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

Размещение элемента

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

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

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

Контроль выравнивания

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

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

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

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

Контейнер Grid

Мы создаем контейнер сетки, объявляя элемент display: grid или display: inline-grid. Как только мы это сделаем, все прямые дочерние элементы этого элемента станут элементами сетки.

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

Я делаю .wrapper контейнером сетки.

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

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

Если мы хотим сделать это более похожим на сетку, нам нужно добавить дорожки столбцов.

Отслеживание сетки

Мы определяем строки и столбцы в нашей сетке с помощью свойств grid-template-columns и grid-template-rows. Они определяют дорожки сетки. дорожка сетки – это пространство между любыми двумя линиями сетки. На изображении ниже вы можете увидеть выделенную дорожку — это дорожка первой строки в нашей сетке.

< /p>

Базовый пример

Я могу добавить к нашему предыдущему примеру, добавив свойство grid-template-columns, а затем определив размер дорожек столбца.

Теперь я создал сетку с тремя дорожками столбцов шириной 200 пикселей. Дочерние элементы будут размещены в этой сетке по одному в каждой ячейке сетки.

Единица fr

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

Разные размеры

В следующем примере мы создаем определение с дорожкой 2fr, а затем с двумя дорожками 1fr. Доступное пространство разделено на четыре. Две партии отводятся на первую дорожку и по одной партии на следующие две дорожки.

Совмещение гибких и абсолютных размеров

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

Отслеживание списков с помощью записи Repeat()

В больших сетках с большим количеством дорожек можно использовать нотацию repeat() для повторения всего списка дорожек или его части. Например, определение сетки:

Также можно записать как:

Для части трек-листа можно использовать повторяющиеся обозначения. В следующем примере я создал сетку с начальной 20-пиксельной дорожкой, затем повторяющимся участком из 6 дорожек 1fr, а затем последней 20-пиксельной дорожкой.

Повторяющаяся нотация берет список дорожек и использует его для создания повторяющегося шаблона дорожек. В следующем примере моя сетка будет состоять из 10 дорожек, дорожки 1fr, за которой следует дорожка 2fr. Этот шаблон будет повторяться пять раз.

Неявная и явная сетка

При создании нашего примера сетки мы специально определили дорожки столбцов с помощью свойства grid-template-columns, но сетка также создавала строки сама по себе. Эти строки являются частью неявной сетки. Принимая во внимание, что явная сетка состоит из любых строк и столбцов, определенных с помощью grid-template-columns или grid-template-rows .

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

Вы также можете задать заданный размер для дорожек, созданных в неявной сетке, с помощью свойств grid-auto-rows и grid-auto-columns.

В приведенном ниже примере мы используем grid-auto-rows, чтобы гарантировать, что дорожки, созданные в неявной сетке, имеют высоту 200 пикселей.

Размер дорожки и минимальный максимум

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

В Grid есть решение этой проблемы с помощью функции minmax(). В следующем примере я использую minmax() в значении grid-auto-rows. Это означает, что автоматически создаваемые строки будут иметь высоту не менее 100 пикселей и не более auto . Использование auto означает, что размер будет учитывать размер содержимого и будет растягиваться, чтобы освободить место для самого высокого элемента в ячейке в этой строке.

Линии сетки

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

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

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

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

В следующем примере я помещаю первые два элемента в сетку из трех столбцов, используя свойства grid-column-start , grid-column-end , grid-row-start и grid-row-end. Работая слева направо, первый элемент помещается против строки столбца 1 и простирается до строки столбца 4, которая в нашем случае является крайней правой линией сетки. Он начинается на линии строки 1 и заканчивается на линии строки 3, поэтому охватывает две дорожки строки.

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

Примечание. Не забывайте, что вы можете использовать Инспектор сетки в Инструментах разработчика Firefox, чтобы увидеть, как элементы расположены относительно линий сетки.

Сокращенные обозначения для линейного позиционирования

Использованные выше полные значения можно сжать в одну строку для столбцов с помощью grid-column и одну строку для строк с помощью grid-row . Следующий пример даст то же позиционирование, что и в предыдущем коде, но с гораздо меньшим количеством CSS. Значение перед косой чертой ( / ) является начальной строкой, значение после конечной строки.

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

Ячейки сетки

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

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

Элементы могут занимать одну или несколько ячеек как по строке, так и по столбцу, и это создает область сетки. Области сетки должны быть прямоугольными – например, невозможно создать L-образную область. Выделенная область сетки охватывает две дорожки строки и две дорожки столбца.

Желоба

Жёлоба или переулки между ячейками сетки можно создать с помощью свойств column-gap и row-gap или сокращенного слова gap . В приведенном ниже примере я создаю зазор в 10 пикселей между столбцами и зазор в 1 см между строками.

Примечание. Когда сетка впервые появилась в браузерах, перед столбцом-зазором, зазором между строками и зазором стоял префикс сетки-зазор в виде grid-column-gap, grid-row-gap и grid-gap соответственно.

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

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

Вложенные сетки

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

Вложенность без подсетки

Если я установлю box1 для display: grid, я могу дать ему определение дорожки, и он тоже станет сеткой. Затем элементы размещаются в этой новой сетке.

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

Подсетка

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

Примечание. Эта функция появилась в Firefox 71, который в настоящее время является единственным браузером, поддерживающим вложенную сетку.

В текущей спецификации мы отредактируем приведенный выше пример вложенной сетки, чтобы изменить определение дорожки grid-template-columns: repeat(3, 1fr) на grid-template-columns: subgrid . Затем вложенная сетка будет использовать дорожки родительской сетки для компоновки элементов.

Распределение элементов по z-индексу

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

Перекрытие без z-индекса

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

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

Контроль заказа

Мы можем управлять порядком, в котором элементы складываются, с помощью свойства z-index — точно так же, как позиционированные элементы. Если мы присвоим box2 более низкий z-индекс, чем box1, он будет отображаться ниже box1 в стеке.

Дальнейшие шаги

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

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

Как это работает

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

Новый или незнакомый с flexbox? Прочтите это руководство CSS Tricks по flexbox, чтобы узнать об общих чертах, терминологии, рекомендациях и фрагментах кода.

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

Вот как это работает:

Контейнеры позволяют центрировать и горизонтально размещать содержимое вашего сайта. Используйте .container для адаптивной ширины в пикселях или .container-fluid для ширины: 100 % для всех размеров области просмотра и устройства.
Строки — это оболочки для столбцов. Каждый столбец имеет горизонтальные отступы (называемые желобом) для управления пространством между ними. Затем это заполнение противодействует строкам с отрицательными полями. Таким образом, весь контент в столбцах будет визуально выровнен по левому краю.
В макете сетки содержимое должно быть размещено внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
Благодаря flexbox столбцы сетки без указанной ширины автоматически размещаются как столбцы одинаковой ширины. Например, каждый из четырех экземпляров .col-sm будет автоматически иметь ширину 25% от точки останова и выше. Дополнительные примеры см. в разделе столбцов автоматического макета.
Классы столбцов указывают количество столбцов, которое вы хотели бы использовать из возможных 12 в каждой строке. Итак, если вам нужны три столбца одинаковой ширины, вы можете использовать .col-4 .
Ширина столбцов задается в процентах, поэтому они всегда изменчивы и имеют размер относительно своего родительского элемента.
Столбцы имеют горизонтальные отступы для создания промежутков между отдельными столбцами, однако вы можете удалить поля у строк и отступы у столбцов с помощью .no-gutters в .row .
Чтобы сделать сетку адаптивной, существует пять контрольных точек сетки, по одной на каждую отзывчивую контрольную точку: все контрольные точки (очень маленькая), маленькая, средняя, большая и очень большая.
Точки останова сетки основаны на медиа-запросах минимальной ширины, то есть они применяются к этой одной точке останова и всем вышестоящим (например, .col-sm-4 применяется к малым, средним, большим и очень большим устройствам, но не первая точка останова xs).
Вы можете использовать предопределенные классы сетки (например, .col-4 ) или миксины Sass для большей семантической разметки.

Параметры сетки

В то время как Bootstrap использует em или rem для определения большинства размеров, px используется для точек останова сетки и ширины контейнера. Это связано с тем, что ширина области просмотра указывается в пикселях и не зависит от размера шрифта.

Узнайте, как элементы сетки Bootstrap работают на разных устройствах, с помощью удобной таблицы.

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

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

Равной ширины

Например, вот два макета сетки, которые применимы к каждому устройству и области просмотра, от xs до xl . Добавьте любое количество классов без модулей для каждой нужной точки останова, и каждый столбец будет иметь одинаковую ширину.

Читайте также: