3 Columns of images on desktop view, 2 Columns of images on mobile view

Question

I'm trying to make a home page where there is 6 blocks of images with 3 columns. But also want those 6 blocks to show as 2 columns on mobile view.

I have attached some images of what I want it to look like and my code that I'm using. I've tried different types of flex-wrap but I'm not getting it to work properly.

Here is the link to jsfiddle - https://jsfiddle.net/7frjmeat/

Here is the current desktop view

Here is what I'm hoping for the mobile view to look like -

Code

html,
body,
a,
{
  width: 100%;
  height: 100%;
  margin: 0;
}

p {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 200%;
}

hr {
  width: 25%;
  height: 1px;
  background: #c6c6c6;
  border: none;
  outline: none;
  margin-bottom: 0.25%;
}

.logo {
  text-align: center;
  width: 20%;
  height: auto;
}

.logo img {
  width: 100%;
  height: auto;
  padding-top: 4%;
}

.flex {
  display: flex;
  max-width: 75%;
  width: 100%;
  height: 100%;
}

.flex div {
  flex: 1;
  padding: 2px;
}

.img1 {
  width: 100%;
  transition: all 0.3s;
  padding-top: 5%;
}

.img1:hover {
  transform: scale(1.03);
}

.line-break {
  width: 100%;
}

@media only screen and (max-width:768px) {
  .logo,
  .logo img {
    display: inline;
    width: 60%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  .flex,
  .flex div,
  .img1,
  img:hover {
    transition: none !important;
    transform: none !important;
    max-width: 100%;
  }
  p {
    font-size: 150%;
    padding-bottom: 10px;
  }
  hr {
    margin-bottom: 5%;
  }
  .line-break {
    width: 0%;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">


  <div class="logo">
    <img src="https://via.placeholder.com/742x180" />
  </div>

  <hr>
  <div class="flex">
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
  </div>
  <div class="line-break"></div>
  <div class="flex">
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
  </div>

Answer 1

So you need to put all of the elements inside of one flex box to really have it effect the whole group. Additionally you need to set break-points for CSS to know how many items are in a row. I generally just use min-width.

Basically set a width on items, used box-sizing to include the padding in the width, used flex-wrap to wrap content, and changed the width on the mobile version to be a two column layout. **Edit I also altered the HTML to put everything in one flex-box container.

Here's the code working for your layout. Granted it loses the HR tag.

CSS

html,
body,
a {
  width: 100%;
  height: 100%;
  margin: 0;
}

p {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 200%;
}

hr {
  width: 25%;
  height: 1px;
  background: #c6c6c6;
  border: none;
  outline: none;
  margin-bottom: 0.25%;
}

.logo {
  text-align: center;
  width: 20%;
  height: auto;
}

.logo img {
  width: 100%;
  height: auto;
  padding-top: 4%;
}

.flex {
  display: flex;
  max-width: 75%;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  flex-basis: auto;
  justify-content: space-evenly;
}

.flex div {
  flex: 1;
  padding: 2px;
  min-width: 33%;
  box-sizing: border-box;
}

.img1 {
  width: 100%;
  transition: all 0.3s;
  padding-top: 5%;
}

.img1:hover {
  transform: scale(1.03);
}

.line-break {
  width: 100%;
}

@media only screen and (max-width:768px) {
  .logo,
  .logo img {
    display: inline;
    width: 60%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  .flex,
  .flex div,
  .img1,
  img:hover {
    transition: none !important;
    transform: none !important;
    max-width: 100%;
  }
  p {
    font-size: 150%;
    padding-bottom: 10px;
  }
  hr {
    margin-bottom: 5%;
  }
  .line-break {
    width: 0%;
  }
  .flex div {
    min-width: 50%;
  }
}

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<center>
  <div class="logo">
    <img src="https://via.placeholder.com/742x180" />
  </div>

  <hr>
  <div class="flex">
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>

    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
  </div>

</center>

Answer 2

This is just a basic example; but you can achieve this behavior using either Flexbox or CSS Grid, depending on how exactly you want the items to arrange themselves.

Flexbox usually is better for one-dimensional layouts, that meaning, when you want items to be aligned in one direction (either columns or rows); while CSS Grid is a lot easier to handle two-dimensional layouts where you need items to be aligned in both directions.

Take a look:

body * {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  justify-content: center;
  grid-gap: 15px;
  grid-auto-rows: minmax(100px, auto);
}

.grid-item {
  border: 1px solid black;
}

.flex {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-item {
  border: 1px solid blue;
  min-height: 100px;
  flex: 1 1 30%;
  margin: 5px;
}

@media (max-width: 590px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .flex-item {
    border: 1px solid blue;
    min-height: 100px;
    flex: 1 1 45%;
    margin: 5px;
  }
}

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<div class="flex">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Answer 3

If the width of a parent div is flexible, but the contents inside of a div don't have to be, you can use display: inline-block in the image class. This will help you get the effect that you want to achieve.

An example implementation would be

<div class="main-container">
    <img class="inline-image" src="img1">
    ...
</div>