在下面的演示中,当网格扩展时,如何将第一网格列的宽度限制为#left max-width
的值?
换句话说,是否可以设置#left max-width
并让第一列遵守该值而无需在grid-template-columns
中明确说明该值?
#grid {
grid-template-columns: minmax(min-content, 30%) minmax(min-content, max-content) 1fr;
gap: 3px;
}
#left {
min-width: 100px;
max-width: 150px;
}
#mid {
min-width: 25px;
}
/* non-important css */
body {
background: black
}
#grid {
display: grid;
background: white;
}
#left {
background: orange;
}
#mid {
background: purple;
}
#right {
background: green;
}
#left, #mid, #right {
height: 200px;
border: solid red 3px;
box-sizing: border-box;
}
/* non-important css */
<div id='grid'>
<div id='left'></div>
<div id='mid'></div>
<div id='right'></div>
</div>