0

我正在尝试创建一个最多两列的基本响应网格。第一列不应超过300px，第二列应占用行中的其余空间。这必须以某种方式，如果两列都不适合同一行，则正确的列将溢出到下一行。

这是我到目前为止的代码，问题是通过使用minmax(300px, 1fr)两列适合自己的大小相同。

欣赏这可以通过 flex 和媒体查询简单地完成，但为了学习，很想知道如何在网格中完成它。

.gridContainer {
  display: grid;
  grid-column-gap: 98px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.left {
  background-color: red;
}

.right {
  background-color: green;
}

.left,
.right {
  min-height: 200px;
}
<html>
<body bgcolor="FFFFFF">
  <div class="gridContainer">
    <div class="left">Content Left</div>
    <div class="right">Content Right</div>
  </div>
</body>
</html>

4

0 回答 0