Primer CSS Display Table Grids Last Updated : 06 May, 2022 Comments Improve Suggest changes Like Article Like Report 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 Comment More infoAdvertise with us Next Article Primer CSS Display Table Grids N nagargeetika Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Utilities Similar Reads Primer CSS Layout Display 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 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 Materialize CSS Grids There are 12 standard columns fluid responsive grid systems that helps you to layout your page in an ordered and easy way. It uses the row and column style classes to define rows and columns respectively. Rows are used to specify a padding-less container to be used for responsive columns and col are 3 min read CSS grid-template Property The grid-template property in CSS is a shorthand property for defining grid columns, rows, and areas. It allows you to set values for the following longhand properties: grid-template-rows, grid-template-columns, and grid-template-areas.Syntaxgrid-template: none| grid-template-rows/ grid-template-col 4 min read Primer CSS Grid Nesting 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 Like