Kevin Powell - Community•2y ago

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>

<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;
}

.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 ^^

3 Replies

CodeNascher•2y ago

.span-all {
    grid-column: 1 / -1;
}

.span-all {
    grid-column: 1 / -1;
}

that's exactly the use case for the negative line numbers check your dev tools for a visualisation

CodeNascher•2y ago

Tok124 (CSS Nerd)OP•2y ago

Omg o.O Thanks a lot! thats cool 😄

Gaming

Programming

grid span unknown column count