Primer CSS Responsive Grids
Last Updated :
08 Jun, 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. This systematic method makes sure 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 highly reusable and flexible. It is created with GitHub’s design system.
Responsive Grids 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.
Primer CSS Responsive Grids Classes:
- col-*: This class specifies the number of columns that the specific container will occupy.
- col-sm-*: This class specifies the number of columns that the specific container will occupy when the minimum width of the screen is 544px.
- col-md-*: This class specifies the number of columns that the specific container will occupy when the minimum width of the screen is 768px.
- col-lg-*: This class specifies the number of columns that the specific container will occupy when the minimum width of the screen is 1004px.
- col-xl-*: This class specifies the number of columns that the specific container will occupy when the minimum width of the screen is 1280px.
The * represents the grid-based layout system, which is divided into 12 grids in rows and columns.
Syntax:
<div class="container-lg clearfix">
<div class="col-sm-6 col-md-3 col-lg-2">
...
</div>
</div>Example 1: In the example, given below shows the containers occupying 3 columns each when the screen is small, 4 columns each when the screen is medium and 2 columns each when the screen is large.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Primer CSS Responsive Grids</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="m-4">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3>Primer CSS Responsive Grids</h3>
</div>
<div class="container-lg clearfix">
<div class="col-sm-3 col-md-4 col-lg-2 float-left p-2 border">
GeeksforGeeks
</div>
<div class="col-sm-3 col-md-4 col-lg-2 float-left p-2 border">
GeeksforGeeks
</div>
<div class="col-sm-3 col-md-4 col-lg-2 float-left p-2 border">
GeeksforGeeks
</div>
</div>
</body>
</html>
Output:
Example 2: In the example, given below shows the containers occupying 4 columns each when the screen is small, 2 columns each when the screen is medium and 3 columns each when the screen is large.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Primer CSS Responsive Grids</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="m-4">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3>Primer CSS Responsive Grids</h3>
<br/> </div>
<div class="container-lg clearfix">
<div class="col-sm-4 col-md-2 col-lg-3 float-left p-2 border">
GeeksforGeeks
</div>
<div class="col-sm-4 col-md-2 col-lg-3 float-left p-2 border">
GeeksforGeeks
</div>
<div class="col-sm-4 col-md-2 col-lg-3 float-left p-2 border">
GeeksforGeeks
</div>
</div>
</body>
</html>
Output:
Reference: https://primer.style/css/utilities/grid#responsive-grids
Similar Reads
Pure CSS Responsive Grids Pure CSS is a free and open-source framework of CSS. CSS Grid Layout is a method designed for the two-dimensional layout of items with rows and columns. It consists of both unresponsive and responsive modules. Responsive design's function is to display the contents of the website automatically acros
4 min read
Primer CSS Responsive Margins 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 Responsive Padding Primer CSS is a free open-source CSS framework built on systems that lay the groundwork for basic style elements like spacing, typography, and color. Our patterns are both stable and interoperable because of their systematic structure. Object-Oriented CSS principles, core CSS, and BEM architecture i
3 min read
Pure CSS Regular Grid vs Responsive Grid Pure CSS is a free and open-source CSS framework. It is a collection of tools for creating online programs and responsive web pages. This was developed by Yahoo and is used to make websites that load faster, look better, and are easier to use. Bootstrap is effectively replaced by it. When developing
4 min read
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
Pure CSS Grids Units Sizes Pure CSS is a CSS framework. It is a free and open-source tool collection for creating responsive web applications. It was developed by Yahoo and is used for creating faster, more beautiful, and more responsive layouts. Pure Grids are easy to work with and very powerful in creating grid layouts in w
3 min read
Primer CSS Grid Nesting 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
CSS grid-template Property The grid-template property in CSS is a shorthand property for defining grid columns, rows, and areas. It allows you to set values for the following longhand properties: grid-template-rows, grid-template-columns, and grid-template-areas.Syntaxgrid-template: none| grid-template-rows/ grid-template-col
4 min read
Primer CSS Gutters Grid 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
3 min read
Pure CSS Grids on Mobile Pure CSS is a free and open-source CSS framework. It is a set of resources for building dynamic websites and online applications. This was created by Yahoo and is used to create websites that load more quickly, have a better user experience, and look better. It effectively takes the place of Bootstr
4 min read