Responsive Grid System with SASS
How do I make an responsive grid system with sass?
What is a responsive grid system with sass? How do you make a responsive grid system with sass? This script and codes were developed by FerdousAlQuraeshi on 14 September 2022, Wednesday.
Responsive Grid System with SASS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Grid System with SASS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="row"> <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">grid#1 </div> <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">grid#2</div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">grid#3</div> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">grid#4</div>
</div>
</body>
</html>
Responsive Grid System with SASS - Script Codes CSS Codes
/*variables....*/
/* placeholders.... */
.row:after { content: ''; display: block; clear: both;
}
/* mixins.... */
/* base CSS.... */
.row + .row { margin-top: 2%;
}
[class^="col-"] { float: left; min-height: 1px; /* fallback height if 0 elements are present... */ /* padding-left: $gutter/2; */ /* padding-right: $gutter/2; */ padding: 1%; box-sizing: border-box; background: #e4e5e7; text-align: center; outline-color: red; outline-width: 1px; outline-style: dashed;
}
/* grid declaration..... */
.col-1 { width: 8.33333%;
}
.col-2 { width: 16.66667%;
}
.col-3 { width: 25%;
}
.col-4 { width: 33.33333%;
}
.col-5 { width: 41.66667%;
}
.col-6 { width: 50%;
}
.col-7 { width: 58.33333%;
}
.col-8 { width: 66.66667%;
}
.col-9 { width: 75%;
}
.col-10 { width: 83.33333%;
}
.col-11 { width: 91.66667%;
}
.col-12 { width: 100%;
}
/* =============================================== for Breakpoint management with @madiaQueries
==================================================*/
@media screen and (min-width: 1200px) { .col-lg-1 { width: 8.33333%; } .col-lg-2 { width: 16.66667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.33333%; } .col-lg-5 { width: 41.66667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.33333%; } .col-lg-8 { width: 66.66667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.33333%; } .col-lg-11 { width: 91.66667%; } .col-lg-12 { width: 100%; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) { .col-md-1 { width: 8.33333%; } .col-md-2 { width: 16.66667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.33333%; color: var(--laal); } .col-md-5 { width: 41.66667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.33333%; } .col-md-8 { width: 66.66667%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.33333%; } .col-md-11 { width: 91.66667%; } .col-md-12 { width: 100%; }
}
@media screen and (min-width: 768px) and (max-width: 991px) { .col-sm-1 { width: 8.33333%; } .col-sm-2 { width: 16.66667%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.33333%; } .col-sm-5 { width: 41.66667%; } .col-sm-6 { width: 50%; } .col-sm-7 { width: 58.33333%; } .col-sm-8 { width: 66.66667%; } .col-sm-9 { width: 75%; } .col-sm-10 { width: 83.33333%; } .col-sm-11 { width: 91.66667%; } .col-sm-12 { width: 100%; }
}
@media screen and (min-width: 480px) and (max-width: 767px) { .col-xs-1 { width: 8.33333%; } .col-xs-2 { width: 16.66667%; } .col-xs-3 { width: 25%; } .col-xs-4 { width: 33.33333%; } .col-xs-5 { width: 41.66667%; } .col-xs-6 { width: 50%; } .col-xs-7 { width: 58.33333%; } .col-xs-8 { width: 66.66667%; } .col-xs-9 { width: 75%; } .col-xs-10 { width: 83.33333%; } .col-xs-11 { width: 91.66667%; } .col-xs-12 { width: 100%; }
}
@media screen and (max-width: 480px) { [class^="col-"] { width: 100%; }
}
Developer | FerdousAlQuraeshi |
Username | ferdous-al-quraeshi |
Uploaded | September 14, 2022 |
Rating | 3 |
Size | 3,125 Kb |
Views | 30,360 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Printing Right Triangle Mirror Pattern | 1,520 Kb |
Grid Layout Using CSS-MediaQuery | 1,918 Kb |
A Pet layout project in SASS | 3,241 Kb |
Animation to Explain CSS Triangles | 1,513 Kb |
A Custom-made Tooltip | 1,732 Kb |
Simple Grid - pure CSS | 2,159 Kb |
Print Right Triangle Pattern | 1,555 Kb |
Centered Heading Overlaying a Horizontal Line with CSS | 2,031 Kb |
Practicing jQuery | 2,223 Kb |
Blurred on edges horizontal line | 1,456 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Pomodoro Timer | Sdas13 | 2,900 Kb |
Retina canvas w. resize | Erikterwan | 1,882 Kb |
Out of the blue | Giaco | 2,537 Kb |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
Popup Modal | Aldlevine | 3,696 Kb |
A Pen by Stan Williams | Stanssongs | 6,706 Kb |
Rain Landing in a Pond | Edball | 3,009 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
Another brick in the wall | Fivera | 1,955 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!