Равная высота элементов внутри элемента сетки с раскладкой сетки CSS

У меня есть последовательность статей внутри div длиной 4+ без тега строки округления. Мне нужно представить его как таблицу из 3 статей (столбцов) на строку, возможно, с display: grid. Каждая статья имеет заголовок, раздел и нижний колонтитул.

Как мне реализовать равную высоту для каждого заголовка, равную высоту для каждого раздела и равную высоту нижнего колонтитула, выровненную по нижней части статьи, внутри каждой строки статей? Возможно ли это? Должен ли я использовать display: table?

PS Мне нужно изменить количество статей в строке динамически, в зависимости от ширины экрана. Thanx.

HTML:

body {
  width: 100%;
  max-width: 1024px;
  margin: auto;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.container article {
  display: grid;
}

article header {
  background-color: #eeeeee;
}

article section {
  background-color: #cccccc;
}

article footer {
  background-color: #dddddd;
}
<div class="container">
  <article>
    <header>
      <h2>Header</h2>
      <h2>Header</h2>
    </header>
    <section>
      <p>Content</p>
    </section>
    <footer>
      <p>Footer</p>
    </footer>
  </article>
  <article>
    <header>
      <h2>Header</h2>
    </header>
    <section>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </section>
    <footer>
      <p>Footer</p>
      <p>Footer</p>
    </footer>
  </article>
  <article>
    <header>
      <h2>Header</h2>
    </header>
    <section>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </section>
    <footer>
      <p>Footer</p>
    </footer>
  </article>
  <article>
    <header>
      <h2>Header</h2>
    </header>
    <section>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </section>
    <footer>
      <p>Footer</p>
      <p>Footer</p>
    </footer>
  </article>
</div>

Ответы

Ответ 1

Возможно ли это?

TL;DR; Да.

Codepen Demo # 1 (Просмотр с Firefox)

Codepen Demo # 2 (просмотр с Firefox; использование SASS и настройка)

Трудность здесь состоит в том, что каждая статья является сеткой внутри себя, и поэтому любая статья не знает о другом. Из-за этого невозможно, чтобы компонент одной статьи, такой как заголовок, настраивался в соответствии с высотой заголовка в другой статье.

На самом деле есть способ сделать это с помощью css-сеток и без изменения разметки!

Мы могли бы "сгладить" структуру с помощью CSS таким образом, чтобы все компоненты всех статей были частью только одной сетки CSS - контейнера статьи.

Это возможно, даже не изменяя текущую разметку, задав статьи с помощью display: contents

дисплей: содержимое (caniuse)

Из caniuse:

display: contents вызывает появление дочерних элементов, как если бы они были прямыми дочерними элементами родительского элемента, игнорируя элемент сам. Это может быть полезно, когда элемент оболочки должен игнорироваться при использовании CSS-сетки или аналогичных методов компоновки.

Итак, если мы установим статьи с display: contents

.container article {
  display: contents;
}

Теперь все заголовки, секции и нижние колонтитулы становятся (прямыми) элементами сетки (контейнера - который имеет display:grid), который мы можем организовать, используя свойство grid-template-areas.

.container {
  display: grid;
  grid-column-gap: 1em; /* horizontal gap between articles */
  grid-template-columns: repeat(3, 1fr);

  grid-template-areas: "header1 header2 header3" 
                       "section1 section2 section3"
                       "footer1 footer2 footer3"
                       "header4 header5 header6" 
                       "section4 section5 section6"
                       "footer4 footer5 footer6"
}

Поскольку каждый заголовок/секция/нижний колонтитул занимает ровно одну ячейку - это заставляет их занять ту же вертикальную высоту. Так, например, header1, header2 и header3 будут иметь одинаковую высоту независимо от их содержимого.

Теперь установите свойства grid-area на каждую из ячеек.

article:nth-child(1) header {
  grid-area: header1;
}
article:nth-child(2) header {
  grid-area: header2;
}
article:nth-child(3) header {
  grid-area: header3;
}
article:nth-child(4) header {
  grid-area: header4;
}
article:nth-child(1) section {
  grid-area: section1;
}
...
article:nth-child(4) section {
  grid-area: section4;
}
article:nth-child(1) footer {
  grid-area: footer1;
}
...
article:nth-child(4) footer {
  grid-area: footer4;
}

Наконец, установите вертикальный разрыв между каждой строкой статей (начиная со второй строки статей):

article:nth-child(n + 4) header {
  margin-top: 1em;
}

Демо: (обязательно посмотрите на Firefox)

body {
  width: 100%;
  max-width: 1024px;
  margin: auto;
}

.container {
  display: grid;
  grid-column-gap: 1em;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "header1 header2 header3" 
                      "section1 section2 section3"
                        "footer1 footer2 footer3"
                        "header4 header5 header6" 
                      "section4 section5 section6"
                        "footer4 footer5 footer6"
}

.container article {
  display: contents;
}

article header {
  background-color: #eeeeee;
}

article section {
  background-color: #cccccc;
}

article footer {
  background-color: #dddddd;
}

article:nth-child(n + 4) header {
  margin-top: 1em;
}

article:nth-child(1) header {
  grid-area: header1;
}
article:nth-child(2) header {
  grid-area: header2;
}
article:nth-child(3) header {
  grid-area: header3;
}
article:nth-child(4) header {
  grid-area: header4;
}
article:nth-child(1) section {
  grid-area: section1;
}
article:nth-child(2) section {
  grid-area: section2;
}
article:nth-child(3) section {
  grid-area: section3;
}
article:nth-child(4) section {
  grid-area: section4;
}
article:nth-child(1) footer {
  grid-area: footer1;
}
article:nth-child(2) footer {
  grid-area: footer2;
}
article:nth-child(3) footer {
  grid-area: footer3;
}
article:nth-child(4) footer {
  grid-area: footer4;
}
<div class="container">
    <article>
        <header>
            <h2>Header</h2>
            <h2>Header</h2>
        </header>
        <section>
            <p>Content</p>
        </section>
        <footer>
            <p>Footer</p>
        </footer>
    </article>
    <article>
        <header>
            <h2>Header</h2>
        </header>
        <section>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </section>
        <footer>
            <p>Footer</p>
            <p>Footer</p>
        </footer>
    </article>
    <article>
        <header>
            <h2>Header</h2>
        </header>
        <section>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </section>
        <footer>
            <p>Footer</p>
        </footer>
    </article>
    <article>
        <header>
            <h2>Header</h2>
        </header>
        <section>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </section>
        <footer>
            <p>Footer</p>
            <p>Footer</p>
        </footer>
    </article>
</div>

Ответ 2

Самая простая идея, которая приходит мне на ум - использовать procentage. Например:

.container{
    width: 30%;
    height: 80%;
}

Чтобы иметь полный контроль над вашим макетом, ознакомьтесь с ссылкой на значения по умолчанию CSS:

https://www.w3schools.com/cssref/css_default_values.asp

Для разных устройств просто используйте отдельные файлы CSS...