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.

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.

Output:

Primer CSS Float based Grid using float-right class

Reference: https://primer.style/css/utilities/grid#float-based-grid