Primer CSS Display Table Grids

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. It is highly reusable and flexible. It is created with GitHub’s design system.

Primer CSS Display Table Grids are used to create the table with the help of display table utility classes. The height of the container will be the same for all the columns when the length of content differs. In this article, we will discuss Primer CSS Display Table Grids.

Primer CSS Display Table Grids Classes:

• d-table: This class is used to create the table layout.
• d-table-cell: This class is used to create the table cell.

Syntax:

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

Example 1: This example demonstrates the use of the Primer CSS Display Table Grids.

Output:

👁 Image

Example 2: This example demonstrates the use of the Primer CSS Display Table Grids.

Output:

👁 Image

Example 3: This example demonstrates the use of the Primer CSS Display Table Grids to fill the width of the container when the total number of columns is less than 12.

Output:

👁 Image

Reference: https://primer.style/product/css-utilities/#display-table-grids