在CSS网格中对齐列 [英] Aligning columns in CSS Grid

问题描述

我应该设置哪些CSS属性，以使各列​​之间相互包裹，而忽略水平相邻列的高度？

尝试失败

我正在尝试执行此操作与 display：grid 一起显示，但它不符合我的要求。示例：

  header {height：2.0rem;背景：PeachPuff；}页脚{高度：2.0rem；背景：PaleGreen；}页眉，页脚，section.app栏{填充：1.0rem；} section＃main栏＃app-column-primary {网格区域：primary；高度：5.0rem;背景：青色；} section＃main section＃app-column-secondary {网格区域：secondary；高度：15.0rem;背景：蓟；}部分＃主要部分＃app-column-tertiary {网格区域：第三；高度：10.0rem;背景：珊瑚；} section＃main {显示：网格； grid-template-columns：repeat（3，10.0rem）;网格行间隙：0.2rem; grid-column-gap：0.5rem;} section＃main {内容：此应用程序需要至少200像素宽的显示器。;} @ media（最小宽度：200px）{section＃main {网格模板区域：主要的中学的大专的; }} @ media（最小宽度：350像素）{section＃main {grid-template-areas： primary secondary tertiary。; }} @ media（最小宽度：520像素）{section＃main {grid-template-areas：主要二级； }}  

 < header> Header ipsum，dolor sit amet 。< / header>< section id = main>。 < section class = app-column id = app-column-primary>主应用程序列< / section> < section class = app-column id = app-column-secondary>辅助应用列< / section> < section class = app-column id = app-column-tertiary>第三应用程序列< / section>< / section>< footer> Footer ipsum，dolor sit amet。< / footer>  

>

3列和1列的正确结果

这就是我需要的三列（ 主要二级 ）和一列（主要二级第三 ）布局。 / p>

不需要的2列布局

但是两列布局的 列在次要列下面：

2列所需的布局

我想要的是第三级列的位置，以忽略 secondary 列，因为它们根本不会重叠：

如何使用CSS做到这一点？ display：grid 是否适用于此？我应该使用 display：flex 还是其他方法（如果需要，正是我需要的CSS属性）？

解决方案

代替此：

  @media（min-width：350px）{
 section＃main {
 grid-template-areas：
 primary secondary 
 tertiary ;; 
} 
} 
  

...这样会创建一个2x2的网格：

  [主要] [次要] 
 
 [大学生] [空白空间] 
  

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

执行此操作：

  @media（min-width：350px）{
 section＃main {
 grid-template-areas：
 primary secondary 
大专中学； 
} 
} 
  

jsFiddle演示

  header {height：2.0rem;背景：PeachPuff；}页脚{高度：2.0rem；背景：PaleGreen；}页眉，页脚，section.app栏{填充：1.0rem；} section＃main栏＃app-column-primary {网格区域：primary；高度：5.0rem;背景：青色；} section＃main section＃app-column-secondary {网格区域：secondary；高度：15.0rem;背景：蓟；}部分＃主要部分＃app-column-tertiary {网格区域：第三；高度：10.0rem;背景：珊瑚；} section＃main {显示：网格； grid-template-columns：repeat（3，10.0rem）;网格行间隙：0.2rem; grid-column-gap：0.5rem;} section＃main {内容：此应用程序需要至少200像素宽的显示器。;} @ media（最小宽度：200px）{section＃main {网格模板区域：主要的中学的大专的; }} @ media（最小宽度：350像素）{section＃main {grid-template-areas：小学，中学； }} @ media（最小宽度：520像素）{section＃main {grid-template-areas：主要二级； }}  

 < header> Header ipsum，dolor sit amet 。< / header>< section id = main> < section class = app-column id = app-column-primary>主应用程序列< / section> < section class = app-column id = app-column-secondary>辅助应用列< / section> < section class = app-column id = app-column-tertiary>第三级应用列< / section>< / section>< footer> Footer ipsum，dolor sit amet。< / footer>  

>

What CSS properties should I set so that the columns will wrap underneath one another, ignoring the height of horizontally-adjacent columns?

Unsuccessful attempt

I'm attempting to do this with display: grid, but it doesn't behave how I want. An example:

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>

Correct result for 3 columns and 1 column

That does what I need for the three-column ("primary secondary tertiary") and one-column ("primary" "secondary" "tertiary") layouts.

Unwanted layout for 2 columns

But the two-column layout has the tertiary column starting below the secondary column:

Desired layout for 2 columns

What I want is for the tertiary column placement to ignore the secondary column because they won't overlap at all:

How can I do this with CSS? Is display: grid appropriate for this? Should I be using display: flex or something different (if so, exactly what CSS properties do I need)?

解决方案

Instead of this:

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

... which creates a 2x2 grid, like this:

[ primary ] [ secondary ]

[tertiary ] [ empty space ]

... and is exactly what you're showing as the problem:

Do this:

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

这篇关于在CSS网格中对齐列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！