Simple smart calculated grid system

Developer
Jelmer
Size
2,975 Kb
Views
12,144
  1. Simple smart calculated grid system Previews
  2. Simple smart calculated grid system HTML Codes
  3. Simple smart calculated grid system CSS Codes

How do I make an simple smart calculated grid system?

Making use of SCSS you can generate a simple stack of CSS classes that cover all possible grid classes from 1 to 12 colums.. What is a simple smart calculated grid system? How do you make a simple smart calculated grid system? This script and codes were developed by Jelmer on 02 December 2022, Friday.

Simple smart calculated grid system Previews
IQ Test

Simple smart calculated grid system - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple smart calculated grid system</title> <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="grid"> <strong>2 cols</strong> <div class="column-1-2"> 1 / 2 </div> <strong>3 cols</strong> <div class="column-1-3"> 1 / 3 </div> <div class="column-2-3"> 2 / 3 </div> <strong>4 cols</strong> <div class="column-1-4"> 1 / 4 </div> <div class="column-2-4"> 2 / 4 </div> <div class="column-3-4"> 3 / 4 </div> <strong>5 cols</strong> <div class="column-1-5"> 1 / 5 </div> <div class="column-2-5"> 2 / 5 </div> <div class="column-3-5"> 3 / 5 </div> <div class="column-4-5"> 4 / 5 </div> <strong>6 cols</strong> <div class="column-1-6"> 1 / 6 </div> <div class="column-2-6"> 2 / 6 </div> <div class="column-3-6"> 3 / 6 </div> <div class="column-4-6"> 4 / 6 </div> <div class="column-5-6"> 5 / 6 </div> <strong>7 cols</strong> <div class="column-1-7"> 1 / 7 </div> <div class="column-2-7"> 2 / 7 </div> <div class="column-3-7"> 3 / 7 </div> <div class="column-4-7"> 4 / 7 </div> <div class="column-5-7"> 5 / 7 </div> <div class="column-6-7"> 6 / 7 </div> <strong>8 cols</strong> <div class="column-1-8"> 1 / 8 </div> <div class="column-2-8"> 2 / 8 </div> <div class="column-3-8"> 3 / 8 </div> <div class="column-4-8"> 4 / 8 </div> <div class="column-5-8"> 5 / 8 </div> <div class="column-6-8"> 6 / 8 </div> <div class="column-7-8"> 7 / 8 </div> <strong>9 cols</strong> <div class="column-1-9"> 1 / 9 </div> <div class="column-2-9"> 2 / 9 </div> <div class="column-3-9"> 3 / 9 </div> <div class="column-4-9"> 4 / 9 </div> <div class="column-5-9"> 5 / 9 </div> <div class="column-6-9"> 6 / 9 </div> <div class="column-7-9"> 7 / 9 </div> <div class="column-8-9"> 8 / 9 </div> <strong>10 cols</strong> <div class="column-1-10"> 1 / 10 </div> <div class="column-2-10"> 2 / 10 </div> <div class="column-3-10"> 3 / 10 </div> <div class="column-4-10"> 4 / 10 </div> <div class="column-5-10"> 5 / 10 </div> <div class="column-6-10"> 6 / 10 </div> <div class="column-7-10"> 7 / 10 </div> <div class="column-8-10"> 8 / 10 </div> <div class="column-9-10"> 9 / 10 </div> <strong>11 cols</strong> <div class="column-1-11"> 1 / 11 </div> <div class="column-2-11"> 2 / 11 </div> <div class="column-3-11"> 3 / 11 </div> <div class="column-4-11"> 4 / 11 </div> <div class="column-5-11"> 5 / 11 </div> <div class="column-6-11"> 6 / 11 </div> <div class="column-7-11"> 7 / 11 </div> <div class="column-8-11"> 8 / 11 </div> <div class="column-9-11"> 9 / 11 </div> <div class="column-10-11"> 10 / 11 </div> <strong>12 cols</strong> <div class="column-1-12"> 1 / 12 </div> <div class="column-2-12"> 2 / 12 </div> <div class="column-3-12"> 3 / 12 </div> <div class="column-4-12"> 4 / 12 </div> <div class="column-5-12"> 5 / 12 </div> <div class="column-6-12"> 6 / 12 </div> <div class="column-7-12"> 7 / 12 </div> <div class="column-8-12"> 8 / 12 </div> <div class="column-9-12"> 9 / 12 </div> <div class="column-10-12"> 10 / 12 </div> <div class="column-11-12"> 11 / 12 </div>
</div>
</body>
</html>

