我如何使用 CSS 网格和容器 class 将其分为两列？

Question

我有一个容器 class，我需要在整个网站上使用它（想想 Bootstrap 风格）。 我不能将 display:grid 放在容器上并在那里定义列，因为我需要 reuse.container。 如果我制作更多的 div，这似乎有点矫枉过正。

那么，我怎样才能把这个简单的 UL 和 P 变成两列网格呢？

 .container { margin: 0 auto; padding: 0 15px; width: 1170px; }.mb1 { margin-bottom: 60px; }.mb2 { margin-bottom: 100px; }.mb3 { margin-bottom: 120px; }.mb4 { margin-bottom: 140px; } #how-it-works { display:grid; grid-template-columns: 1fr 2fr; }

 <div id="how-it-works"> <div class="container"> <h2>What We Do</h2> <ul class="what-we-do"> <li>This</li> <li>A little of that</li> <li>Some more of that over there</li> <li>Also this</li> <li>And wrapping up with this</li> </ul> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem ad eveniet explicabo saepe voluptate accusantium neque sint architecto enim, facilis beatae eligendi libero iure similique? Exercitationem commodi ipsa repellendus dolorem illo nobis ad dolor voluptatem iste, Dicta nemo vel impedit excepturi voluptas amet. eaque laborum laudantium cumque eum sit! Obcaecati.</p> </div> </div>

Answer 1

我不明白你想把两列放在哪里。 如果你不想添加另一个div，将容器class移动到上面的div。 此外，您不应将 grid 或 flex class 赋予容器元素。 您只能在容器内进行。

    <div id = "how-it-works" class = "container">
<div class = "row">

接着：

container {
width: ..
max-width: ..
}
.row {
display: grid;
}

Answer 2

您可以使用flex容器来实现，如下所示：

 .container { display: flex; } p { flex: 0 200px; padding: 20px; }

 <div id="how-it-works"> <div class="container"> <ul class="what-we-do"> <h2>What We Do</h2> <li>This</li> <li>A little of that</li> <li>Some more of that over there</li> <li>Also this</li> <li>And wrapping up with this</li> </ul> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem ad eveniet explicabo saepe voluptate accusantium neque sint architecto enim, facilis beatae eligendi libero iure similique? Exercitationem commodi ipsa repellendus dolorem illo nobis ad dolor voluptatem iste, Dicta nemo vel impedit excepturi voluptas amet. eaque laborum laudantium cumque eum sit! Obcaecati.</p> </div> </div>

Answer 3

再给它一个 class 就可以了？ 像containerGrid之类的？

 .containerGrid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(min-content, max-content); }.containerGrid > h2 { grid-column-start: 1; grid-column-end: 3; grid-row: 1; }.containerGrid > ul.what-we-do { grid-column-start: 1; grid-column-end: 2; grid-row: 2; }.containerGrid > p { grid-column-start: 2; grid-column-end: 3; grid-row: 2; }

 <div id="how-it-works"> <div class="container containerGrid"> <h2>What We Do</h2> <ul class="what-we-do"> <li>This</li> <li>A little of that</li> <li>Some more of that over there</li> <li>Also this</li> <li>And wrapping up with this</li> </ul> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem ad eveniet explicabo saepe voluptate accusantium neque sint architecto enim, facilis beatae eligendi libero iure similique? Exercitationem commodi ipsa repellendus dolorem illo nobis ad dolor voluptatem iste, Dicta nemo vel impedit excepturi voluptas amet. eaque laborum laudantium cumque eum sit! Obcaecati.</p> </div> </div>

或者在上面使用 Flexbox（你还没有真正说出h2应该做什么）？

如果您同意从 ul 下方开始的 p，这也可以很好地利用多列布局。

 .container { column-count: 2; }.container >h2 { column-span: all; }.container >ul.what-we-do { display: block; }.container >p { display: block; }

 <div id="how-it-works"> <div class="container"> <h2>What We Do</h2> <ul class="what-we-do"> <li>This</li> <li>A little of that</li> <li>Some more of that over there</li> <li>Also this</li> <li>And wrapping up with this</li> </ul> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem ad eveniet explicabo saepe voluptate accusantium neque sint architecto enim, facilis beatae eligendi libero iure similique? Exercitationem commodi ipsa repellendus dolorem illo nobis ad dolor voluptatem iste, Dicta nemo vel impedit excepturi voluptas amet. eaque laborum laudantium cumque eum sit! Obcaecati.</p> </div> </div>

Answer 4

如果您无法编辑 html，可能的解决方案如下所示：

ul.what-we-do, 
ul.what-we-do + p {
  float: left;
  box-sizing: border-box;
  width: 50%;
  margin: 0;
  padding: 10px;  //or more or remove this :-) 
}

浮动ul和下一个p离开，你有一个 2 列网格。 （它正在工作，但您可能需要针对移动设备等调整一些东西。）

在我看来，更好的解决方案是像这样编辑 HTML 结构：

 .two-col { display: flex; flex-flow: row; }.two-col ul, .two-col p{ width: 50%; }

 <div id="how-it-works"> <div class="container"> <h2>What We Do</h2> <div class="two-col"> <ul class="what-we-do"> <li>This</li> <li>A little of that</li> <li>Some more of that over there</li> <li>Also this</li> <li>And wrapping up with this</li> </ul> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem ad eveniet explicabo saepe voluptate accusantium neque sint architecto enim, facilis beatae eligendi libero iure similique? Exercitationem commodi ipsa repellendus dolorem illo nobis ad dolor voluptatem iste, Dicta nemo vel impedit excepturi voluptas amet. eaque laborum laudantium cumque eum sit! Obcaecati.</p> </div> </div> </div>