Primer CSS Display Table Grids
Last Updated :
06 May, 2022
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Display Table Grids </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body class="m-2">
<div class="text-center">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3> Primer CSS Display Table Grids </h3><br />
</div>
<div class="d-table col-12">
<div class="col-3 d-table-cell border p-2">
A Computer Science portal for geeks.
</div>
<div class="col-3 d-table-cell border p-2">
It contains well written, well thought
and well explained computer science and
programming articles
</div>
<div class="col-3 d-table-cell border p-2">
Portal for geeks.
</div>
<div class="col-3 d-table-cell border p-2">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles
</div>
</div>
</body>
</html>
Output:
Example 2: This example demonstrates the use of the Primer CSS Display Table Grids.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Display Table Grids </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body class="m-2">
<div class="text-center">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3> Primer CSS Display Table Grids </h3><br />
</div>
<div class="d-table col-12">
<div class="col-2 d-table-cell v-align-middle">
<img class="width-full avatar" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
</div>
<div class="col-10 d-table-cell v-align-middle pl-4">
<h1 class="text-bold lh-condensed">
GeeksforGeeks
</h1>
<p class="h3 color-fg-success">
A Computer Science portal for geeks.
</p>
<span> Website: </span>
<a class="color-fg-muted text-small" href="#">
https://www.geeksforgeeks.org/
</a>
</div>
</div>
</body>
</html>
Output:
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Display Table Grids </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body class="m-2">
<div class="text-center">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3> Primer CSS Display Table Grids </h3><br />
</div>
<div class="d-table col-12">
<div class="col-5 d-table-cell border color-bg-success">
GeeksforGeeks col-5
</div>
<div class="col-2 d-table-cell border color-bg-success">
GeeksforGeeks col-2
</div>
<div class="col-3 d-table-cell border color-bg-success">
GeeksforGeeks col-3
</div>
</div>
</body>
</html>
Output:
Reference: https://primer.style/css/utilities/grid#display-table-grids
Similar Reads
Primer CSS Tables 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS Grid Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns ar
4 min read
Primer CSS Flexbox Grids Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are ste
3 min read
Angular PrimeNG Table GridLines Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use Table GridLines in Angular PrimeNG. Angular PrimeNG Table Gr
4 min read
Primer CSS Float based Grid 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS Responsive 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
3 min read