并排对齐 div 元素

Question

我需要两个元素并排放置，但即使它们位于网格中，它们仍然无法就位。
是的，我尝试过内联块、浮动和填充。他们都没有工作。 我以为这可能是网格的问题，但到目前为止我还没有工作得很好。
这是我的代码：
（我裁剪了 css，因为配置本质上是相同的）

body {
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100%;
  border: 10px blue;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(12, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 10px;
}

.bg {
  background-color: blueviolet;
  grid-area: 1 / 1 / 13 / 5;
}

.header {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: auto;
  background-color: blue;
  grid-area: 1 / 1 / 2 / 5;
}

.footer {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: auto;
  background-color: black;
  grid-area: 12 / 1 / 13 / 5;
}

.contentL1-C1 {
  margin: 5px;
  padding: 0px;
  width: 50%;
  height: auto;
  background-color: green;
  grid-area: 2 / 1 / 4 / 3;
}

.contentL1-C2 {
  margin: 5px;
  padding: 0px;
  width: 50%;
  height: auto;
  background-color: greenyellow;
  grid-area: 2 / 3 / 4 / 5;
}

<div class="grid">
  <div class="bg">
    <div class="header">
      heyy
    </div>
    <div class="contentL1-C1">
      <img src="congee.png" alt="congee" width="50%" height="50%" />
    </div>
    <div class="contentL1-C2">
      <img src="congee.png" alt="congee" width="50%" height="50%" />
    </div>
    <div class="contentL2">
      <div class="contentL2-title">
        title
      </div>
      <div class="contentL2-C1card">
        <img src="congee.png" alt="congee" width="50%" height="50%" />
      </div>
      <div class="contentL2-C2card">
        <img src="congee.png" alt="congee" width="50%" height="50%" />
      </div>
      <div class="contentL2-C3card">
        <img src="congee.png" alt="congee" width="50%" height="50%" />
      </div>
      <div class="contentL2-C4card">
        card4
      </div>
      hey
    </div>
    <div class="contentL3">
      hey
    </div>
    <div class="footer">
      hey
    </div>
  </div>
</div>

Answer 1

我编辑了一些可能适合您正在寻找的需求的内容。

body {
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100%;
  border: 10px blue;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(12, 1fr);
  grid-gap: 5px; /* Use grid-gap to define both row and column gaps */
}

.bg {
  background-color: blueviolet;
  grid-area: 1 / 1 / 13 / 5;
}

.header {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: auto;
  background-color: blue;
  grid-area: 1 / 1 / 2 / 5;
}

.footer {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: auto;
  background-color: black;
  grid-area: 12 / 1 / 13 / 5;
}

.contentL1-C1 {
  margin: 5px;
  padding: 0px;
  width: 100%; /* Set width to 100% to fill the available space in the grid cell */
  height: auto;
  background-color: green;
  grid-area: 2 / 1 / 4 / 3;
}

.contentL1-C2 {
  margin: 5px;
  padding: 0px;
  width: 100%; /* Set width to 100% to fill the available space in the grid cell */
  height: auto;
  background-color: greenyellow;
  grid-area: 2 / 3 / 4 / 5;
}

  <div class="grid">
    <div class="bg">
      <div class="header">
        heyy
      </div>
      <div class="contentL1-C1">
        <img src="congee.png" alt="congee" width="50%" height="50%" />
      </div>
      <div class="contentL1-C2">
        <img src="congee.png" alt="congee" width="50%" height="50%" />
      </div>
      <div class="contentL2">
        <div class="contentL2-title">
          title
        </div>
        <div class="contentL2-C1card">
          <img src="congee.png" alt="congee" width="50%" height="50%" />
        </div>
        <div class="contentL2-C2card">
          <img src="congee.png" alt="congee" width="50%" height="50%" />
        </div>
        <div class="contentL2-C3card">
          <img src="congee.png" alt="congee" width="50%" height="50%" />
        </div>
        <div class="contentL2-C4card">
          card4
        </div>
        hey
      </div>
      <div class="contentL3">
        hey
      </div>
      <div class="footer">
        hey
      </div>
    </div>
  </div>

让我知道这是否是您正在寻找的