CODEWITHSUNDEEP
cssreactjscss-grid
cbutler
cbutler

Reputation: 943

3 rows css grid that flexes

Not sure the best way to describe this but I have a react app with a single column that contains three collapse panels, one on top of each other. I want a grid that, when one accordion is closed, the others will 'flex' to fill the remaining space. my current css is not working:

style={{ display: 'grid', gridTemplateColumns: '100%', gridTemplateRows: 'auto auto auto' }}

I was thinking to use minmax with:

style={{ display: 'grid', gridTemplateColumns: '100%', gridTemplateRows: 'minmax(30px 1fr)' }}

but the accordion just stays the same height. Maybe I need to share more code but I am using ant design with styled components so it's a bit complicated to show exactly what I have. Hoping there is a simple css grid solution I can adapt.

Upvotes: 0

Views: 64

Answers (1)

coreyward
coreyward

Reputation: 80128

Use Flexbox instead:

document.addEventListener("click", e => {
  e.target.classList.toggle("closed")
})
.container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 200px;
  height: 300px;
}

.item {
  flex: 1 1 33%;
  background: tomato;
  border-bottom: 1px solid white;

  /* These styles just for the sake of making the demo look nicer */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: system-ui, sans-serif;
}

.item.closed {
  flex: 0 0 30px;
}
<div class="container">
  <div class="item">Test</div>
  <div class="item">Test</div>
  <div class="item">Test</div>
</div>

Upvotes: 2

Related Questions