Primer CSS Layout Display Last Updated : 19 Apr, 2022 Summarize Comments Improve Suggest changes Share 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. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. The layout is used to display the content using particular style. For example - we can change the layout of document by using display, float, alignment, and other utilities. The Display Layout is used to adjust the display property of an element. This layout represents how the components are going to be placed on the web page. Used Classes: .d-block - It is used to displays an element as a block element..d-none - t is used to remove the element..d-inline - It is used to displays an element as an inline element..d-inline-block - It is used to display an element as an inline-level block container..d-table - It is used to set the behavior as <table> for all elements..d-table-cell - It is used to set the behavior as <td> for all elements. Syntax: <div class="d-*"> Content... </div> Example 1: HTML <!DOCTYPE html> <html> <head> <title>Primer CSS Layout Display</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h1> GeeksforGeeks </h1> <h3>Primer CSS Layout Display</h3> <div class="d-inline color-bg-success-emphasis"> Display Inline Content Part 1 </div> <div class="d-inline color-bg-accent-emphasis"> Display Inline Content Part 2 </div> <br> <div class="d-block color-bg-success-emphasis"> Display Block Content Part 1 </div> <div class="d-block color-bg-accent-emphasis"> Display Block Content Part 2 </div> <br> <div class="d-inline-block color-bg-success-emphasis"> Display Inline Block Content Part 1 </div> <div class="d-inline-block color-bg-accent-emphasis"> Display Inline Block Content Part 2 </div> </div> </body> </html> Output: Example 2: HTML <!DOCTYPE html> <html> <head> <title>Primer CSS Layout Display</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <h1 class="color-fg-open"> GeeksforGeeks </h1> <h3>Primer CSS Layout Display</h3> <div class="d-table"> <div class="d-table-cell color-bg-success-emphasis"> Display Table Cell </div> <div class="d-table-cell color-bg-accent-emphasis"> Display Table Cell </div> <div class="d-table-cell color-bg-success-emphasis"> Display Table Cell </div> </div> <br><br> <div class="d-none"> Display None </div> </body> </html> Output: Reference: https://primer.style/css/utilities/layout#display Comment More infoAdvertise with us Next Article Primer CSS Display Table Grids V vkash8574 Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Utilities Similar Reads Primer CSS Layout Floats 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 Layout Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and color. Created with GitHub’s design system, it is highly reusable and flexible.Primer CSS Layout is used to change the document lay 2 min read Primer CSS Layout - Nesting Layouts Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc. In this article, we wil 2 min read 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 th 3 min read Primer CSS Layout Position 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 3 min read Primer CSS Layout Overflow 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 6 min read Like