如何并排布局照片文本网格

Question

我正在寻找帮助以获得模型中看到的布局。我想要一个3x2网格的文本图像，图像文本，文本图像堆叠在移动设备上。每个图像都需要对角线接触。实现这一目标的最佳方式是什么？ 实体模型

感谢

Answer 1

有几种方法可以做到这一点。我的解决方案涉及使用CSS Grid，这是一种非常干净的方法（需要注意IE11需要更多的手持操作）。

以下代码段的桌面大小有一个断点，可以显示两列，下面的任何内容都是堆叠的。

HTML

<article>
    <div class="text">Text
    </div>
    <div class="image">Image
    </div>
    <div class="text">Text
    </div>
    <div class="image">Image
    </div>
    <div class="text">Text
    </div>
    <div class="image">Image
    </div>
</article>

CSS

article {
    display: grid;
    grid-template-columns: 1;
    grid-auto-rows: minmax(100px, auto);
    background: grey;
}
.image,
.text {
    background: red;
    height: 100px;
}
.image {
    background: green;
}
.text:nth-of-type(3) {
    background: magenta;
}
.image:nth-of-type(4) {
    background: blue;
}
@media screen and (min-width: 1025px) {
    article {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        background: grey;
    }
    .text:nth-of-type(3) {
        grid-column: 2;
        grid-row: 2;
    }
}

Codepen

https://codepen.io/sassquad/pen/ooLEOa