Primer CSS Layout Column Gutter

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.

Primer CSS Gutter styles add padding to the left and right side of each column of layouts and apply a negative margin to the container so that the content inside each column lines up with content outside of the grid. Column Gutter helps in setting the gap (gutter) between elements layout columns i.e, between the main layout and sidebar layout. In this article, we will learn about Primer CSS Layout Column Gutter.

Primer CSS Layout Column Gutter Classes used:

default: This is not a class but for creating a default column gutter, the gap is (md: 16px, lg: 24px) between the main component and sidebar.
Layout--gutter-none: This class is used to add a gap of 0px between the layout main component and sidebar.
Layout--gutter-condensed: This class is used to add a gap of 16px between the layout main component and sidebar.
Layout--gutter-spacious: This class is used to add a gap of (md: 16px, lg: 32px, xl: 40px) between the layout main component and sidebar.

Syntax:

<div class="Layout Layout--gutter-none">
  <div class="Layout-main border">
    ...
  </div>

  <div class="Layout-sidebar border">
    ...
  </div>
</div>

Example 1: Below example demonstrates the default column gutter.

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 Layout Column Gutter</h2>
    </div>

    <div class="Layout m-4">
        <div class="Layout-main border color-bg-success p-2">
          Jobs
        </div>

        <div class="Layout-sidebar border color-bg-accent p-2">
          GeeksforGeeks
        </div>    
    </div>
</body>
</html>

Output:

Example 2: Below example demonstrates the column gutter none using the Layout--gutter-none class.

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 Layout Column Gutter</h2>
    </div>

    <div class="Layout Layout--gutter-none m-4">
        <div class="Layout-main border color-bg-success p-2">
          Tutorials
        </div>

        <div class="Layout-sidebar border color-bg-accent p-2">
          GeeksforGeeks
        </div>
    </div> 
</body>
</html>

Output:

Example 3: Below example demonstrates the column gutter condensed using the Layout--gutter-condensed class.

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 Layout Column Gutter</h2>
    </div>

    <div class="Layout Layout--gutter-condensed m-4">
        <div class="Layout-main border color-bg-success p-2">
            Premium
        </div>
    
        <div class="Layout-sidebar border color-bg-accent p-2">
            GeeksforGeeks
        </div>
    </div>
</body>
</html>

Output:

Example 4: Below example demonstrates the column gutter spacious using the Layout--gutter-spacious class.

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 Layout Column Gutter</h2>
    </div>

    <div class="Layout Layout--gutter-spacious m-4">
        <div class="Layout-main border color-bg-success p-2">
            Jobs
        </div>
    
        <div class="Layout-sidebar border color-bg-accent p-2">
            GeeksforGeeks
        </div>
    </div>    
</body>
</html>