css 网格模板列元素或制作 2 / 1答案

【问题标题】：css grid template column elementor make 2 / 1css 网格模板列元素或制作 2 / 1
【发布时间】：2021-05-20 12:54:09
【问题描述】：

我想按照我的照片进行订购。我用 elementor 制作了博客页面，需要用 css 网格模板列进行更改。

代码是：

   .elementor-grid-2 .elementor-grid {
    grid-template-columns: repeat(1,1fr);
}

我想像照片一样首先出现 2 对 1 :) 任何帮助将不胜感激！

【问题讨论】：

首先要注意，您需要两列，而不是一列
@Paulie_D 我需要它们像照片一样动态更改：1 -> 2 -> 1 -> 2
所以？您只需将它们设置为跨越两列 - stackoverflow.com/questions/36470038/…

标签： css wordpress elementor dynamic-columns

【解决方案1】：

我想这段代码会对你有所帮助。

 .parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    
.div1 { grid-area: 1 / 1 / 2 / 7; }
.div2 { grid-area: 2 / 1 / 3 / 2; }
.div3 { grid-area: 2 / 2 / 3 / 3; }
.div4 { grid-area: 3 / 1 / 4 / 3; }

有一些 CSS 网格生成器可以帮助您构建结构，例如： https://grid.layoutit.com/

【讨论】：

谢谢，它很有用，但我正在尝试理解 elementor 架构并使用它