Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
4 replies
Tok124 (CSS Nerd)

grid span unknown column count

Hi i am not even sure if this is possible. But i was wondering if its possible to use like grid-column:span 3; but you dont actually know the column count.

So for example. Let's say i have this html code
<div class="parent">
  <div class="span-all">Span All Columns</div>
  <div class="child"> </div>
  <div class="child"> </div>
  <div class="child"> </div>
  <div class="child"> </div>
  <div class="child"> </div>
  <div class="child"> </div>
</div>

And this css code
.parent {
  max-width:1000px;
  display: grid;
  grid-template-columns:repeat(3, 1fr);
  margin-inline:auto;
  margin-block-start:100px;
  gap:20px;
}

.child {
  aspect-ratio:1;
  background: #000;
}

.span-all {
  grid-column:span 3;
  background: #000;
  color:#FFF;
  padding:10px;
  font-family:arial black;
}

then the .span-all class will span all 3 columns. But what about if i change the grid-template-columns to grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); then the amount of columns will change based on screen width. So my question is how can i get the .span-all to span all columns when i don't know the column count? Is it even possible?

And yeah, i know a work around for it. I was just wondering if this is possible because i would not need as much code if it is possible ^^
Was this page helpful?