时间戳

首页 > 解决方案 > 固定大小和分数之间的css网格minmax

css - 固定大小和分数之间的css网格minmax

问题描述

我想将一个 div 分成左右两部分。左侧的尺寸最小为 100 像素，最大为整个宽度的 10%。右侧填满了其余空间。我的代码如下：

.container {
  display: grid;
  grid-template-columns: minmax(100px 1fr) 9fr;
}

.left {
  grid-column: 1/2;
}

.right {
  grid-column: 2/3;
}
<html>

<head></head>

<body>
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

</html>

但是，我观察到左右 div 的宽度都是 50%。为什么？

标签： csscss-grid

解决方案

试试这个

.container {
  display: grid;
  grid-template-columns: minmax(100px ,1fr) 9fr;
}

.left {
  grid-column: 1/2;
}

.right {
  grid-column: 2/3;
}
<html>

<head></head>

<body>
  <div class="container">
    <div class="left">Hi</div>
    <div class="right">Hello</div>
  </div>
</body>

</html>

推荐阅读