12 Column Grid Framework In 12 Lines of Code
How do I make an 12 column grid framework in 12 lines of code?
Exactly what the title says.. What is a 12 column grid framework in 12 lines of code? How do you make a 12 column grid framework in 12 lines of code? This script and codes were developed by Thomas Hare on 17 November 2022, Thursday.
12 Column Grid Framework In 12 Lines of Code - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>12 Column Grid Framework In 12 Lines of Code</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="xs-12 sm-4 md-6 lg-9 xl-2" style="background-color: blue;height:100px;"></div>
<div class="xs-12 sm-8 md-6 lg-3 xl-10" style="background-color: red;height:100px;"></div>
</body>
</html>
12 Column Grid Framework In 12 Lines of Code - Script Codes CSS Codes
div { box-sizing: border-box; float: left;
}
@media screen and (min-width: 0px) { .xs-1 { width: 8.333333333333334%; } .xs-2 { width: 16.666666666666668%; } .xs-3 { width: 25%; } .xs-4 { width: 33.333333333333336%; } .xs-5 { width: 41.66666666666667%; } .xs-6 { width: 50%; } .xs-7 { width: 58.333333333333336%; } .xs-8 { width: 66.66666666666667%; } .xs-9 { width: 75%; } .xs-10 { width: 83.33333333333334%; } .xs-11 { width: 91.66666666666667%; } .xs-12 { width: 100%; }
}
@media screen and (min-width: 576px) { .sm-1 { width: 8.333333333333334%; } .sm-2 { width: 16.666666666666668%; } .sm-3 { width: 25%; } .sm-4 { width: 33.333333333333336%; } .sm-5 { width: 41.66666666666667%; } .sm-6 { width: 50%; } .sm-7 { width: 58.333333333333336%; } .sm-8 { width: 66.66666666666667%; } .sm-9 { width: 75%; } .sm-10 { width: 83.33333333333334%; } .sm-11 { width: 91.66666666666667%; } .sm-12 { width: 100%; }
}
@media screen and (min-width: 768px) { .md-1 { width: 8.333333333333334%; } .md-2 { width: 16.666666666666668%; } .md-3 { width: 25%; } .md-4 { width: 33.333333333333336%; } .md-5 { width: 41.66666666666667%; } .md-6 { width: 50%; } .md-7 { width: 58.333333333333336%; } .md-8 { width: 66.66666666666667%; } .md-9 { width: 75%; } .md-10 { width: 83.33333333333334%; } .md-11 { width: 91.66666666666667%; } .md-12 { width: 100%; }
}
@media screen and (min-width: 992px) { .lg-1 { width: 8.333333333333334%; } .lg-2 { width: 16.666666666666668%; } .lg-3 { width: 25%; } .lg-4 { width: 33.333333333333336%; } .lg-5 { width: 41.66666666666667%; } .lg-6 { width: 50%; } .lg-7 { width: 58.333333333333336%; } .lg-8 { width: 66.66666666666667%; } .lg-9 { width: 75%; } .lg-10 { width: 83.33333333333334%; } .lg-11 { width: 91.66666666666667%; } .lg-12 { width: 100%; }
}
@media screen and (min-width: 1200px) { .xl-1 { width: 8.333333333333334%; } .xl-2 { width: 16.666666666666668%; } .xl-3 { width: 25%; } .xl-4 { width: 33.333333333333336%; } .xl-5 { width: 41.66666666666667%; } .xl-6 { width: 50%; } .xl-7 { width: 58.333333333333336%; } .xl-8 { width: 66.66666666666667%; } .xl-9 { width: 75%; } .xl-10 { width: 83.33333333333334%; } .xl-11 { width: 91.66666666666667%; } .xl-12 { width: 100%; }
}
Developer | Thomas Hare |
Username | tommyhare |
Uploaded | November 17, 2022 |
Rating | 3 |
Size | 2,210 Kb |
Views | 12,144 |
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 |
Bootstrap V4 tabs | 2,297 Kb |
Swipe View | 2,225 Kb |
Table Classes | 2,645 Kb |
Simple Login | 3,015 Kb |
Space Ashley | 2,028 Kb |
Simple Passwords | 2,582 Kb |
The Initiator | 2,695 Kb |
Material UI | 4,384 Kb |
Bootstrap Form Fun | 2,424 Kb |
Micropush | 3,184 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 |
Hc first draft | Stepfray | 5,104 Kb |
Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 Kb |
Scifi-style Radio-based Tab | Aaronchuo | 4,427 Kb |
Horizontal scroll fixed element | HerrSerker | 0 Kb |
The Rope | Chribbe | 2,886 Kb |
Test | Dviate | 2,668 Kb |
Flip test | Madhes | 1,635 Kb |
Wikipedia API | Coderpilot | 2,802 Kb |
Css color for svg | Ademilter | 2,392 Kb |
A form arranged using automatic placement. | Vikasford | 2,103 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!