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.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS Grid Containers </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.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.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS Grid Containers </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.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/css/utilities/grid#containers