Show a list of items as grid or column depending on the device

Question

I have a basic need.

I have n images I want to display. I want to display them in rows, each row containing 3 images, if I am on a browser on a computer. I want to show them in a column, i.e. one below the other, if I am on a mobile device.

I do not want to use bootstrap.

Currently I am thinking to manage this with angular/flex-layout, but is seems that there is a bit of work (e.g. find the number of rows dividing by 3 and so on).

I am wondering if there is a simpler way.

Answer 1

This is very easily done with css media queries and flexbox.

.item {
  width: 50px;
  height: 50px;
  background-color: tomato;
  width: 100%;
  margin: 8px;
}

@media (min-width: 720px) {
  .list {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    width: calc(33% - 16px);
  }
}

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <!-- however many items you want -->
</div>

Live demo