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

问题描述

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

代码是：

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

我想像照片一样首先出现 2 对 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/