1

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.

mikemaccana
  • 110,530
  • 99
  • 389
  • 494
  • please don't stop at the title of the duplicate, read it to see that the issue is the same. – Temani Afif Apr 29 '21 at 20:43
  • @TemaniAfif sure & done. It's not a duplicate. – mikemaccana Apr 30 '21 at 12:55
  • The original wording of the target was misleading, but it was in fact a duplicate. It has been edited for clarity and should be more clear now. I've also added a second dupe target that explains why inline elements don't take the full height of the container and how to make them do so. – TylerH Apr 30 '21 at 13:55

2 Answers2

3

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>
biberman
  • 5,606
  • 4
  • 11
  • 35
1

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

.one {
  color: white;
  background-color: purple;
  border-right: 1px solid red;
}

span {
  display: flex;
  align-items: center;
  height: 100%;
}
<button>
  <span class="one">one</span>
  <span class="two">two</span>
</button>
Dipanshu Kumar Suman
  • 373
  • 2
  • 13