Currently, I am in the process of developing a fluid grid section to showcase events. To ensure responsiveness on varying screen resolutions, I have incorporated media queries that adjust the size of the div elements accordingly. When all the divs are uniform in height, the layout looks great. However, it presents issues when the divs have different heights, resulting in unsightly vertical gaps between them. Is there a way to address this? I suspect it may require more than just CSS and might involve some JavaScript work. I have included two images for reference: one depicting the current appearance and the other illustrating the desired look. Find the relevant HTML code below.
<style>
body {
background-color:#dedede;
margin:0;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}
#pagewrap {
width: 100%;
margin: 10px auto;
}
.box {
box-sizing:border-box;
padding:10px;
margin:6px;
max-width:220px;
border:solid 1px #ccc;
background-color:#fff;
float:left;
}
@media screen and (max-width: 1200px) {
.box {
width:19%;
margin:.5%;
}
}
@media screen and (max-width: 980px) {
.box {
width:23.75%;
margin:.5%
}
}
@media screen and (max-width: 650px) {
.box {
width:31%;
margin:1%;
}
}
@media screen and (max-width: 565px) {
.box {
width:46%;
margin:2%;
}
}
@media screen and (max-width: 360px) {
.box {
width:90%;
}
}
</style>
</head>
<body>
<div id="pagewrap">
<div class="box">Your event content here!</div>
// Repeat above line as needed
Current Layout:
https://i.stack.imgur.com/WtcPn.jpg
(source: asingularcreation.com)
Desired Layout:
https://i.stack.imgur.com/yW36y.jpg
(source: asingularcreation.com)
Any assistance with resolving this issue would be greatly appreciated!