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 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:

Output:

👁 Image

Example 2:

Output:

👁 Image

Reference: https://primer.style/product/css-utilities/#display