Чистые размеры сеток CSS

Чистый CSS — это CSS-фреймворк. Это бесплатная коллекция инструментов с открытым исходным кодом для создания адаптивных веб-приложений. Он был разработан Yahoo и используется для создания более быстрых, красивых и отзывчивых макетов. С Pure Grids легко работать, и они очень эффективны при создании макетов сетки в веб-приложениях.

Классы размеров блоков сеток на чистом CSS:

• pg: класс «чистый-g» — это класс сетки системы сетки Pure CSS, который работает как оболочка классов модулей.
• pu или pu-*: «чистый-u» или «чистый-u-*» используется для разделения ширины экрана дисплея на дроби. Если мы хотим получить m/n часть экрана дисплея, то мы можно добавить к этому конкретному элементу класс «чистый гм-н».

Включить систему сетки: система сетки не включена в pure.css, поскольку медиа-запросы не могут быть перезаписаны, поэтому мы должны поместить эти три файла CSS для реализации системы сетки. Ссылка на файлы дана ниже. Чтобы получить последнюю версию, вы можете перейти на официальный сайт сеток Pure.CSS.

<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/base-min.css">
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/grids-min.css">
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css">

Размеры блоков сетки: Pure поставляется с сетками на основе 5 и 24, и они приведены ниже:

1. 5-я база
   • 1-5: Занимает 1/5 часть дисплея.
   • 2-5: Занимает 2/5 часть дисплея.
   • 3-5: Занимает 3/5 часть дисплея.
   • 4-5: Занимает 4/5 часть дисплея.
   • 1: будет занимать 1/5 часть дисплея.
   • 1-1: будет занимать всю часть дисплея.
   • 5-5: Он будет занимать всю часть дисплея.
2. 24-я база
   Точно так же и для 24-й сетки размер ширины будет зависеть от размера. Если мы хотим занять 3/24-е пространство, мы можем использовать класс как «чистый-u-3-24». Та же концепция работает для всех других классов. Классы сеток на основе 24: 1-24, 1-12, 2-24, 3-24, 1-8, 4-24, 1-6, 5-24, 1-4, 6-24, 7. -24, 1-3, 8-24, 3-8, 9-24, 5-12, 10-24, 11-24, 1-2, 12-24, 13-24, 7-12, 14-24 , 5-8, 15-24, 2-3, 16-24, 17-24, 3-4, 18-24, 19-24, 5-6, 20-24, 7-8, 21-24, 11 -12, 22-24, 23-24, 11-12, 4-24.

Синтаксис:

<div class="pure-g">
    <div class="pure-u-1-5">...</div>
    <div class="pure-u-2-24">...</div>
    <div class="pure-u-11-12">...</div>
</div>

Пример 1. В приведенном ниже примере показано использование размера единицы сетки на основе 5-го числа в элементе <div>.

Выход:

Пример 2. В приведенном ниже примере показано использование размера единицы сетки на основе 24-го числа в элементе <div>.

Выход:

Ссылка: https://purecss.io/grids/#grids-units-sizes