网格列的响应最大宽度

时间:2019-12-30 23:35:26

标签: html css css-grid

在下面的演示中,当网格扩展时,如何将第一网格列的宽度限制为#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>

0 个答案:

没有答案