How to get in a row your items have different heights

0

Can this result be achieved using the Layout Grid?

I want your items in a row to have different heights.

.contenedor {
  height: 100vh;
  width: 100vw;
  background-color: rgb(192,192,192);
  margin: 10px;
  border: 1px solid black;
}

.item {
  width: 20%;
  min-height: 75px;
  margin: 5px;
  float: left;
    
  background-color:rgb(255, 140, 0);   
  color: white;
  font-weigh: 900;
  
  display:flex;
  align-items: center;
  justify-content: center;  
}

.item:nth-child(1) {
  height: 100px;
}

.item:nth-child(2) {
  height: 150px;
}

.item:nth-child(3) {
  height: 160px;
}

.item:nth-child(4) {
  height: 175px;
}
<div class="contenedor">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
</div>
    
asked by Isaac Palacio 29.03.2018 в 17:25
source

1 answer

0

only with grid I think you can not, you have to use js for that

I leave you a complete guide where they talk about the subject

enter the description of the link here

you can see examples code

greetings

    
answered by 16.10.2018 / 16:56
source