0

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.

alancc
  • 487
  • 2
  • 24
  • 68
  • Does this answer your question? [Media Queries: How to target desktop, tablet, and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) – rx2347 May 13 '23 at 14:38
  • In this case it is controlled with `flex-basis: 12.5%` => `100/12.5 = 8`. When the flexbox parent container has enough child items (8+) each gets max. 12.5% of the total space. When less than 8 child elements, depending on `flex-grow: 1`, the available space gets divided over the child elements. – Rene van der Lende May 13 '23 at 14:49
  • Don't set the flex properties. i.e Leave them as `flex:none`. Just set the width in pixels to the desired cell size. – Alohci May 13 '23 at 15:09

2 Answers2

0

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:

.grid-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

.grid-gallery__cell {
  padding: .5rem;
  background: #eff3f5;
  border: 1px solid #56a1d5;
  display: grid;
  place-items: center;
}

@media only screen and (min-width: 1024px) {

  .grid-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
}

@media only screen and (min-width: 1366px) {

  .grid-gallery {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  
}

@media only screen and (min-width: 1920px) {

  .grid-gallery {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  
}

body {
  /* demo only */
  margin: 2rem;
}
<section class="grid-gallery">
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/5_cows.gif" alt="Tucows 5 cows" width="122" height="96" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/tscup5.gif" alt="TopShareware.com 5 Stars" width="130" height="80" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/filetras.gif" alt="File Transit 5 Stars" width="120" height="75" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/softland.gif" alt="SoftLandMark Editor's Pick" width="198" height="68" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/filehung.gif" alt="FileHungry 5 Stars" width="101" height="108" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/sn5star.gif" alt="SoftNews 5/5" width="93" height="90" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/bpick1.gif" alt="FilePicks Best Pick" width="100" height="50" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/soft32_5.jpg" alt="Soft32.com 5 Stars" width="116" height="66" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/5softdll.gif" alt="SoftDLL 5 Stars" width="80" height="80" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/award_softpedia_clean.gif" alt="Softpedia Award" width="121" height="84" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/softpilemp.gif" alt="Softpile.com Most Popular Award" width="103" height="100" />
  </div>
  <div class="grid-gallery__cell">
    <img src="https://www.datanumen.com/awards-pics/softforall5.gif" alt="SoftForAll 5 Star Award" width="114" height="108" />
  </div>
</section>
Conan
  • 2,659
  • 17
  • 24
-1

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

Midz Elwekil
  • 441
  • 4
  • 12