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