Html CSS表格或网格

我想用三张卡片创建网格或表格。两张牌排成一行，第三张牌在这两张牌下面，如图所示（第三张牌可以是其他尺寸）。但是我该怎么做呢

...

...

...

查看它

。第一行{
显示器：flex；
}
.第一排.卡片{
弹性：1；
}
.卡片{
边框：5px纯黑；
利润率：10px；
}

...

...

...

答案是CSS Flex Box；）

部分{
最大宽度：740px；
保证金：0自动；
显示器：flex；
}
.栏目{
利润率：10px；
柔性生长：1；
弹性收缩：1；
弹性基准：0；
}
节：第n个类型（5）。列：第一个类型{
柔性生长：2；
弹性收缩：2；
弹性基础：22px；
}
节：第n个类型（6）。列：第n个类型（2）{
弹性生长：4；
弹性收缩：4；
弹性基准：66px；
}
/*其他风格*/
html，正文{
颜色：白色；
身高：100%；
框大小：边框框；
}
身体{
字体系列：“Raleway”，无衬线；
填充：10px；
背景：线性梯度（135度，#b04，#f80）固定；
}
.栏目{
填充：10px0；
背景色：rgba（255,0,0,0.25）；
文本对齐：居中；
边框：1px固体透明（白色，0.25）；
背景色：透明（白色，0.8）；
颜色：透明（白色，0.1）；
}

三分之一
三分之一
三分之一
一半
一半
四分之一
四分之一
四分之一
四分之一
六分之一
六分之一
六分之一
六分之一
六分之一
六分之一
一半
四分之一
四分之一
六分之一
三分之二
六分之一

这应该行得通

。第一行{
显示器：flex；
}
.第一排.卡片{
弹性：1；
}
.卡片{
边框：5px纯黑；
利润率：10px；
}

...

...

...

.cards{
显示：网格；
/*用剩余的空间制作两个轨迹*/
网格模板柱：1fr 1fr；
栅隙：10px；
}
#卡片1，
#卡片2{
背景：#a03；
}
#卡片3{
背景：#be3；
/*让card3跨越两条轨道*/
格构柱：跨度2；
}
/*这将使图像跨度达到100%*/
img{
最大宽度：100%；
高度：自动；
}

...

...

...

您的问题是什么？创建网格，如图中所示。网格应用于二维布局。

<div class="cards">

    <div id="card1">
        <img src="..." alt="Image" style="width: 100%">

        <div class="card-container">
        <h4 class="class-text"><b>...</b></h4>
        <p></p>
        </div>
    </div>

    <div id="card2">
        <img src="..." alt="Image" style="width: 100%">

        <div class="card-container">
        <h4 class="class-text"><b>...</b></h4>
        <p></p>
        </div>
    </div>

    <div id="card3">
        <img src="..." alt="Image" style="width: 100%">

        <div class="card-container">
        <h4 class="class-text"><b>...</b></h4>
        <p></p>
        </div>
    </div>

</div>