Responsive Grid for Dynamic Layouts

Developer
Chris Wachtman
Size
3,689 Kb
Views
26,312
  1. Responsive Grid for Dynamic Layouts Previews
  2. Responsive Grid for Dynamic Layouts HTML Codes
  3. Responsive Grid for Dynamic Layouts CSS Codes
  4. Responsive Grid for Dynamic Layouts JS Codes

How do I make an responsive grid for dynamic layouts?

For some resposive projects, I've needed to hack against the grid system in order to match design mockups with different layouts at 3 or more breakpoints. Most grids I've seen simply jump from whatever columns you've chosen straight to vertically stacked. (Only 2 layouts). What is a responsive grid for dynamic layouts? How do you make a responsive grid for dynamic layouts? This script and codes were developed by Chris Wachtman on 17 October 2022, Monday.

Responsive Grid for Dynamic Layouts Previews
IQ Test

Responsive Grid for Dynamic Layouts - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Grid for Dynamic Layouts</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='grid'> <div class='col-2-3 tab-1-1'> <div class='module'>.col-2-3.tab-1-1</div> </div> <div class='col-1-3 tab-1-2'> <div class='module'>.col-1-3.tab-1-2</div> </div> <div class='col-1-3 tab-1-2'> <div class='module'>.col-1-3.tab-1-2</div> </div> <div class='col-1-3 tab-1-2'> <div class='module'>.col-1-3.tab-1-2</div> </div> <div class='col-1-3 tab-1-2'> <div class='module'>.col-1-3.tab-1-2</div> </div> <div class='col-1-1'> <div class='module'>.col-1-1</div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Responsive Grid for Dynamic Layouts - Script Codes CSS Codes

.grid { background: white;
}
.grid:after { content: ""; display: table; clear: both;
}
[class*='col-'] { float: left;
}
.col-1-1 { width: 100%;
}
.col-3-4 { width: 75%;
}
.col-2-3 { width: 66.66%;
}
.col-1-3 { width: 33.33%;
}
.col-1-2 { width: 50%;
}
.col-1-4 { width: 25%;
}
.col-1-8 { width: 12.5%;
}
.module { padding: 10px; margin: 10px; height: 100px; background: grey; text-align: center;
}
@media (max-width: 800px) { .tab-1-1 { width: 100%; } .tab-3-4 { width: 75%; } .tab-2-3 { width: 66.66%; } .tab-1-3 { width: 33.33%; } .tab-1-2 { width: 50%; } .tab-1-4 { width: 25%; } .tab-1-8 { width: 12.5%; }
}
@media (max-width: 400px) { [class*='col-'] { width: 100%; }
}

Responsive Grid for Dynamic Layouts - Script Codes JS Codes

/*
For some resposive projects, I've needed to hack against the grid system in order to match design mockups with different layouts at 3 or more breakpoints. Most grids I've seen simply jump from whatever columns you've chosen straight to vertically stacked. (Only 2 layouts)
I considered telling designers to stop being so fancy, but then I imagined up a technique to apply different grid dimensions at different breakpoints. Simply include a class prefix for each breakpoint where the element will jump to a new column dimension.
This grid technique is based off of Chris Croyier's Don’t Overthink It Grids:
https://css-tricks.com/dont-overthink-it-grids/
https://www.youtube.com/watch?v=9ScOYtky7CM
Unsemantic comes close with their 'mobile' prefix but doesn't have the flexibility for my needs.
http://unsemantic.com/demo-responsive
Only grid like this I've seen is CSS Wizardry Grids. Their naming convention is a bit hard for me to read quickly.
https://csswizardry.com/csswizardry-grids/
EDIT: Looks like Bootstrap 3 was released yesterday and does exactly what I'm talking about... What are the odds?
https://getbootstrap.com/css/#grid-example-mixed-complete
*/
Responsive Grid for Dynamic Layouts - Script Codes
Responsive Grid for Dynamic Layouts - Script Codes
Home Page Home
Developer Chris Wachtman
Username cwacht
Uploaded October 17, 2022
Rating 3
Size 3,689 Kb
Views 26,312
Do you need developer help for Responsive Grid for Dynamic Layouts?

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!

Chris Wachtman (cwacht) Script Codes
Name
Music Bookmarklet
NASA Concept
CSS Pie Chart
Personal Webpage Brainstorm
Single Element ChromeCast Icon
Dragonboat App
Halo 5 REQ Guide Bookmarklet
Angular-HAML
Destiny Weapon Inventory
Font Awesome Forever
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!