Primer CSS Layout Sidebar positioning as rows

Last Updated : 26 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'll see about the Layout of Sidebar positioning as rows. We can position the sidebar as rows, i.e, either render it first, or last, or can hide it also.

Primer CSS Layout Sidebar positioning as rows Classes:

Layout--sidebarPosition-flowRow-start: This class renders the sidebar to the top of the main container when stacked. This is the default positioning of the sidebar as rows.
Layout--sidebarPosition-flowRow-end: This class renders the sidebar after the main container when stacked.
Layout--sidebarPosition-flowRow-none: This class hides the sidebar when stacked.

Syntax:

<div class="Layout Layout--sidebarPosition-flowRow-start |
            Layout--sidebarPosition-flowRow-end | 
            Layout--sidebarPosition-flowRow-none">
  <div class="Layout-main border">...</div>
  <div class="Layout-sidebar border">...</div>
</div>

Example 1: Below example demonstrates the layout sidebar with a row having a start position.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <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 Layout Sidebar Position as rows
        </h2> 
    </div>
    <div class="Layout Layout--sidebarPosition-flowRow-start m-4">
        <div class="Layout-main border
                    p-2 color-bg-success">
            Main Content
        </div>
        <div class="Layout-sidebar border 
                    p-2 color-bg-accent">
            Sidebar Content
        </div>
    </div>
</body>
</html>

Output:

Example 2: Below example demonstrates the layout sidebar with a row having an end position.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <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 Layout Sidebar Position as rows
        </h2> 
    </div>
    <div class="Layout Layout--sidebarPosition-flowRow-end m-4">
        <div class="Layout-main border 
                    p-2 color-bg-success">
            Main Content
        </div>
        <div class="Layout-sidebar border 
                    p-2 color-bg-accent">
            Sidebar Content
        </div>
    </div>
</body>
</html>

Output:

Example 3: Below example demonstrates the layout sidebar with a row having a none position. The sidebar will be hidden for the medium or small screen-side devices.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <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 Layout Sidebar Position as rows</h2> </div>
    <div class="Layout Layout--sidebarPosition-flowRow-none m-4">
        <div class="Layout-main border 
                    p-2 color-bg-success">
            Main Content
        </div>
        <div class="Layout-sidebar border 
                    p-2 color-bg-accent">
            Sidebar Content
        </div>
    </div>
</body>
</html>