Primer CSS Layout - Nesting Layouts

Last Updated : 29 May, 2022

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.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <title>Primer CSS</title>
    
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
         rel="stylesheet"/>
</head>
<body>
    <div class="m-4">
        <h1 style="color: green">GeeksforGeeks</h1>
        <h2>Primer CSS Nesting Layout</h2>
    </div>

    <div class="Layout m-4">
        <div class="Layout-main">
            <div class="Layout Layout--sidebarPosition-end 
                               Layout--sidebar-narrow">
                <div class="Layout-main border p-2 color-bg-success">
                      Layout main container
                </div>
                <div class="Layout-sidebar border p-2 color-bg-accent">
                      Layout metadata sidebar container
                </div>
            </div>
        </div>
        <div class="Layout-sidebar border p-2 color-bg-accent">
             Layout sidebar default
        </div>
    </div>
</body>
</html>

Output:

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
    <title>Primer CSS</title>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
          rel="stylesheet"/>
</head>
<body>
    <div class="m-4">
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>Primer CSS Nesting Layout</h2>
    </div>

    <div class="Layout m-4">
        <div class="Layout-main">
            <div class="Layout Layout--sidebarPosition-end 
                        Layout--sidebar-narrow">
               <div class="Layout-main border p-2 color-bg-success">
                   Layout main container
                </div>
                <div class="Layout-sidebar border p-2 color-bg-accent">
                   Layout metadata sidebar container
                </div>
            </div>
        </div>
        <div class="Layout-sidebar border p-2 color-bg-accent">
             Layout sidebar default
        </div>
    </div>
    <div class="Layout m-4">
        <div class="Layout-main ">
            <div class="Layout Layout--sidebarPosition-end 
                        Layout--flowRow-until-lg 
                        Layout--sidebar-narrow">
                <div class="Layout-main border p-2 color-bg-danger">
                   Layout main container
                </div>
                <div class="Layout-sidebar border p-2 color-bg-accent">
                   Layout metadata sidebar container
                </div>
            </div>
       </div>
       <div class="Layout-sidebar border p-2 color-bg-accent">
            Layout sidebar
        </div>
    </div>
  </body>
</html>