Rods_Programmer
Rods_Programmer

Reputation: 31

Trying to organize this images in a grid

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 always 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 class="home-6">

  <div class="row">

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

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

  </div>

  <div class="row">

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

  </div>

</div>

How it looks now: enter image description here

How I want it to be: enter image description here

Thanks for your help ;)

Upvotes: 1

Views: 256

Answers (0)

Related Questions