如何在 CSS 网格的“顶部”制作内容包装器答案

【问题标题】：How to make content wrapper "on top" of css grid如何在 CSS 网格的“顶部”制作内容包装器
【发布时间】：2018-06-30 02:30:42
【问题描述】：

我正在使用两列 CSS 网格进行网站布局，看起来有点像这样。它工作正常，每个 div 中的所有内容中心都完美。带有“bg”的单元格只有一个背景图像。每个网格单元“接触”浏览器窗口的边框。

+--------+--------+
|  text  |   bg   |
+--------+--------+
|   bg   |  text  |
+--------+--------+
|       text      |
+-----------------+

但是，是否有一种简单的方法可以将内容包裹并居中以使其不会超出特定宽度？我可以根据单元格定位单个段落以左对齐或右对齐，但我想知道是否有更优雅的方法来做到这一点？括号是“包装”。

+--------+--------+
|   [text|  bg]   |
+--------+--------+
|   [bg  |text]   |
+--------+--------+
|   [   text  ]   |
+-----------------+

【问题讨论】：

请贴出你试过的代码。
@Michael_B codepen.io/arjenbokhoven/pen/oymYRe 简洁：我希望所有文本都被限制为与跨越 2 列的底部段落相同的宽度，以便单个单元格在其各自的左侧和右侧有额外的空白.

标签： html css grid css-grid

【解决方案1】：

您可以在整个两列网格周围放置一个包装器，并在包装器的左侧和右侧添加一些填充。

【讨论】：

【解决方案2】：

试试这个：-

.container {
  display: flex;
  flex-direction: column;
  background: #fcfcfc;
}

.row {
  display: flex;
  flex-direction: row;
  padding: 1em 2em;
  align-items: center;
}

.column {
  background: #fff;
}

.gridbg {
  background-image: url(http://via.placeholder.com/350x150);
  background-repeat: no-repeat;
  background-size: cover;
  height: 20vh;
  width: 50%;
  flex-shrink: 0;
}

.px-2 {
  padding: 0 1em;
}

h2 {
  margin-top: 0;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div>
          <h2>Heading</h2>
          <p>Vestibulum felis ligula, placerat non felis id, hendrerit interdum nunc. Fusce finibus, sapien ac blandit ultrices, est tortor viverra turpis, et venenatis ipsum purus id magna. </p>
        </div>
      </div>
      <div class="row">
        <div class="gridbg">
        </div>
        <div class="px-2">
          <h2>Heading</h2>
          <p>Vestibulum felis ligula, placerat non felis id, hendrerit interdum nunc. Fusce finibus, sapien ac blandit ultrices, est tortor viverra turpis, et venenatis ipsum purus id magna. </p>
        </div>
      </div>
    </div>
  </body>

</html>

【讨论】：

谢谢，但这不起作用，因为它会包裹整个网格。如果你明白我的意思，我希望网格是全角的，但内容是包裹的。
能否详细说明一下？
我的两列网格布局是全角的，有些网格单元格包含文本段落，而有些则只有背景图像。我希望我的段落被限制在一个整体的内容宽度上，而不是像我的网格布局那样全宽。本质上，我希望我的所有文本都被换行。
我现在明白你在找什么了。可能，您需要 javascript 来设置所需的宽度。