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

Html – How to make 2 rows with display flex?

I am trying to reproduce this image and unfortunately, after hours of trying with display flex, i do not succeed. They either get stuck in column and do not move or they stay in row without divide in 2. I want 5 images on top and 4 bellow. All of the images needs to be in the same container

Image reference.

Here the result of what i tried…. even with flex wrap, it seems to not move a lot.

Result of what i tried

.container2 {
  display: flex;
  flex-wrap: wrap;
}
<main>
  <section>
    <div>
      <h2>PHOTOS TROP MIGNONNES DE CHATS</h2>
    </div>
    <div class="container2">
      <img class="chatprincipal chathaut" src="https://placekitten.com/200/300">
      <img class="chatprincipal chathaut" src="https://placekitten.com/240/300">
      <img class="chatprincipal chathaut" src="https://placekitten.com/100/200">
      <img class="chatprincipal chathaut" src="https://placekitten.com/200/200">
      <img class="chatprincipal chathaut" src="https://placekitten.com/110/330">
      <img class="chatprincipal chathaut" src="https://placekitten.com/120/250">
      <img class="chatprincipal chathaut" src="https://placekitten.com/220/300">
      <img class="chatprincipal chathaut" src="https://placekitten.com/130/300">
      <img class="chatprincipal chathaut" src="https://placekitten.com/140/300">
    </div>
  </section>
</main>
Tags:

2

Answers


  1. 0

    Flex is the right approach. The key is to style your images with a width of 18%; so five images will take up 90% of the available width, and the remaining images will wrap to the next line. Add the style justify-content: space-around to space the images evenly along the lines.

    body {
  background: #333;
  margin: 1em;
}

.d1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  row-gap: 1em;
  border: 1px solid #888;
}

.d1 img {
  width: 18%;
}
    <div class="d1">
  <img src="http://picsum.photos/id/101/200">
  <img src="http://picsum.photos/id/102/200">
  <img src="http://picsum.photos/id/103/200">
  <img src="http://picsum.photos/id/104/200">
  <img src="http://picsum.photos/id/106/200">
  <img src="http://picsum.photos/id/108/200">
  <img src="http://picsum.photos/id/109/200">
  <img src="http://picsum.photos/id/110/200">
  <img src="http://picsum.photos/id/111/200">
</div>

    After running this snippet, use the full page link to properly test the responsive behaviour.

    Login or Signup to reply.
  2. 0

    Could you try this code? And what’s the max width of the body or the flex-container?

    .container2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  row-gap: 2rem;
  column-gap: 4rem;
  padding-inline: 6rem;
}

.container2>img {
  display: block;
  max-inline-size: 100%;
  aspect-ratio: 180 / 180;
  object-fit: cover;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search