0

I am using W3.CSS as CSS framework. It's simple and straightforward. Now I am having some trouble presenting a set of cards in a responsive grid.

I want the cards to be in rows of three when there is enough space, or one per row when the screen is small. The problem is that, depending on the height of the card, the new cards are added below the last card, and not in a new row.

You can run the snippet below. I would like the green card to go to a new row.

.w3-col {
  margin-bottom: 16px;
}

.card {
  background-color: red;
  text-align: center;
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>

<div class="w3-container">
  <div class="w3-row-padding">
    <div class="w3-col s4">
      <div class="card" style="height: 100px"></div>
    </div>
    <div class="w3-col s4">
      <div class="card" style="height: 120px; background-color: black"></div>
    </div>
    <div class="w3-col s4">
      <div class="card" style="height: 100px"></div>
    </div>
    <div class="w3-col s4">
      <div class="card" style="height: 100px; background-color: green"></div>
    </div>
    <div class="w3-col s4">
      <div class="card" style="height: 100px"></div>
    </div>
    <div class="w3-col s4">
      <div class="card" style="height: 100px"></div>
    </div>
    <div class="w3-col s4">
      <div class="card" style="height: 100px"></div>
    </div>
  </div>
</div>

The problem is identical in Bootstrap, if you use row and col-xs-4 instead of w3-row and w3-col s4. You can see it here https://jsfiddle.net/qLcs84f2/

Jose Ospina
  • 2,097
  • 3
  • 26
  • 40
  • did you read this? https://www.w3schools.com/w3css/w3css_grid.asp – mlegg Sep 05 '17 at 16:09
  • yes. I could add a w3-row for every three cards, but then ...... wait!, they will still be shown as a single col on small screens. How dumb of me. Thanks... So I use Javascript to build each w3-row of three elements dynamically. I thought there was a pure CSS solution. – Jose Ospina Sep 05 '17 at 16:35
  • What version of Bootstrap are you using? You have twitter-bootstrap tagged – mlegg Sep 05 '17 at 16:47
  • I am using w3.css, but the problem is identical in Bootstrap, so I thought it would help me find a solution https://jsfiddle.net/qLcs84f2/ – Jose Ospina Sep 05 '17 at 17:00
  • Here is a Bootstrap solution that is easy to use. I've never bothered with the W3 versions https://codepen.io/knitevision1/pen/BAFmk – mlegg Sep 05 '17 at 17:17
  • Thanks, but it seems to have the same behavior. If I change the height of the second card to 180px https://codepen.io/anon/pen/gxyVXg – Jose Ospina Sep 06 '17 at 07:41

0 Answers0