0

My first question is how do I make my first div in my grid span as many rows as the grid grows, at the moment it spans 3 rows but I don't know how to make it span as many as it grows and my other question is in the first cell div how do I make it a square so it's an even circle like the rest of the other divs.

.imager__colors {
  display: grid;
  grid-template-columns: repeat(var(--count), 1fr);
  grid-gap: 1rem;
  width: 500px;
}

.imager__colors > div {
  position: relative;
  border: 1px solid black;
}

.imager__colors > div:first-of-type {
  grid-row: span 3/ 1;
}

.imager__colors > div:before {
  content: '';
  display: block;
  padding-bottom: 100%;
  height: 0
}

.imager__button {
  background: black;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="imager__colors" style="--count:7">
  <div>
    <div class="imager__button">
    
    </div>
  </div>
  <div>
    <div class="imager__button">
    
    </div>
  </div>
  <div>
    <div class="imager__button">
    
    </div>
  </div>
  <div>
    <div class="imager__button">
    
    </div>
  </div>
  <div>
    <div class="imager__button">
    
    </div>
  </div>
  <div>
    <div class="imager__button">
    
    </div>
  </div>
  <div>
    <div class="imager__button">
    
    </div>
  </div>
  <div>
    <div class="imager__button">
    
    </div>
  </div>
  <div>
    <div class="imager__button">
    
    </div>
  </div>
  <div>
    <div class="imager__button">
    
    </div>
  </div>
  <div>
    <div class="imager__button">
    
    </div>
  </div>
  <div>
    <div class="imager__button">
    
    </div>
  </div>
  <div>
    <div class="imager__button">
    
    </div>
  </div>
  <div>
    <div class="imager__button">
    
    </div>
  </div>
  <div>
    <div class="imager__button">
    
    </div>
  </div>
  <div>
    <div class="imager__button">
    
    </div>
  </div>
  <div>
    <div class="imager__button">
    
    </div>
  </div>

</div>
ONYX
  • 5,679
  • 15
  • 83
  • 146
  • `grid-row: 1 / -1;` -> starting at the first row line - ending at the last row line: https://css-tricks.com/snippets/css/complete-guide-grid/ – tacoshy Mar 26 '21 at 15:32
  • @tacoshy it won't work since we are dealing with implicit rows – Temani Afif Mar 26 '21 at 15:33
  • in that case something like `grid-row: 1 / 10000;` could work aslong as you dont have a min-row-height nor more then 10k rows. – tacoshy Mar 26 '21 at 15:36
  • None of your solutions work – ONYX Mar 26 '21 at 15:43
  • what you want is almost impossible because you have a cycle (1) you will place the small circles to have a number of rows (2) you will place the big circle to take all the rows and you want it to remain circle so it will get bigger on width making less space for the small circles (3) the small circles will need more rows (4) the big circle will take more rows and become even bigger (5) and so on ... – Temani Afif Mar 26 '21 at 19:34

0 Answers0