Responsive image grid
How do I make an responsive image grid?
Responsive image grid with three types of rows, each containing three images.. What is a responsive image grid? How do you make a responsive image grid? This script and codes were developed by Robert on 08 November 2022, Tuesday.
Responsive image grid - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive image grid</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="wrapper"> <div class="row type-a"> <div class="item"><img src="//placehold.it/350x150" alt="" /></div> <div class="wrap"> <div class="item"><img src="//placehold.it/350x150" alt="" /></div> <div class="item"><img src="//placehold.it/350x150" alt="" /></div> </div> </div> <div class="row type-b"> <div class="item"><img src="//placehold.it/350x150" alt="" /></div> <div class="item"><img src="//placehold.it/350x150" alt="" /></div> <div class="item"><img src="//placehold.it/350x150" alt="" /></div> </div> <div class="row type-c"> <div class="wrap"> <div class="item"><img src="//placehold.it/350x150" alt="" /></div> <div class="item"><img src="//placehold.it/350x150" alt="" /></div> </div> <div class="item"><img src="//placehold.it/350x150" alt="" /></div> </div>
</div>
</body>
</html>
Responsive image grid - Script Codes CSS Codes
* { box-sizing: border-box;
}
html { background: #000;
}
.wrapper { max-width: 1024px; margin: 50px auto;
}
.row { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 2px;
}
.row .item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}
.row .wrap { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column; flex-flow: column;
}
.row .wrap .item { position: relative; overflow: hidden;
}
.row .wrap .item img { position: absolute; top: 0; left: 0; right: 0;
}
.type-a > .item:first-child { -webkit-box-flex: 2; -ms-flex: 2; flex: 2; padding-right: 1px;
}
.type-a .wrap .item:first-child { margin-bottom: 2px;
}
.type-a .wrap .item img { left: 1px;
}
.type-c > .item:last-child { -webkit-box-flex: 2; -ms-flex: 2; flex: 2; padding-left: 1px;
}
.type-c .wrap .item:first-child { margin-bottom: 2px;
}
.type-c .wrap .item img { left: -1px;
}
.type-b .item:nth-child(1) { padding-right: 1px;
}
.type-b .item:nth-child(2) { padding-left: 1px; padding-right: 1px;
}
.type-b .item:nth-child(3) { padding-left: 1px;
}
img { display: block; width: 100%;
}
Developer | Robert |
Username | rendro |
Uploaded | November 08, 2022 |
Rating | 3 |
Size | 2,345 Kb |
Views | 42,504 |
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 |
CSS3 Browser | 2,882 Kb |
A Pen by Robert | 3,362 Kb |
CSS3 Diamond | 1,960 Kb |
Float Label Pattern | 2,430 Kb |
CSS Map pin | 2,001 Kb |
Confirm appointment dialog | 3,130 Kb |
Greeting card | 2,208 Kb |
WebGL cube test | 15,142 Kb |
CSS vintage filter form images | 2,190 Kb |
Mobile navigation button | 2,659 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 |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
Sass Radar | Jlong | 6,887 Kb |
CSS Infinite 360 | APinix | 5,564 Kb |
Coming Soon | MariamMassadeh | 1,680 Kb |
Welcome | Nakome | 6,076 Kb |
Wikipedia viewer | Chpecson | 2,865 Kb |
SVG Hover Animations | Kjbrum | 10,557 Kb |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
CSS Gem Badge | Orchard | 3,335 Kb |
React Template | Isac | 1,241 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!