css - CSS - 导致溢出的网格

Question

我正在尝试使用 CSS 网格功能制作一个 2 列网站。我也在努力让它对移动设备友好。

我有什么工作，但它导致小型设备溢出：

<style>
#wrapper {
	display: grid;
	grid-template-columns: minmax(275px, 25%) 75%;
}
</style>

<div id="wrapper">
   <div>One</div>
   <div>Two</div>
</div>

我希望第一列（菜单）的最小宽度为 275px，宽度为 25%，第二列可以占据整个页面（我尝试使用 75%）。

不知何故，根据窗口调整自己并不灵活。

我怎样才能使它不会发生溢出？

标签： csscss-grid

Answer 1

使用1fr而不是75%.

fr是一个小数单位，1fr是可用空间的 1 部分。

<style>
#wrapper {
  display: grid;
  grid-template-columns: minmax(275px, 25%) 1fr;
}
</style>

<div id="wrapper">
   <div>One</div>
   <div>Two</div>
</div>