Primer CSS Gutters Grid

Last Updated : 25 Apr, 2022

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 Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

Primer CSS Gutters Grid is used to create the Gutters using the styles and padding utility classes. We have gutter styles like gutter-condensed and gutter-spacious. We have also padding utility classes to create the gutter layout.

Primer CSS Gutters Grid Classes:

gutter: This class is used to create the gutter.
gutter-condensed: This class is used to create condensed gutters.
gutter-spacious: This class is used to create spacious gutters.

Syntax:

<div class="clearfix  Gutters-Grid-Class border">
  <div class="col-3 float-left">
    <div class="border p-3">...</div>
  </div>
  ....
</div>

Example 1: The following example demonstrates the Primer CSS Gutters Grid.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Gutters Grid </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />  
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Gutters Grid </h3> <br> 
  
        <strong> Gutters Spacious: </strong> 
        <div class="clearfix gutter-spacious border"> 
            <div class="col-4 float-left"> 
                <div class="border p-2"> 
                    GeeksforGeeks 1 
                </div> 
            </div> 
            <div class="col-4 float-right"> 
                <div class="border p-2"> 
                    GeeksforGeeks Right 
                </div> 
            </div> 
            <div class="col-4 float-left"> 
                <div class="border p-2"> 
                    GeeksforGeeks 2 
                </div> 
            </div> 
        </div> <br> <br> 
  
        <strong> Gutters Condensed: </strong> 
        <div class="clearfix gutter-condensed border"> 
            <div class="col-4 float-left"> 
                <div class="border p-2"> 
                    GeeksforGeeks 1 
                </div> 
            </div> 
            <div class="col-4 float-right"> 
                <div class="border p-2"> 
                    GeeksforGeeks Right 
                </div> 
            </div> 
            <div class="col-4 float-left"> 
                <div class="border p-2"> 
                    GeeksforGeeks 2 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Primer CSS Gutters Grid

Example 2: The following example demonstrates the Primer CSS Gutters Grid using padding utility classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Gutters Grid </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />  
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Gutters Grid </h3> <br> 
  
        <div class="container-lg clearfix mb-4"> 
            <div class="col-4 float-left pr-3"> 
                <div class="border color-bg-success"> 
                    GeeksforGeeks1 
                </div> 
            </div> 
            <div class="col-4 float-left px-3"> 
                <div class="border color-bg-success"> 
                    GeeksforGeeks2 
                </div> 
            </div> 
            <div class="col-4 float-left px-3"> 
                <div class="border color-bg-success"> 
                    GeeksforGeeks3 
                </div> 
            </div> 
        </div> 
  
        <div class="container-lg clearfix"> 
            <div class="col-2 float-left pr-3"> 
                <div class="border color-bg-success"> 
                    GeeksforGeeks4 
                </div> 
            </div> 
            <div class="col-7 float-left pl-3"> 
                <div class="border color-bg-success"> 
                    GeeksforGeeks5 
                </div> 
            </div> 
            <div class="col-3 float-left pl-3"> 
                <div class="border color-bg-success"> 
                    GeeksforGeeks6 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>