CSS网格每行不同的列集

Question

我正在尝试创建一个看起来像这样的网格，

第一行两列，第二行三列。它们的宽度应该相等，但是我的绘画技能并不是最好的。

我正在通过针对特定的单元格针对“ Kort”单元格上的东西来实现这一目标，

  grid-row: 1; 
  grid-column: 2/4;

但是我似乎无法做到这一点。任何帮助是极大的赞赏。

Answer 1

.rows {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; display: grid;
}
.rows div { border: 1px solid #000;}
.rows .col1 {  grid-column-start: 1;
    grid-column-end: 4; }
.rows .col2 {     grid-column-start: 4;
    grid-column-end: 7; }
.rows .col3 {     grid-column-start: 1;
    grid-column-end: 3; }
.rows .col4 {     grid-column-start: 3;
    grid-column-end: 5; }
.rows .col5 {     grid-column-start: 5;
    grid-column-end: 7; }

<div class="rows">
  <div class="col1">1</div>
  <div class="col2">2</div>
  <div class="col3">3</div>
  <div class="col4">4</div>
  <div class="col5">5</div>
</div>

Answer 2

from django.forms import ModelForm, RadioSelect


class UserForm(ModelForm):
    class Meta:
        model = User
        fields = '__all__'
        widgets = {
            'q1': RadioSelect(),
        }

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow:row;
  gap: 1rem;
  
}
.col {
  grid-column: span 2;
  background: red;
  width: 100%;
}
.col:nth-child(5n+4) {
  grid-column: span 3;
  background: blue;
  width: 100%;
}
.col:nth-child(5n+5) {
  grid-column: span 3;
  background: blue;
  width: 100%;
}

https://codepen.io/dobril/pen/gOrLoQJ