Responsive grid using flexbox
How do I make an responsive grid using flexbox?
What is a responsive grid using flexbox? How do you make a responsive grid using flexbox? This script and codes were developed by José Manuel Pérez on 12 January 2023, Thursday.
Responsive grid using flexbox - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive grid using flexbox</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class=item> <a href="https://placehold.it"><img src="https://placehold.it/300x300"></a> </div> <div class=item> <a href="https://placehold.it"><img src="https://placehold.it/300x300"></a> </div> <div class=item> <a href="https://placehold.it"><img src="https://placehold.it/300x300"></a> </div> <div class=item> <a href="https://placehold.it"><img src="https://placehold.it/300x300"></a> </div> <div class=item> <a href="https://placehold.it"><img src="https://placehold.it/300x300"></a> </div> <div class=item> <a href="https://placehold.it"><img src="https://placehold.it/300x300"></a> </div> <div class=item> <a href="https://placehold.it"><img src="https://placehold.it/300x300"></a> </div>
</div>
</body>
</html>
Responsive grid using flexbox - Script Codes CSS Codes
.container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;
}
@media (min-width: 300px) and (max-width: 800px) { .item { background-color: red; -webkit-box-flex: 0; -ms-flex: 0 0 32%; flex: 0 0 32%; margin: 1% 0; } .item:nth-child(3n-1) { margin-left: 2%; margin-right: 2%; }
}
@media (min-width: 800px) and (max-width: 1000px) { .item { background-color: red; -webkit-box-flex: 0; -ms-flex: 0 0 23.5%; flex: 0 0 23.5%; margin: 1% 0; } .item:nth-child(4n+2) { margin-left: 2%; margin-right: 2%; } .item:nth-child(4n+3) { margin-right: 2%; }
}
@media (min-width: 1000px) and (max-width: 1300px) { .item { background-color: red; -webkit-box-flex: 0; -ms-flex: 0 0 18.4%; flex: 0 0 18.4%; margin: 1% 0; } .item:nth-child(5n+2), .item:nth-child(5n+4) { margin-left: 2%; margin-right: 2%; }
}
@media (min-width: 1300px) { .item { background-color: red; -webkit-box-flex: 0; -ms-flex: 0 0 15%; flex: 0 0 15%; margin: 1% 0; } .item:nth-child(6n+2), .item:nth-child(6n+4) { margin-left: 2%; margin-right: 2%; } .item:nth-child(6n+5) { margin-right: 2%; }
}
.item img { display: block; width: 100%;
}
Developer | José Manuel Pérez |
Username | jmperez |
Uploaded | January 12, 2023 |
Rating | 3 |
Size | 2,128 Kb |
Views | 4,048 |
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 |
Spotify - Now Playing Visualization - With news ticker | 3,765 Kb |
Playing with a map | 2,245 Kb |
Flexbox for image layout | 1,498 Kb |
Responsive grid using grid | 1,890 Kb |
Blur effect when scaling up a small image | 1,527 Kb |
Drawing SVGs - Spotify Logo | 3,059 Kb |
Voice commands - Play a song | 3,320 Kb |
Spotify SVG | 2,319 Kb |
Alerting window popup | 1,358 Kb |
Spotify - Now Playing Visualization | 2,783 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 |
A Pen by Moeid Saleem | Moeidsaleem | 1,862 Kb |
Another brick in the wall | Fivera | 1,955 Kb |
The Rope | Chribbe | 2,886 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
Scarlett Johansson Tribute Page | Diomed | 3,233 Kb |
A Pen by John Malc | F789gh | 1,420 Kb |
Voting App - register | MatheusLima92 | 1,948 Kb |
Countdown with Rings | Ewganoel | 2,490 Kb |
Save for later... | Victorfreire | 1,359 Kb |
Wave Lines | Mikehobizal | 4,023 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!