html - 对齐 CSS Grid 中的列

Question

我应该设置哪些 CSS 属性，以便列将相互包裹，忽略水平相邻列的高度？

不成功的尝试

我试图用 来做到这一点display: grid，但它的行为并不符合我的意愿。一个例子：

header {
    height: 2.0rem;
    background: PeachPuff;
}
footer {
    height: 2.0rem;
    background: PaleGreen;
}

header,
footer,
section.app-column {
    padding: 1.0rem;
}

section#main section#app-column-primary {
    grid-area: primary;
    height: 5.0rem;
    background: Cyan;
}
section#main section#app-column-secondary {
    grid-area: secondary;
    height: 15.0rem;
    background: Thistle;
}
section#main section#app-column-tertiary {
    grid-area: tertiary;
    height: 10.0rem;
    background: Coral;
}

section#main {
    display: grid;
    grid-template-columns: repeat(3, 10.0rem);
    grid-row-gap: 0.2rem;
    grid-column-gap: 0.5rem;
}

section#main {
    content: "This application requires a display at least 200 pixels wide.";
}

@media(min-width: 200px) {
    section#main {
        grid-template-areas:
            "primary"
            "secondary"
            "tertiary";
    }
}

@media(min-width: 350px) {
    section#main {
        grid-template-areas:
            "primary secondary"
            "tertiary .";
    }
}

@media(min-width: 520px) {
    section#main {
        grid-template-areas:
            "primary secondary tertiary";
    }
}

<header>Header ipsum, dolor sit amet.</header>
<section id="main">
    <section class="app-column" id="app-column-primary">
        Primary app column
    </section>
    <section class="app-column" id="app-column-secondary">
        Secondary app column
    </section>
    <section class="app-column" id="app-column-tertiary">
        Tertiary app column
    </section>
</section>
<footer>Footer ipsum, dolor sit amet.</footer>

3列和1列的正确结果

这就是我需要的三列 ( "primary secondary tertiary") 和一列 ( "primary" "secondary" "tertiary") 布局。

2列不需要的布局

但是两列布局的tertiary列从列下方开始secondary：

2列的所需布局

我想要的是tertiary列放置忽略secondary列，因为它们根本不会重叠：

我怎样才能用 CSS 做到这一点？display: grid适合这个吗？我应该使用display: flex还是不同的东西（如果是，我需要什么 CSS 属性）？

标签： htmlcsscss-grid

Answer 1

而不是这个：

@media(min-width: 350px) {
    section#main {
        grid-template-areas:
            "primary secondary"
            "tertiary .";
    }
}

...创建一个 2x2 网格，如下所示：

[ primary ] [ secondary ]

[tertiary ] [ empty space ]

...这正是您所显示的问题：

做这个：

@media(min-width: 350px) {
    section#main {
        grid-template-areas:
            "primary secondary"
            "tertiary secondary";
    }
}

jsFiddle 演示

header {
  height: 2.0rem;
  background: PeachPuff;
}

footer {
  height: 2.0rem;
  background: PaleGreen;
}

header,
footer,
section.app-column {
  padding: 1.0rem;
}

section#main section#app-column-primary {
  grid-area: primary;
  height: 5.0rem;
  background: Cyan;
}

section#main section#app-column-secondary {
  grid-area: secondary;
  height: 15.0rem;
  background: Thistle;
}

section#main section#app-column-tertiary {
  grid-area: tertiary;
  height: 10.0rem;
  background: Coral;
}

section#main {
  display: grid;
  grid-template-columns: repeat(3, 10.0rem);
  grid-row-gap: 0.2rem;
  grid-column-gap: 0.5rem;
}

section#main {
  content: "This application requires a display at least 200 pixels wide.";
}

@media(min-width: 200px) {
  section#main {
    grid-template-areas: "primary" "secondary" "tertiary";
  }
}

@media(min-width: 350px) {
  section#main {
    grid-template-areas: "primary secondary" "tertiary secondary";
  }
}

@media(min-width: 520px) {
  section#main {
    grid-template-areas: "primary secondary tertiary";
  }
}

<header>Header ipsum, dolor sit amet.</header>
<section id="main">
  <section class="app-column" id="app-column-primary">
    Primary app column
  </section>
  <section class="app-column" id="app-column-secondary">
    Secondary app column
  </section>
  <section class="app-column" id="app-column-tertiary">
    Tertiary app column
  </section>
</section>
<footer>Footer ipsum, dolor sit amet.</footer>