SCSS Grid System
How do I make an scss grid system?
What is a scss grid system? How do you make a scss grid system? This script and codes were developed by Matt Popovich on 02 August 2022, Tuesday.
SCSS Grid System - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SCSS Grid System</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="row"> <div class="col1-2"><p>.col1-2</p></div> <div class="col1-2"><p>.col1-2</p></div> </div> <div class="row"> <div class="col1-4"><p>.col1-4</p></div> <div class="col1-4"><p>.col1-4</p></div> <div class="col1-4"><p>.col1-4</p></div> <div class="col1-4"><p>.col1-4</p></div> </div> <div class="row"> <div class="col1"><p>.col1</p></div> </div> <div class="row"> <div class="col1-4"><p>.col1-4</p></div> <div class="col1-4"><p>.col1-4</p></div> <div class="col1-2"><p>.col1-2</p></div> </div> <script src="js/index.js"></script>
</body>
</html>
SCSS Grid System - Script Codes CSS Codes
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.row { text-align: center; min-height: 100px;
}
.row:before, .row:after { content: ""; display: table;
}
.row:after { clear: both;
}
.col1-4 { width: 25%; text-align: center; min-height: 100px; float: left; border: 5px solid #FFF;
}
.col1-2 { width: 50%; text-align: center; min-height: 100px; float: left; border: 5px solid #FFF;
}
.col1 { width: 100%; text-align: center; min-height: 100px; float: left; border: 5px solid #FFF;
}
@media (max-width: 1024px) { .col1-4 { width: 50%; } .col1-2 { width: 50%; } .col1 { width: 100%; }
}
@media (max-width: 1024px) and (max-width: 768px) { .col1-4 { width: 50%; } .col1-2 { width: 100%; } .col1 { width: 100%; }
}
@media (max-width: 1024px) and (max-width: 768px) and (max-width: 480px) { .col1-4 { width: 100%; } .col1-2 { width: 100%; } .col1 { width: 100%; }
}
/* Just fonts & colors below here */
* { font-family: Helvetica, sans-serif; color: #FFF;
}
.col1-4 { background-color: #30ADB8;
}
.col1-2 { background-color: #297991;
}
.col1 { background-color: #225378;
}
SCSS Grid System - Script Codes JS Codes
// [][ S U P E R ]
// [ S I M P L E ]
// [ ][ S C S S ]
// [ G R I D ][ ]
// [ S Y S T E M ]
// I needed a simpler
// grid system than I
// could find a library
// for, so I built this.
// 1/4, 1/2, and full-
// width boxes only.
// <50 lines of code.
// Resize the window
// to see it in action.
Developer | Matt Popovich |
Username | mpopv |
Uploaded | August 02, 2022 |
Rating | 3 |
Size | 2,630 Kb |
Views | 44,528 |
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 |
Text-rendering comparison | 2,914 Kb |
Make Your Own Marco Mag | 363,658 Kb |
Bent Hose | 2,353 Kb |
MoonJS Hello World | 2,142 Kb |
FOLLOW UR DREAMS | 2,984 Kb |
Fog city night festival | 2,645 Kb |
Polygon-style gradient pull quote | 2,917 Kb |
Paint on Heat Distortion | 5,614 Kb |
Vader Arrives on the Sanctuary Moon | 6,815 Kb |
Trump Twitter Cover Generator | 852,899 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 |
Zip Button test | Lje7462 | 1,932 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
Filtering with shuffle.js | Deyand | 2,712 Kb |
Plotting Points with D3.js | Laurakelly | 31,996 Kb |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Subtle site navigation with description | Necks | 3,206 Kb |
Starfield using KineticJS | Asp | 3,512 Kb |
MAD9013 - Float Images with Content | Mad-d | 2,220 Kb |
Navcube | Wbarlow | 4,775 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!