CSS 网格：不展开网格项

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/

当详细信息网格项目展开时，desc 网格项目也会展开

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

等等...

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

Answer 1

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

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

确保添加

    align-items:flex-start;

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

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

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

Answer 2

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

@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/

Answer 3

我只是再考虑了一下...答案再简单不过了：在桌面上使用好的 ol' 花车，在移动设备上使用 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，我认为这次它会工作得很好 ;)

CSS 网格：不展开网格项

CSS Grid: Don't expand grid items

html

css

grid-layout

css-grid