Primer CSS Grid Containers

Last Updated : 23 Jul, 2025

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 ensures that our styles are consistent and interoperable with each other. It features a highly composable spacing scale, customizable typography, and meaningful colors. It is highly reusable and flexible and is created with GitHub’s design system.

The grid is 12 columns and is percentage-based. The number of columns a container spans can be adjusted across breakpoints for responsive layouts.  Primer CSS Grid Containers provide us a functionality such that, container widths match our breakpoints and are available in different sizes.

Primer CSS Grid Container Classes:

  • container-sm:  This class is used to create a container width of a small size.
  • container-md:  This class is used to create a container width of medium size.
  • container-lg:  This class is used to create a container width of a large size.
  • container-xl:  This class is used to create a container width of the largest size.

Syntax:

<div class="container-md border">
     ...
</div>

Note: The syntax for the other classes is the same except for the name of the class which will change.

Example 1: The following example will demonstrate the use of the sm class and the md class to create a container of small size and medium size respectively.

HTML 
<!DOCTYPE html>
<html>  
<head>
    <title> Primer CSS Grid Containers </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@18.2.0/dist/primer.css" /> 
</head>
  
<body>
    <div class="text-left">
        <h1 class="color-fg-success">GeeksforGeeks</h1>
        <h3> Primer CSS Grid Containers </h3>
    </div>
    <br>
    <div class="container-sm border"> <!--sm-->
       Small Container Grid
    </div>
    <div class="container-sm border">
        Small Container Grid
    </div>
      <br>
    <div class="container-md border"> <!--md-->
        Medium Container Grid
    </div>
    <div class="container-md border">
        Medium Container Grid
    </div>          
</body>
</html>

Output:

 

Example 2: The following example will demonstrate the use of the lg class and the xl class to create a container of large size and largest size respectively.

HTML 
<!DOCTYPE html>
<html>  
<head>
    <title> Primer CSS Grid Containers </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@18.2.0/dist/primer.css" /> 
</head>
  
<body>
    <div class="text-left">
        <h1 class="color-fg-success">GeeksforGeeks</h1>
        <h3> Primer CSS Grid Containers </h3>
    </div>
    <br>
    <div class="container-lg border"> <!--lg-->
       Large Container Grid
    </div>
    <div class="container-lg border">
        Large Container Grid
    </div>
      <br>
    <div class="container-xl border"> <!--xl-->
        XL Container Grid
    </div>
    <div class="container-xl border">
        XL Container Grid
    </div>              
</body>
</html>

Output:

 

Reference: https://primer.style/product/css-utilities/#containers

Comment

Explore