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>