html - 如何在两列内显示容器？

Question

我想仅在 container 内显示这两个 columns 的内容，并且 columns 占据页面的整个宽度，例如这张图片在下面。

这可以通过使用 css grid 实现吗？

感谢您的帮助和支持。

<div class="columns">
  <div class="columns--container">
    <div class="column">
        <!-- Content -->
    </div>
    <div class="column">
        <!-- Content -->
    </div>
  </div>
</div>

Answer 1

好的，我是网格的新手，但这应该可行:

.columns {
  height: 400px;
  background: whitesmoke;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
}
.columns-container {
  grid-column-start: 2;
  grid-column-end: 4;
  display: inherit;
  grid-template-columns: auto auto;
  flex-direction: row;
}
.column {
  background: green;
}

<div class="columns">
  <div class="columns-container">
    <div class="column">
        <!-- Content -->
    </div>
    <div class="column">
        <!-- Content -->
    </div>
  </div>
</div>