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 will learn about Primer CSS Nesting Layouts. In Primer CSS, we can nest the layout components to generate a 3-column layout design.

Primer CSS Layout Nesting Classes:

• Layout: This class is used to create a layout component.
• Layout-main: This class is used to add a main content layout component.
• Layout-sidebar: This class is used to add a sidebar in a layout component.
• Layout--sidebarPosition-end: This class sets the position of the sidebar component to the end/right.
• Layout--sidebar-narrow: This class is used to add a narrow sidebar component.

Syntax:

<div class="Layout">
 <div class="Layout-main ">
 <div class="Layout Layout--sidebarPosition-end 
 Layout--sidebar-narrow">
 <div class="Layout-main border">
 Layout main container
 </div>
 <div class="Layout-sidebar border">
 Layout metadata sidebar container
 </div>
 </div>
 </div>
 <div class="Layout-sidebar border">Layout sidebar</div>
</div>

Example 1: Below example demonstrates the nesting of the layout component.

Output:

Example 2: Another example demonstrating the nesting of the layout component.

Output:

Reference: https://primer.style/#nesting-layouts