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 are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, and BEM architecture. It is a highly reusable model.
The Grid contains 12 columns and is percentage-based. The responsive layouts can be designed with a number of columns a container spans that can be adjusted across breakpoints. The grid system facilitates a variety of utilities that can be utilized to get different layouts and results.
Primer CSS Grid Components:
- Flexbox grids: Flexbox grids are used to get responsive layouts. The flexbox grids are useful for keeping columns the same height, justifying content, and vertically aligning items.
- Float-based grid: It is used to float the container on the left or the right.
- Nesting: It is used to put the grid inside another grid. We can put infinite grids within the columns because the column’s width is in percentages.
- Centering a column: Centering Column centers the columns within the container. We can center the columns using the mx-auto class.
- Column widths: They are used to specify the percentage-based column widths of any block and inline element.
- Offset columns: They are used to push the div to X columns using the offset classes. We can offset our element to any number of columns.
- Gutters: Gutters Grid is used to create the Gutters using the styles and padding utility classes. We have gutter styles like gutter-condensed and gutter-spacious.
- Inline-block grids: Many columns can be adjusted across breakpoints in a container for getting responsive results.
- Display table grids: They are used to create the table with the help of display table utility classes. The height of the container will be the same for all the columns when the length of content differs.
- Responsive grids: They can be used to create the responsive grid layouts having all the column width classes, which can be used to set according to the breakpoints. The specific breakpoints can be utilized to implement the particular responsive style. It is mainly used to change the size of containers according to the screen size and different breakpoints.
- Containers: Containers provide us a functionality such that, container widths match our breakpoints and are available in different sizes.
Syntax:
<div class="Primer-CSS-Component-Class">...</div>
Example 1: The following example demonstrates the use of various classes of flexbox grids namely col-2, d-inline-flex,d-flex,flex-items-center, flex-md-items-start.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS Grid</title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" />
<style>
body{
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<h1 class="color-fg-success">GeeksforGeeks </h1>
<h2> Primer CSS flexbox-grids</h2>
<div class="d-inline-flex flex-column">
<div class="col-2 d-flex flex-items-center
flex-md-items-start">
<img src=
alt="gfgImage" />
</div>
<div class="col-2 d-flex
flex-items-center">
<img class="" src=
alt="gfgImage2" />
</div>
</div>
</body>
</html>
|
Output:
Example 2: The following example demonstrates the use of gutter classes for grid namely gutter-spacious and gutter-condensed.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS Grid</title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" />
<style>
body{
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<h1 class="color-fg-success">GeeksforGeeks </h1>
<h2> Primer CSS Gutter grids</h2>
<strong> Gutters Spacious: </strong>
<div class="clearfix gutter-spacious border">
<div class="col-4 float-left">
<div class="border color-border-accent-emphasis">
GeeksforGeeks 1
</div>
</div>
<div class="col-4 float-right">
<div class="border color-border-accent-emphasis">
GeeksforGeeks Right
</div>
</div>
<div class="col-4 float-left">
<div class="border color-border-accent-emphasis">
GeeksforGeeks 2
</div>
</div>
</div> <br> <br>
<strong> Gutters Condensed: </strong>
<div class="clearfix gutter-condensed border">
<div class="col-4 float-left">
<div class="border p-2 color-border-success-emphasis">
GeeksforGeeks 1
</div>
</div>
<div class="col-4 float-left">
<div class="border p-2 color-border-success-emphasis">
GeeksforGeeks 2
</div>
</div>
<div class="col-4 float-right">
<div class="border p-2 color-border-success-emphasis">
GeeksforGeeks 3
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://primer.style/css/utilities/grid