Simple smart calculated grid system - Script Codes CSS Codes

@media screen and (min-width: 480px) { .column-1-2 { width: 50%; } .column-1-3 { width: 33.33333%; } .column-2-3 { width: 66.66667%; } .column-1-4 { width: 25%; } .column-2-4 { width: 50%; } .column-3-4 { width: 75%; } .column-1-5 { width: 20%; } .column-2-5 { width: 40%; } .column-3-5 { width: 60%; } .column-4-5 { width: 80%; } .column-1-6 { width: 16.66667%; } .column-2-6 { width: 33.33333%; } .column-3-6 { width: 50%; } .column-4-6 { width: 66.66667%; } .column-5-6 { width: 83.33333%; } .column-1-7 { width: 14.28571%; } .column-2-7 { width: 28.57143%; } .column-3-7 { width: 42.85714%; } .column-4-7 { width: 57.14286%; } .column-5-7 { width: 71.42857%; } .column-6-7 { width: 85.71429%; } .column-1-8 { width: 12.5%; } .column-2-8 { width: 25%; } .column-3-8 { width: 37.5%; } .column-4-8 { width: 50%; } .column-5-8 { width: 62.5%; } .column-6-8 { width: 75%; } .column-7-8 { width: 87.5%; } .column-1-9 { width: 11.11111%; } .column-2-9 { width: 22.22222%; } .column-3-9 { width: 33.33333%; } .column-4-9 { width: 44.44444%; } .column-5-9 { width: 55.55556%; } .column-6-9 { width: 66.66667%; } .column-7-9 { width: 77.77778%; } .column-8-9 { width: 88.88889%; } .column-1-10 { width: 10%; } .column-2-10 { width: 20%; } .column-3-10 { width: 30%; } .column-4-10 { width: 40%; } .column-5-10 { width: 50%; } .column-6-10 { width: 60%; } .column-7-10 { width: 70%; } .column-8-10 { width: 80%; } .column-9-10 { width: 90%; } .column-1-11 { width: 9.09091%; } .column-2-11 { width: 18.18182%; } .column-3-11 { width: 27.27273%; } .column-4-11 { width: 36.36364%; } .column-5-11 { width: 45.45455%; } .column-6-11 { width: 54.54545%; } .column-7-11 { width: 63.63636%; } .column-8-11 { width: 72.72727%; } .column-9-11 { width: 81.81818%; } .column-10-11 { width: 90.90909%; } .column-1-12 { width: 8.33333%; } .column-2-12 { width: 16.66667%; } .column-3-12 { width: 25%; } .column-4-12 { width: 33.33333%; } .column-5-12 { width: 41.66667%; } .column-6-12 { width: 50%; } .column-7-12 { width: 58.33333%; } .column-8-12 { width: 66.66667%; } .column-9-12 { width: 75%; } .column-10-12 { width: 83.33333%; } .column-11-12 { width: 91.66667%; }
}
[class^="column-"] { background: skyblue; padding: 5px; border: 1px solid white;
}
.grid { width: 100%;
}
body { font-size: 12px;
}
Simple smart calculated grid system - Script Codes
Simple smart calculated grid system - Script Codes
Home Page Home
Developer Jelmer
Username jelmerdemaat
Uploaded December 02, 2022
Rating 3
Size 2,975 Kb
Views 12,144
Do you need developer help for Simple smart calculated grid system?

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!

Jelmer (jelmerdemaat) Script Codes
Name
Justified divs, attempt 2
Little loading spinner
A pure CSS slideshow
A Pen by Jelmer
Check comment length to filter unuseful ones
Animated counter element
Justified divs, attempt 4
How to force download a file with JavaScript
Simple responsive photo slider gallery
Loading spinner moving bars
Create amazing blog posts with AI!

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!