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

​

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);属性的网格
• 对于每个网格项，我为5 rem放置了一个grid-row-end: span [dimension];=>，为1，对于15 rem，我放置了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个元素