Question 167369 in Html Question posted in
Some basic documentation can be found here.

Html – How the CSS rules control the number of cells per row?

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search