grid布局实现图像A|B+C布局实例页面

CSS代码：

zxx-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template: 1fr 1fr / 1fr 1fr 1fr;
    grid-template-areas: "a b d" "a c e";
    grid-gap: 6px;
}
zxx-item:first-child {
    grid-area: a;    
}
zxx-item img {
    width: 100%; height: 100%;
}

HTML代码：

<zxx-grid>
    <zxx-item><img src="./xugou-1.jpg"></zxx-item>
    <zxx-item><img src="./xugou-2.jpg"></zxx-item>
    <zxx-item><img src="./xugou-3.jpg"></zxx-item>
    <zxx-item><img src="./xugou-4.jpg"></zxx-item>
    <zxx-item><img src="./xugou-5.jpg"></zxx-item>
</zxx-grid>