I find HTML code snippet and the CSS rules. But I cannot find the rule that specify the number of cells in each row.
Now I want to make it responsive, making the cell size fixed for all devices. Then display more cells per row to fit a wide screen in a normal desktop computers, but display less cells per row on a narrow screen in mobile phone. How to do so?
.row {
margin: 0 -8px;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.row-gallery .col-ds {
flex-basis: 12.5%;
align-self: center;
-ms-flex-positive: inherit;
flex-grow: inherit;
}
.row-gallery .col-ds .inner {
background: #eff3f5;
border: 1px solid #56a1d5;
text-align: center;
padding: 10px;
height: 100%;
overflow: hidden;
}
<div class="row row-gallery">
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/5_cows.gif" alt="Tucows 5 cows" width="122" height="96" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/tscup5.gif" alt="TopShareware.com 5 Stars" width="130" height="80" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/filetras.gif" alt="File Transit 5 Stars" width="120" height="75" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/softland.gif" alt="SoftLandMark Editor's Pick" width="198" height="68" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/filehung.gif" alt="FileHungry 5 Stars" width="101" height="108" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/sn5star.gif" alt="SoftNews 5/5" width="93" height="90" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/bpick1.gif" alt="FilePicks Best Pick" width="100" height="50" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/soft32_5.jpg" alt="Soft32.com 5 Stars" width="116" height="66" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/5softdll.gif" alt="SoftDLL 5 Stars" width="80" height="80" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/award_softpedia_clean.gif" alt="Softpedia Award" width="121" height="84" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/softpilemp.gif" alt="Softpile.com Most Popular Award" width="103" height="100" /></div>
</div>
<div class="col-ds">
<div class="inner"><img src="https://www.datanumen.com/awards-pics/softforall5.gif" alt="SoftForAll 5 Star Award" width="114" height="108" /></div>
</div>
</div>
Update
I change flex-basis: 12.5%; -> 164px; which solve the issue. Thanks to all of your helps.
2
Answers
I think you are after a design similar to Pinterest.
here’s a video of how it’s done: https://www.youtube.com/watch?v=VTJ_0MplSwk
In the event you’d like columns to remain the same width, you could use CSS grid as an alternative, along with
@media
queries to control the number of columns per row based on the available screen width: