Search code examples
csscss-grid

How can I make a CSS grid fill the height of the parent element?

I wish to make a button, using CSS grid, with the elements filling the full height of the container:

button {
  display: grid;
  height: 50px;
  grid-auto-flow: column;
  align-items: center;
}

.one {
  color: white;
  background-color: purple;
  border-right: 1px solid red;
}
<button>
  <span class="one">one</span>
  <span class="two">two</span>
</button>

As one can see from the inspector, this is a single row, that doesn't fill the height of the container:

enter image description here

I'd like the grid to fill the container, so the whole left of the container is purple.

Solution

  • You can do it with height: 100%; on any of the items inside the grid

    Working example:

    button {
  display: grid;
  height: 50px;
  grid-auto-flow: column;
  align-items: center;
}

.one {
  color: white;
  background-color: purple;
  border-right: 1px solid red;
  height: 100%;
}
    <button>
  <span class="one">one</span>
  <span class="two">two</span>
</button>

    If you want the text centered verticaly you can use display: grid or display: inline-grid and align-items: center.

    Working example:

    button {
  display: grid;
  height: 50px;
  grid-auto-flow: column;
  align-items: center;
}

.one {
  color: white;
  background-color: purple;
  border-right: 1px solid red;
  height: 100%;
  align-items: center;
  display: grid;
}
    <button>
  <span class="one">one</span>
  <span class="two">two</span>
</button>