Primer CSS Grid Containers
Last Updated :
21 Apr, 2022
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.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.
HTML
<!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
Similar Reads
Primer CSS Grid Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns ar
4 min read
Primer CSS Grid Offset Columns 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
2 min read
Primer CSS Flexbox Flex Container 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. Primer CSS Flexbox Flex Container is
2 min read
Grid Container The Grid Container is the container element where the property display with a value grid or the inline-grid is used for defining their direct children into a grid layout. The Grid Container offers various properties these are grid-template-columns Property, grid-template-rows Property, justify-conte
6 min read
Primer CSS Grid Centering a Column 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
2 min read