我正在使用CSS网格创建像这样的简单3列布局...
.container {
display:grid;
grid-template-columns:1fr 1fr 1fr;
}
.col1 {
background:red;
text-align:center;
}
.col2 {
background:yellow;
text-align:center;
}
.col3 {
text-align:center;
background:green;
}<div class="container">
<div class="col1">
Column 1
</div>
<div class="col2">
<img src="https://via.placeholder.com/150">
</div>
<div class="col3">
Column 3
</div>
</div>我试图改变的事情，这样的中心DIV只有一样宽，它包含，然后将图像col1和col2拉伸，以填补剩余的空间。
有人可以给我看看的例子吗？
grid-template-columns:1fr auto 1fr;
在这里，将auto代替1fr用作居中的div。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句