Выравнивание столбцов в 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 мне нужны)?

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.

Firstable: это решение хорошо работает с вашими измерениями (оно не очень масштабируемое, но, к сожалению, без использования JavaScript,я думаю, что не существует идеального и чистого решения CSS).

Кстати, вот как это работает:

• Я создаю сетку с grid-template-columns: repeat(auto-fill, 10rem); свойством
• Для каждого элемента сетки я ставлю grid-row-end: span [dimension]; => для 5rem я ставлю [1], для 15rem я ставлю [3] и для 10 rem я ставлю [2] (это когда я сказал " этоне масштабируется", потому что если вы изменяете размеры, вы должны изменить и здесь)

Для всех этих свойств вы можете найти здесь очень полезную информацию: https://css -трюки.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 элемента => Артикул Рэйчел Эндрю очень полезен для вас, я думаю)