I recently created a basic CSS grid layout with the following structure...
.container {
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr;
}
.col1 {
padding:20px;
background:red;
color:white;
text-align:center;
}
.col2 {
padding:20px;
background:green;
color:white;
text-align:center;
}
.col3 {
padding:20px;
background:blue;
color:white;
text-align:center;
}
.col4 {
padding:20px;
background:gray;
color:white;
text-align:center;
}<div class="container">
<div class="col1">
Column 1
</div>
<div class="col2">
Column 2
</div>
<div class="col3">
Column 3
</div>
<div class="col4">
Column 4
</div>
</div>My goal is to adjust the width of columns when they are hovered over, expanding the hovered column to take up 2fr.
While I'm familiar with setting item width using flexbox directly on the item itself, in this case, since I've used grid, the item widths are set on the container.
Any suggestions on how to achieve this and set the widths on the items?