CSS Grid using auto-fit 如何让一个单元格占据两列？

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

好的，成功了。

对于要增加列数的单元格，您必须为其指定 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

Answer 2

.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;
}

<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 Grid using auto-fit 如何让一个单元格占据两列？

In CSS Grid using auto-fit how to make one cell occupy 2 columns?

css

grid

css-grid