I can't seem to figure out why my grid column headers are not aligning properly with the data in the grid. It's puzzling that they have the same CSS class but different sizes. Can someone please help me with this:
.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>Here is the link to the fiddle: https://jsfiddle.net/btyrx4wo/5/