Open In App

Primer CSS Responsive Grids

Improve
Improve
Like Article
Like
Save
Share
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.

Responsive Grids can be used to create the responsive grid layouts having all the column width classes, which can be used to set according to the breakpoints. The specific breakpoints can be utilized to implement the particular responsive style. It is mainly used to change the size of containers according to the screen size and different breakpoints.

Primer CSS Responsive Grids Classes:

  • col-*: This class specifies the number of columns that the specific container will occupy.
  • col-sm-*: This class specifies the number of columns that the specific container will occupy when the minimum width of the screen is 544px.
  • col-md-*: This class specifies the number of columns that the specific container will occupy when the minimum width of the screen is 768px.
  • col-lg-*: This class specifies the number of columns that the specific container will occupy when the minimum width of the screen is 1004px.
  • col-xl-*: This class specifies the number of columns that the specific container will occupy when the minimum width of the screen is 1280px.

The * represents the grid-based layout system, which is divided into 12 grids in rows and columns.

Syntax:

<div class="container-lg clearfix">
  <div class="col-sm-6 col-md-3 col-lg-2">
        ...
  </div>
</div>

Example 1: In the example, given below shows the containers occupying 3 columns each when the screen is small, 4 columns each when the screen is medium and 2 columns each when the screen is large.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Primer CSS Responsive Grids</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
 
<body>
    <div class="m-4">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3>Primer CSS Responsive Grids</h3>
    </div>
    <div class="container-lg clearfix">
        <div class="col-sm-3 col-md-4 col-lg-2 float-left p-2 border">
            GeeksforGeeks
        </div>
        <div class="col-sm-3 col-md-4 col-lg-2 float-left p-2 border">
            GeeksforGeeks
        </div>
        <div class="col-sm-3 col-md-4 col-lg-2 float-left p-2 border">
            GeeksforGeeks
        </div>
    </div>
</body>
</html>


 Output:

 

Example 2: In the example, given below shows the containers occupying 4 columns each when the screen is small, 2 columns each when the screen is medium and 3 columns each when the screen is large.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Primer CSS Responsive Grids</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
 
<body>
    <div class="m-4">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3>Primer CSS Responsive Grids</h3>
        <br/> </div>
    <div class="container-lg clearfix">
        <div class="col-sm-4 col-md-2 col-lg-3 float-left p-2 border">
            GeeksforGeeks
        </div>
        <div class="col-sm-4 col-md-2 col-lg-3 float-left p-2 border">
            GeeksforGeeks
        </div>
        <div class="col-sm-4 col-md-2 col-lg-3 float-left p-2 border">
            GeeksforGeeks
        </div>
    </div>
</body>
</html>


Output:

 

Reference: https://primer.style/css/utilities/grid#responsive-grids



Last Updated : 08 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads