[Vuejs]-How to account for dynamic rows in a CSS Grid setup?

by

1👍

✅

One idea is to explicitely define the row for the footer to always use the last one:

#app {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto auto 1fr;
}

#footer {
  align-self: end;
  grid-row:-1;
}

div {
  border-style: dashed;
  border-width: 1px;
}
<div id="app">
  <div>this line is always visible</div>
  <div>this one is toggled - here it is visible</div>
  <div id="footer">this is the footer</div>
</div>

<div id="app">
  <div>this line is always visible</div>
  <!--<div>this one is toggled - here it is visible</div>-->
  <div id="footer">this is the footer</div>
</div>
👤Temani Afif

0👍

The CSS grid system isn’t the best for dynamic rows/columns. It’s at its best when you know what the layout will be ahead of time.

However, there some things you can do.

Option 1

You can define grid-template-rows: auto auto 1fr; using inline styles (within the parent element, and control using javascript.

So, in this case:

<div id="app" style="grid-template-rows: auto auto 1fr;">

And as the number of rows change, you alter the value of the style.

<div id="app" style="grid-template-rows: auto 1fr;">

Option 2

Define several classes ahead of time and switch to the appropriate class based on the number of rows:

.rows-2
  grid-template-rows: auto 1fr;
}

.rows-3
  grid-template-rows: auto auto 1fr;
}

<div id="app" class="rows-2/3">

Both these solutions will require some javascript to adjust to the required grid layout.

👤T. Short

Leave a comment