Primer CSS Float based Grid

Last Updated : 13 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 Float based Grid is used to float the container on the left or the right. We use clearfix class with the container and float classes to float the content. We will use the float-left class to float the container left and float-right class to float the container right. In this article, we will discuss Primer CSS Float based Grid.

Primer CSS Float based Grid Classes:

float-left: This class is used to float the container on the left.
float-right: This class is used to float the container on the right.

Syntax:

<div class="container clearfix">
  <div class="col-4 Float-based-Grid-Class">
     ....
  </div>
  ....
</div>

Example 1: The following example demonstrates the Primer CSS Float based Grid using the float-left class.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> Primer CSS Float based 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 Float based Grid </h3> 
    </div> <br> <br> 
    <div class="container clearfix"> 
        <div class="col-3 float-left border p-lg-2"> 
            <h3> GFG 1 </h3> 
        </div> 
        <div class="col-3 float-left border p-lg-2"> 
            <h3> GFG 2 </h3> 
        </div> 
        <div class="col-3 float-left border p-lg-2"> 
            <h3> GFG 3 </h3> 
        </div> 
        <div class="col-3 float-left border p-lg-2"> 
            <h3> GFG 4 </h3> 
        </div> 
    </div> 
</body> 
</html>

Output:

Primer CSS Float based Grid using float-left class

Example 2: The following example demonstrates the Primer CSS Float based Grid using the float-right class.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> Primer CSS Float based 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 Float based Grid </h3> 
    </div> <br> <br> 
    <div class="container clearfix"> 
        <div class="col-4 float-right border p-lg-2"> 
            <h3> Float right 1 </h3> 
        </div> 
        <div class="col-4 float-right border p-lg-2"> 
            <h3> Float right 2 </h3> 
        </div> 
        <div class="col-4 float-right border p-lg-2"> 
            <h3> Float right 3 </h3> 
        </div> 
    </div> 
</body> 
</html>