Question

我正在尝试使用CSS进行布局，其中有2列2行的网格。

第一列的宽度应为1fr，第二列的宽度应为4fr。

我尝试使用auto-fit：

HTML

<body>
  <header>
    <div class="item1">GRID ITEM 1</div>
    <div class="item2">GRID ITEM 2</div>
    <div class="item1">GRID ITEM 3</div>
    <div class="item2">GRID ITEM 4</div>
  </header>
</body>

CSS

header {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    div {
      border: 1px solid;
    }

在台式机屏幕模式下，仅使用(1fr, 3fr)和auto-fit才能设置2个不同的列宽auto-fill时遇到麻烦。有没有不使用媒体查询就可以实现这一目标的方法？还是auto-fit和auto-fill仅在列的宽度相同时使用？

Answer 1

所以，如果我理解正确。您的布局应具有5列（1 x 1fr，1 x 4fr）和2行。这是 MIGHT 可以回答您问题的内容。

.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 1fr);
height: 300px;
}

.item1 { grid-area: 1 / 1 / 2 / 2; background: red;}
.item2 { grid-area: 1 / 2 / 2 / 6; background: green; }
.item3 { grid-area: 2 / 1 / 3 / 2; background: yellow; }
.item4 { grid-area: 2 / 2 / 3 / 6; background: blue; }

<div class="parent">
<div class="item1"> </div>
<div class="item2"> </div>
<div class="item3"> </div>
<div class="item4"> </div>
</div>

使用自动调整和自动填充功能无法调整CSS网格中的列大小

1 个答案: