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>
Output:
Â
Reference: https://primer.style/css/components/layout#nesting-layouts
Similar Reads
Primer CSS Marketing Layout 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 Layout is used to change the document lay
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 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 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
2 min read
Primer CSS Layout Sidebar Positioning 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'll
2 min read