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的一个，所以我们可以设置元素的顺序。

确保添加

string

所以他们不会伸展以匹配

旁边的div

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

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

Answer 2

这里真正的挑战是改变标题的位置。您可以使用最简单的网格，1fr - 2fr左右列，每行1行， IF ，您可以在下一个项目的边距中使用已知的高度标题。 / p>

@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

我刚才给了这个想法......并且asnwer不可能更简单：使用好的ol＆＃39;浮动桌面，flex for mobile，因此您可以根据需要重新订购项目：

@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网格：不要展开网格项

3 个答案: