Pure CSS Grids on Mobile
Last Updated :
26 Jul, 2022
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 Bootstrap. The responsive design was considered when creating Pure CSS. We consequently get pre-made, consistent adaptable layouts for all platforms.
By adding the pure-g class to a container, Pure CSS Grids are used to generate layouts and construct responsive layouts. Specific classes cannot add padding or borders to grid units, but we can do this using traditional CSS. There are two ways to complete them.
Pure CSS Grids on Mobile means that we develop grid systems mobile-first. Mobile-first grid system means we just need to use the pure-u-* class for all the units of the grid system. The star given in the class given is replaced by the default screen sizes provided by Pure CSS which are sm, md, lg, xl, and xxl. We specify the width of the units of the grid system on mobile first. Using one class will let the grid units take up that same space for every screen size. For example, if we use the pure-u-1-3 class for all the units, the cells will take up width:33.33%, no matter what screen size it is. If we want to make these grid units responsive and appropriate for every screen size we have to add the responsive grid classes to the units.
Pure CSS Grid Used Classes:
- pure-g: This class is used to create a Pure CSS grid system.
- pure-u-m-n: This class is used to add the units of the grid system. The (m,n) can range from (1-5, 0-5) or (1-24, 0-24). This class is mostly used to generate a Pure CSS Regular Grid or to express fixed grid sizes.
- pure-u-*-m-n: This class is also used to add the units of the grid system. The main feature of using this class is the star given in the class replaced by the default screen sizes provided by Pure CSS which are sm, md, lg, xl, and xxl. The space that the grids will occupy on each of these screens is specified by these screen sizes. The main purpose of this class is to build a responsive Pure CSS grid.
Syntax:
<div class="pure-g">
<div class="pure-u-1-2"> ... </div>
<div class="pure-u-1-2"> ... </div>
</div>
Example 1: The code below demonstrates the creation of Pure CSS Grids on Mobile. This grid system is developed which is suitable for mobile screens first, we have used the pure-u-1-2 class which shows the grid units take width: 50% on all screen sizes.
HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
<style>
.l-box{
background-color: aquamarine;
border: 0.5rem salmon solid;
margin-bottom: 0.5rem;
}
.m-box{
background-color: beige;
border: 0.5rem brown solid;
}
</style>
</head>
<body>
<div id="main">
<div class="header">
<h1 style="color:green;">GeeksforGeeks</h1>
<h2>Pure CSS Grids on Mobile</h2>
</div>
<div class="pure-g">
<div class="pure-u-1-2">
<div class="l-box">
1st Column for Pure CSS Grids on Mobile
</div>
</div>
<div class="pure-u-1-2">
<div class="l-box">
2nd Column for Pure CSS Grids on Mobile
</div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-2">
<div class="m-box">
1st Column for Pure CSS Grids on Mobile
</div>
</div>
<div class="pure-u-1-2">
<div class="m-box">
2nd Column for Pure CSS Grids on Mobile
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: The code below demonstrates the creation of Pure CSS Grids on Mobile. This grid system is developed which is suitable for mobile screens first, we have used the pure-u-1-2 and pure-u-1-3 classes which shows the grid units take width: 50% and width: 33.33% on all screens sizes respectively.
HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
<style>
.l-box{
background-color: aquamarine;
border: 0.5rem salmon solid;
margin-bottom: 0.5rem;
}
.m-box{
background-color: beige;
border: 0.5rem brown solid;
}
</style>
</head>
<body>
<div id="main">
<div class="header">
<h1 style="color:green;">GeeksforGeeks</h1>
<h2>Pure CSS Grids on Mobile</h2>
</div>
<div class="pure-g">
<div class="pure-u-1-2">
<div class="l-box">
1st Column for Pure CSS Grids on Mobile
</div>
</div>
<div class="pure-u-1-2">
<div class="l-box">
2nd Column for Pure CSS Grids on Mobile
</div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-3">
<div class="m-box">
1st Column for Pure CSS Grids on Mobile
</div>
</div>
<div class="pure-u-1-3">
<div class="m-box">
2nd Column for Pure CSS Grids on Mobile
</div>
</div>
<div class="pure-u-1-3">
<div class="m-box">
3rd Column for Pure CSS Grids on Mobile
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://purecss.io/grids/#grids-on-mobile
Share your thoughts in the comments
Please Login to comment...