How to make like anchor, button auto padding fill entire parent available space? I think this problem already exist long time ago.
body { margin: initial }
.grid {
display: grid;
grid-template-columns: auto auto auto;
column-gap: 10px;
}
.grid > div {
text-align: center;
background-color: bisque;
}
.grid > div > a {
box-sizing: border-box;
background-color: red;
padding: 0 10px 0 10px;
}<div class="grid">
<div><a href="">1</a></div>
<div><a href="">2</a></div>
<div><a href="">3</a></div>
</div>>Solution :
Just add flex-grow: 1 to the anchor to fill out the entire parents space. However this requires that the parent is declared as flexbox: display: flex
.grid > div {
display: flex;
}
.grid > div > a {
flex-grow: 1;
}
/* original CSS */
body { margin: initial }
.grid {
display: grid;
grid-template-columns: auto auto auto;
column-gap: 10px;
}
.grid > div {
text-align: center;
background-color: bisque;
}
.grid > div > a {
box-sizing: border-box;
background-color: red;
padding: 0 10px 0 10px;
}<div class="grid">
<div><a href="">1</a></div>
<div><a href="">2</a></div>
<div><a href="">3</a></div>
</div>