Question

您可以查看here上的代码。我希望第一个单元格占据2列，其余单元格占据1列。有没有办法在CSS网格中使用自动适合列时做到这一点？

<h2>Auto-fit</h2>
<div class="wrapper fit">
    <div class="col-2">1</div>
    <div class="">2</div>
    <div class="">3</div>
    <div class="">4</div>
    <div class="">5</div>
    <div class="">6</div>
</div>

CSS

.wrapper {
  display: grid;
}

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

Answer 1

＆＃13;

.wrapper {
  display: grid;
}
.fit div{border:1px solid black;}

.fit {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.col-2{
grid-column:1/3;
}

＆＃13;

<h2>Auto-fit</h2>
<div class="wrapper fit">
    <div class="col-2">1</div>
    <div class="">2</div>
    <div class="">3</div>
    <div class="">4</div>
    <div class="">5</div>
    <div class="">6</div>
</div>

＆＃13;

Answer 2

好的，它成功了。

对于要增加列数的单元格，您必须为其指定grid-column。

所以在上面的第一个单元格的例子中指定了

.col-2 {
  grid-column: 1  /3;
}

要使网格换行每行只有1列，请添加媒体查询。

.col-2{
    grid-column: 1/3;
    @media only screen and (max-width: 33em) {
        grid-column: 1/2;
   }
}

Jsbin

在CSS网格中使用自动调整如何使一个单元格占据2列？

2 个答案: