在CSS网格中对齐列

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属性）？

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 demo

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>

Answer 2

我尝试使用属性grid-row-end和auto-fill为您提供解决方案。

第一：该解决方案可以很好地解决您的问题（可伸缩性不是很好，但是很不幸，如果不使用javascript，我认为没有完美的CSS解决方案）。

顺便说一句，它是这样工作的：

• 我创建一个具有grid-template-columns: repeat(auto-fill, 10rem);属性的网格
• 对于每个网格项目，我都放置一个grid-row-end: span [dimension]; =>，其中5rem放置[1]，15rem放置[3]，10 rem放置[2]（这是我说“ >它不可扩展“'因为如果您更改尺寸，则也必须在此处更改）

对于所有这些属性，您可以在以下位置找到非常有用的信息：https://css-tricks.com/snippets/css/complete-guide-grid/和此处：https://rachelandrew.co.uk/archives/2017/01/18/css-grid-one-layout-method-not-the-only-layout-method/（我提到我的CSS专家，我有点激动（^ _ ^;））

这是运行中的代码：

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

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

section#main section#app-column-primary {
    height: 5rem;
    grid-row-end: span 1;
    background: Cyan;
}
section#main section#app-column-secondary {
    grid-row-end: span 3;
    height: 15rem;
    background: Thistle;
}
section#main section#app-column-tertiary {
    grid-row-end: span 2;
    height: 10rem;
    background: Coral;
}

section#main {
    display: grid;
    grid-template-columns: repeat(auto-fill, 10rem);
    grid-row-gap: 0.5rem;
    grid-column-gap: 0.5rem;
}

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

希望有帮助。干杯。

PS：另请参见属性grid-auto-flow: dense;，在现实世界中有一些限制，它可以帮助您将各种元素组合在一起（我将其删除到示例中，因为这里只有3个元素= > Rachel Andrew的文章对您非常有用，我认为）