макет с сеткой: как поместить box1 в строке 1 столбца 2 и box2 в строке 2 столбца 2?

Question

Что я получаю, как показано ниже:

Что я ожидаю, это:
положить box1 в row 1 column 2 и box2 in row2 column 2.

Почему нельзя поместить содержимое в box1 и box2 в сетку row 1 column 2 и сетку row 2 column 2?

Как исправить мой css?

html,
body {
  height: 1200px;
  width: 1000px;
}

.container {
  display: grid;
  grid-gap: 1.5em;
  margin: 1.5em auto;
  padding: 0 1.5em;
  border: 1px solid green;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.sidebar {
  grid-row: 1/3;
  grid-column: 2/3;
}

.box1 {
  grid-row: 1/2;
  grid-column: 2/3;
}

.box2 {
  grid-row: 2/3;
  grid-column: 2/3;
}

<div class="container">
  <div class="prose1">
    <h1>Introduction</h1>
    <p>100 characters created by lorem with emmt-vim.
    </p>
  </div>
  <div class="sidebar">
    <div class="box1">
      <h2 class="box-header">Actions</h2>
      <ul class="box-menu">
        <li><a href="">Do a thing</a></li>
        <li><a href="">Register your bad self</a></li>
        <li><a href="">Hold the phone</a></li>
      </ul>
    </div>
    <div class="box2">
      <h2 class="box-header">Related Stuff</h2>
      <ul class="box-menu">
        <li><a href="">Just a link</a></li>
        <li><a href="">Another link</a></li>
      </ul>
    </div>
  </div>
  <div class="prose2">
    <h2>Additional Information</h2>
    xxxx
  </div>
</div>

Answer 1

Контейнер - это сетка в макете, и вы можете размещать прямые дочерние элементы, а box1 и box2 вкладываются внутрь боковой панели.Поэтому обычно из контейнера можно позиционировать porse1, sidebar и porse2, но вы можете рассматривать дочерние элементы боковой панели как прямые дочерние элементы контейнера, используя отображаемое значение contents.

Так чтоРешение состоит в том, чтобы использовать отображаемое значение contents:

.sidebar {
    display: contents;
}

Но помните о поддержке браузером .

Другое решение - сделать боковую панель сеткой ирасположите дочерние элементы box1 и box2 так, как вы хотите, например:

html,
body {
  height: 1200px;
  width: 1000px;
}

.container {
  display: grid;
  grid-gap: 1.5em;
  margin: 1.5em auto;
  padding: 0 1.5em;
  border: 1px solid green;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.sidebar {
    display: grid;
    grid-gap: 1.5em;
    grid-row: 1/-1;
    grid-column: 2;
}

.box1 {
  grid-row: 1;
}

.box2 {
  grid-row: 2;
}