CSS 网格不同布局在一个块

Question

最近怎么样？我只是想知道是否可以将 3 种不同的布局放在一个 css 网格中。因为我找不到合适的解决方案。我需要这个结构： 66% - 33% , 33% 33% 33%, 20% 20% 20% 20% 20% Image of a structure

Here's how it looks on a website

这是ea的结构

&:nth-child(1){
            grid-column-start:1;
            grid-column-end:20;
            grid-row-start:1;
            grid-row-end:3;
        }
        &:nth-child(2){
            grid-column-start:20;
            grid-column-end:30;
            grid-row-start:1;
            grid-row-end:3;
        }
        &:nth-child(3){
            grid-column-start:1;
            grid-column-end:10;
            grid-row-start:3;
            grid-row-end:4;
        }
        &:nth-child(4){
            grid-column-start:10;
            grid-column-end:20;
            grid-row-start:3;
            grid-row-end:4;
        }
        &:nth-child(5){
            grid-column-start:20;
            grid-column-end:30;
            grid-row-start:3;
            grid-row-end:4;
        }


        &:nth-child(6){
            grid-column-start:1;
            grid-column-end:6;
            grid-row-start:4;
            grid-row-end:5;
        }
        &:nth-child(7){
            grid-column-start:6;
            grid-column-end:12;
            grid-row-start:4;
            grid-row-end:5;
        }
        &:nth-child(8){
            grid-column-start:12;
            grid-column-end:18;
            grid-row-start:4;
            grid-row-end:5;
        }
        &:nth-child(9){
            grid-column-start:18;
            grid-column-end:24;
            grid-row-start:4;
            grid-row-end:5;
        }
        &:nth-child(10){
            grid-column-start:24;
            grid-column-end:30;
            grid-row-start:4;
            grid-row-end:5;
        }

Answer 1

I need this structure: 66% - 33% , 33% 33% 33%, 20% 20% 20% 20% 20%

这就是你在第二张图片中的内容

您的第一张图片（来自您的评论的图片是必需的）似乎第一行的比例大约为 60% / 40%。

所以...没有必要指定 row/column 开始和结束，只需指定每个元素跨越的数量..

.grid {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  grid-auto-rows: 50px;
  grid-auto-flow: row;
  gap: .5em;
}

.item {
  display: grid;
  place-items: center;
  outline: 1px solid red;
}

.item.w-18 {
  grid-column: span 18;
}

.item.w-12 {
  grid-column: span 12;
}

.item.w-10 {
  grid-column: span 10;
}

.item.w-6 {
  grid-column: span 6;
}

<div class="grid">
  <div class="item w-18">1</div>
  <div class="item w-12">2</div>
  <div class="item w-10">3</div>
  <div class="item w-10">4</div>
  <div class="item w-10">5</div>
  <div class="item w-6">6</div>
  <div class="item w-6">7</div>
  <div class="item w-6">8</div>
  <div class="item w-6">9</div>
  <div class="item w-6">10</div>
</div>

CSS 网格不同布局在一个块

CSS Grid different layout in one block

css

layout

css-grid