Primer CSS Float based Grid Last Updated : 13 Apr, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 classExample 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> Output: Primer CSS Float based Grid using float-right classReference: https://primer.style/css/utilities/grid#float-based-grid Comment More infoAdvertise with us Next Article CSS grid-auto-flow Property H harendra4373 Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Utilities Similar Reads Primer CSS Flexbox Grids Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are ste 3 min read Primer CSS Grid Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns ar 4 min read CSS grid-auto-flow Property The grid-auto-flow property Specifies exactly how auto-placed items get flowed into the grid.Syntaxgrid-auto-flow: row | column | row dense | column dense;Here we explore one by one Table of ContentUsing grid-auto-flow: rowUsing grid-auto-flow: columnUsing grid-auto-flow: column denseUsing grid-auto 4 min read Primer CSS Grid Containers 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. It is a system that assists us to build consistent user experiences efficiently with enough flexibility. This systematic approach e 2 min read Primer CSS Layout Floats 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 2 min read CSS grid-area Property The grid-area property specifies a grid item's size and location in a grid layout. It allows you to define the starting and ending row and column lines for an item, or to assign a name to the item for easy reference in grid templates.Syntaxgrid-area: grid-row-start | grid-column-start | grid-row-end 3 min read Like