1

I have a grid with a text area, text input and buttons. I want to center the content of each row and also have the rows the same height, so I can set a background color. HTML:

<div class="grid">
  <div>
    <textarea></textarea>
  </div>     
  <div>
     Time1:<input>
  </div>
  <div>Time2<input placeholder="hh:mm" type="time">
  </div>
  <div>
    <button>Change</button>
    <button>Change2</button>
  </div>
</div>

CSS:

.grid {
    display: grid;
    width: 90%;
    grid-template-columns: 0.6fr 0.6fr 0.6fr 0.2fr;
    grid-auto-rows: 1fr;
    align-items: center;
} 
.grid > div {
  background-color: blue;
}  
.grid .button {
    margin: 0.2rem 0rem;
}

CodePen: https://codepen.io/anon/pen/wYbLay

I would like to have the blue background on the same height as the highest column in the row (I could set the background color of the grid, but the final grid has multiple rows, and I would like to set a grid-row-gap).

D. K.
  • 151
  • 2
  • 13
  • The answer is to center the content of the grid items, not the grid items themselves. https://codepen.io/anon/pen/GYaVZw – Michael Benjamin Oct 30 '18 at 19:39
  • 1
    Thanks a lot, yes, your are right, but I somehow could not figure out how, and also thanks for the link, I never found this one before for some reason... – D. K. Oct 30 '18 at 19:56

0 Answers0