用不同的顺序在断点处重新组织网格 - html css 和 js

Question

如果我的问题看起来很简单，我很抱歉，但我被困在一个项目中，我想我错过了一些让它正常工作的东西。

我必须在断点 1024px 处进行 div 重组。

Schema 我如何使用 flexbox 将 child 3 放在 child 1 和 2 的右侧？我试过使用 flexwrap，但实际上，我不确定这是好方法。

感谢您的宝贵时间

Answer 1

.parent {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 10px;
            grid-row-gap: 10px;
            height: 500px;
            max-width: 1024px;
        }

        .div1 {
            grid-area: 1 / 1 / 2 / 2;
            background-color: brown;
            height: 100%;
            width: 100%;
        }

        .div2 {
            grid-area: 1 / 2 / 3 / 3;
            margin: auto;
            background-color: burlywood;
            height: 100%;
            width: 100%;
        }

        .div3 {
            grid-area: 2 / 1 / 3 / 2;
            margin: auto;
            background-color: coral;
            height: 100%;
            width: 100%;
        }

<div class="parent">
        <div class="div1"> DIV1 </div>
        <div class="div2"> DIV2 </div>
        <div class="div3"> DIV3 </div>
    </div>

Answer 2

谢谢你，

我找到了网格的最佳方式，谢谢卡洛斯。

我的 parents 现在是：

.result-grid{
    display: grid;
    grid-template-columns: size col1 size col2;
    grid-template-rows: size row1 size row1;
    grid-template-areas:
    "child1 child2"
    "child3 child2";
    height: 500px;
}

我的 child 被分配 grid-area: child1;

我学会了分配 grid-area ，这对我来说一开始真的很难理解。

谢谢 ;)

用不同的顺序在断点处重新组织网格 - html css 和 js

Reorganize a grid at breakpoint with a different order - html css and js

html

javascript

css

reorganize