Primer CSS Layout Display

Last Updated : 19 Apr, 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. 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>