Primer CSS Display Table Grids

Опубликовано: 10 Августа, 2022

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

Primer CSS Display Table Grids используются для создания таблицы с помощью служебных классов display table. Высота контейнера будет одинаковой для всех столбцов, если длина содержимого различается. В этой статье мы обсудим таблицы таблиц Primer CSS Display Grids.

Primer CSS Display Table Grids Классы:

d-table: этот класс используется для создания макета таблицы.
d-table-cell: этот класс используется для создания ячейки таблицы.

Синтаксис:

<div class="d-table col-12">
  <div class="col-4 d-table-cell border">
     ...
  </div>
  ...
</div>

Пример 1: В этом примере демонстрируется использование сеток таблиц отображения Primer CSS.

Выход:

Пример 2: В этом примере демонстрируется использование сеток таблиц отображения Primer CSS.

Выход:

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

Выход:

Ссылка: https://primer.style/css/utilities/grid#display-table-grids

Picked CSS

Primer CSS Display Table Grids

РЕКОМЕНДУЕМЫЕ СТАТЬИ