html - CSS网格: Don't expand grid items

Question

我正在为移动设备和桌面设备创 build 计。在移动设备上，所有元素都堆叠在一起。在桌面上时，元素位于 2 列中。元素在移动设备和桌面设备上的顺序不同。

我想到使用 CSS 网格来创建它。

HTML

<div class="grid-release">
    <div class="gi-cover">cover</div>
    <div class="gi-detail">detail</div>
    <div class="gi-head">head </div>
    <div class="gi-desc">desc</div>
    <div class="gi-media">media</div>
    <div class="gi-comment">comment</div>
</div>

CSS

.grid-release {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "head"
    "cover"
    "detail"
    "desc"
    "media"
    "comment";
    grid-gap: 10px;
}

.grid-release .gi-cover {
    grid-area: cover;
    background-color: red;
}
.grid-release .gi-detail {
    grid-area: detail;
    background-color: yellow;
}

.grid-release .gi-head {
    grid-area: head;
    background-color: cyan;
}
.grid-release .gi-desc {
    grid-area: desc;
    background-color: chartreuse;
}
.grid-release .gi-media {
    grid-area: media;
    background-color: orange;
}

.grid-release .gi-comment {
    grid-area: comment;
    background-color: darkkhaki;
}

@media screen and (min-width: 400px) {
    .grid-release {
        grid-template-columns: 1fr 2fr;
        grid-template-rows: auto;
        grid-template-areas:
        "cover head"
        "detail desc"
        ". media"
        ". comment"; 
    }
}

...结果:

https://jsfiddle.net/q3hpr0ak/

这是我的问题。当在桌面上且封面网格项展开时，头部网格项也会展开。

https://jsfiddle.net/z5jhewhb/1/

当详细网格项展开时，描述网格项也会展开

https://jsfiddle.net/Lh2y2pzp/2/

等等...

显然，这会创建一个非常丑陋的布局。 我开始认为 CSS 网格可能是错误的方法。 我需要指导。我整个上午都在玩这个，但没有成功。

Answer 1

如果您想让同一行上左侧元素的高度独立于右侧元素，那么这与网格的设计目的几乎完全相反。

实际上任何其他布局都会做得更好。例如，这是一个使用 Flexbox 的示例，因此我们可以设置元素的顺序。

请务必添加

    align-items:flex-start;

这样它们就不会拉伸(stretch)以匹配旁边的 div

https://jsfiddle.net/q3hpr0ak/2/

正如您所看到的，将移动设备的 flex 流(一个在另一个之上)切换到桌面的行换行可以轻松切换布局，而“顺序”属性和一些简单的边距保证了每个元素位于其应有的位置。