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 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.

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.

Output:

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