CSS Grid在一个块中的不同布局答案

【问题标题】：CSS Grid different layout in one blockCSS Grid在一个块中的不同布局
【发布时间】：2021-11-18 01:00:44
【问题描述】：

最近怎么样？我只是想知道是否可以在一个 CSS 网格中放置 3 种不同的布局。因为我找不到正确的解决方案。我需要这个结构： 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;
        }

【问题讨论】：

@Paulie_D 是的，我有一个 30 列的网格结构。所以它看起来像这样： 1.1 元素：1-20 1.2 元素：20-30 （这一行完全有效） 2.1 元素：1-10 2.2 元素：10-20 2.3 元素：20-30 （也有效）但在那之后，好像最后一排有点麻烦。 3.1 el :1-6 3.2 el :6-12 3.3 el :12-18 3.4 el :18-24 3.5 el :24-30 我的截图看起来有点奇怪。
你的百分比不起作用。显然，您的第一张图片中的前两个不是 2/3 - 1/3。看起来更像是 60% / 40%。

标签： css layout css-grid

【解决方案1】：

我需要这个结构：66% - 33% , 33% 33% 33%, 20% 20% 20% 20% 20%

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

您的第一张图片（需要来自您的 cmets）的第一行似乎更像 60% / 40%。

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

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

【讨论】：