CSS гибкий столбец направления и диапазон столбца

Question

Я пытаюсь добиться следующего с помощью flex-direction: column:

.page
---------------------
| H1                |
|---------|---------|
|  DIV 1  |  DIV 3  |
|         |---------|
|---------|  DIV 4  |
|  DIV 2  |         |
|         |         |
---------------------

Важно отметить, что я хочу, чтобы разметка осталась прежней, поэтому сейчас она выглядит так:

<div class="page">
  <h1>Test</h1>
  <div>test</div>
  <div>test</div>
  <!-- ... -->
</div>

это то, что я пробовал, но h1 на самом деле не охватывает, а вместо этого занимает весь столбец:

.page {
  width: 210mm;
  height: 297mm;
  box-sizing: border-box;
  font-size: 12pt;
  background: #FFF;

  margin: 5mm;
  padding: 12mm;

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.page > * {
}

h1 {
  width: 100%;
}

Answer 1

Вы можете использовать CSS grid, посмотрите пример кода.

.page {
  width: 100% /*2480px = 210mm @ 300dpi*/;
  height: 100% /*3508px = 297mm @ 300dpi*/;
  position: absolute;
  box-sizing: border-box;
  font-size: .875rem;
  background: #FFF;
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, 48.5%);
  grid-template-rows:  15% 20% 20% 20% 20%;
  align-items: center;
  align-content: center;
  grid-column-gap: 1%;
  grid-row-gap: 1%;
  align-self: stretch;
}
h1 {
 font-size: 1rem;
 grid-area: 1 / 1 / 2 / 3;
 background-color: #ccc;
 width:100%;
 height: 100%;
 text-align: center;
 display: table;
}
div {
  display: table;
  align-self: center;
  height: 100%;
  width: 100%;
  text-align: center;
  display: table
}

div span, h1 span {
  display: table-cell;
  vertical-align: middle;
}
.div1 {
  grid-area: 2 / 1 / 4 / 2;
  background-color: #cfcfcf;
}
.div2 {
  grid-area: 4 / 1 / 6 / 2;
  background-color: #eee;
}
.div3 {
  grid-area: 2 / 2 / 3 / 3;
  background-color: #d3d3d3;
}
.div4 {
  grid-area: 3 / 2 / 6 / 3;
  background-color: #a3a3a3;
}

<div class="page">
  <h1><span>H1</span></h1>
  <div class="div1"><span>DIV 1</span></div>
  <div class="div2"><span>DIV 2</span></div>
  <div class="div3"><span>DIV 3</span></div>
  <div class="div4"><span>DIV 4</span></div>
</div>

Answer 2

Попробуйте это

HTML

<div class="page">
  <div class="row">
      <div>DIV 1 </div>
  </div>
  <div class="row splitRow">
    <div class="row">
      <div>DIV 2 </div>
      <div>DIV 3 </div>
    </div>
    <div class="row">
      <div>DIV 4 </div>
      <div>DIV 5 </div>  
    </div>
  </div>

CSS

.row{
  display:flex;
}
.splitRow{
  flex-direction: column;
  align-items: center;
}
div{
  border:1px solid red;
  width: 200px;
  text-align: center;
}

ВЫХОД