Trying to organize this images in a grid-CodePudding

So, i'm making a website, using only html css and javascript, and i need to make a image grid like this, i tried using flexbox, but it is aways buggy as hell...

.row {
  display: flex;
  padding: 100px;
  color: #A3A3A3;
}

.column {
  flex: 50%;
  align-items: center;
}

.home-6 {
  height: 100vh;
  width: 100%;
  background-color: #DBDBDB;
}

.home-6 .row {
  object-fit: cover;
}

<div >

  <div >

    <div >
      <img src="assets/imgs/projetopessoal/Saba/saba/imghome/imghome.png">
    </div>

    <div >
      <img src="assets/imgs/projetopessoal/Aurora/aurora/imghome/imghome.png">
    </div>

  </div>

  <div >

    <div >
      <img src="assets/imgs/projetopessoal/Tempodachuva/tempodachuva/imghome/imghome.png">
    </div>
    <div >
      <img src="assets/imgs/projetopessoal/Zinebrabas/zinebrabas/imghome/SCARRARD-Portfolio_imagem home_Zine.jpg">
    </div>
    <div >
      <img src="assets/imgs/projetopessoal/Bunker/bunker/home/imghome.png">
    </div>

  </div>

</div>

How it is: https://snipboard.io/WrAFhn.jpg

How i want it to be: https://snipboard.io/m8vT4U.jpg

thanks for your help ;)

CodePudding user response：

I think you are using way too many divs, why are your images all wrapped in divs? It doesn't really affect anything but it makes the code hard to look at. When I first started coding I wrapped everything in divs, but you will soon realize there is no need for this.

CodePudding user response：

You have to use grid in this case is the best solution