В CSS Grid с использованием автоподбора, как заставить одну ячейку занимать 2 столбца?

Question

Вы можете проверить код более здесь . Я хочу, чтобы первая ячейка занимала 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

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

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