Responsive grid using flexbox

Developer
José Manuel Pérez
Size
2,128 Kb
Views
4,048
  1. Responsive grid using flexbox Previews
  2. Responsive grid using flexbox HTML Codes
  3. Responsive grid using flexbox CSS Codes

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 Previews
IQ Test

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%;
}
Responsive grid using flexbox - Script Codes
Responsive grid using flexbox - Script Codes
Home Page Home
Developer José Manuel Pérez
Username jmperez
Uploaded January 12, 2023
Rating 3
Size 2,128 Kb
Views 4,048
Do you need developer help for Responsive grid using flexbox?

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!

José Manuel Pérez (jmperez) Script Codes
Name
Reproducing Medium loading image effect
Reproducing Medium loading image effect - WebP version
Flexbox for image layout
Voice commands - Play a song
Alerting window popup
Spotify - Now Playing Visualization
Playing with a map
Drawing SVGs - Spotify Logo
Spotify SVG
Responsive grid using grid
Create amazing love letters 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!