CSS Grid：不要扩展网格项

Question

我正在为移动设备和桌面设备创建设计。在移动设备上，所有元素都堆叠在一起。在桌面上时，元素位于 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/

当detail grid item展开时，desc grid item也会展开

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

等等……

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

Answer 1

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

实际上任何其他布局都会做得更好。例如，这里使用了 flexbox，所以我们可以设置元素的顺序。

请务必添加

    align-items:flex-start;

所以它们不会拉伸以匹配旁边的 div

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

如您所见，将移动设备的 flex-flow 从列（一个在另一个之上）切换到桌面的行换行允许轻松切换布局，而“order”属性和一些简单的边距保证每个项目是正确的。

Answer 2

我只是再想一想……结果再简单不过了：桌面使用好的 ol' floats，移动设备使用 flex，这样您就可以根据需要重新订购商品：

@media screen and (min-width: 700px) {
  .container { display:block; }
  .cover, .detail{ width:33%; }
  .head, .desc, .media, .comment { width:66%; float:right; }
}

https://jsfiddle.net/q3hpr0ak/3/

检查 jsfiddle，我认为这次它会正常工作；）

Answer 3

这里真正的挑战是标题位置的变化。您可以使用最简单的网格，即 1fr - 2fr 左右两列，每列各 1 行，如果您有一个已知高度标题可用于下一项的边距。

@media screen and (min-width: 700px) {
  .container{
    grid-template-columns:1fr 2fr;
    grid-template-rows:1fr;
    grid-template-areas:"left right";
  } 

https://jsfiddle.net/xoob00kn/