Column alignment in HTML Grid

Question

I am attempting to align the column headers on my grid with the data in my grid. I don't quite understand why the grid column sizes differ even though they use the same css class: Can someone please give me a hand:

.outer {
  width: 60%;
  height: 300px;
}

.panel {
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
}

.gridpanel {
  display: grid;
  width: 100%;
  grid-gap: 0.5em 0.6em;
  padding: 2px 5px;
  box-sizing: border-box;
  grid-template-columns: 1fr 2fr 0.5fr;
}

.header {
  background-color: dodgerblue;
  border-bottom: 1px solid blue;
}

<div class=outer>
  <div class=panel>
    <div class="gridpanel header">
      <div> Telephone Type</div>
      <div> Telephone Number</div>
      <div> Action</div>
    </div>
    <div class="gridpanel">
      <input type="text" autofocus />
      <input type="text" autofocus />
      <button>Delete</button>
    </div>
  </div>
</div>

The fiddle is here: https://jsfiddle.net/btyrx4wo/5/

You need to set input and button 100% width : `input, button { width: 100%; }` — Théo Benoit, Jun 26 '20 at 16:01
Please post as an answer so I can give you credit. Thanks for your help! — Elcid_91, Jun 26 '20 at 16:02

score 0 · Answer 1 · answered Jun 26 '20 at 16:06

Width to elements, if not you can use table layout

.outer{
  width: 100%;
  height: 300px;  
}
.panel{
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%; 
}
.gridpanel{
  display: grid;
  width: 100%;
  grid-gap: 0.5em 0.6em;
  padding: 2px 5px;
  box-sizing: border-box;  
  grid-template-columns: 1fr 2fr 0.5fr;
}
.header{
  background-color: dodgerblue;
  border-bottom: 1px solid blue;
}

<div class=outer>
  <div class=panel>
     <div class="gridpanel header">
       <div style="width:200px;"> Telephone Type</div>
        <div style="width:200px;"> Telephone Number</div>
        <div style="width:100px;"> Action</div>       
     </div>
     <div class="gridpanel">
        <input type="text" autofocus />
        <input type="text" autofocus />
        <button>Delete</button>
     </div>
  </div>
</div>

Column alignment in HTML Grid

1 Answers1