CODEWITHSUNDEEP
cssflexbox
Ralph
Ralph

Reputation: 32284

Stretching elements in a CSS flexbox grid

In the answer https://stackoverflow.com/a/31672763/96233, the images stretch to fill the "cells" in a flexbox grid.

When I try it with buttons, they do not.

grid-row {
  display: flex;
  width: 100%;
}

.narrow {
  flex-grow: 1;
}

.wide {
  flex-grow: 2;
}

.grid {
  width: 300px;
  height: 300px;
}

.grid button {
  width: 100%;
  height: auto;
  vertical-align: middle;
  flex-shrink: 1;
  padding: 1px;
}
<div class="grid">
  <div class="grid-row">
    <button class="wide">1</button>
    <button class="narrow">2</button>
    <button class="narrow">3</button>
  </div>
  <div class="grid-row">
    <button class="narrow">4</button>
    <button class="wide">5</button>
    <button class="narrow">6</button>
  </div>
  <div class="grid-row">
    <button class="narrow">7</button>
    <button class="narrow">8</button>
    <button class="wide">9</button>
  </div>
</div>

What am I doing wrong?

Upvotes: 2

Views: 2936

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122027

You have few mistakes in you code, so it should look like this.

.grid {
  width: 300px;
  height: 300px;
}
.grid-row {
  display: flex;
}
.narrow {
  flex: 1;
}
.wide {
  flex: 2;
}
<div class="grid">
  <div class="grid-row">
    <button class="wide">1</button>
    <button class="narrow">2</button>
    <button class="narrow">3</button>
  </div>
  <div class="grid-row">
    <button class="narrow">4</button>
    <button class="wide">5</button>
    <button class="narrow">6</button>
  </div>
  <div class="grid-row">
    <button class="narrow">7</button>
    <button class="narrow">8</button>
    <button class="wide">9</button>
  </div>
</div>

Upvotes: 5

Related Questions