如何使用CSS Grid和容器类将其分为两列？

Question

我有一个容器类，需要在整个站点中使用（考虑Bootstrap样式）。我不能将display：grid放在容器上并在其中定义列，因为我需要重用.container。如果我再增加divs的话，那似乎就太过分了。

所以，如何将这个类似的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，请将容器类移至上方的div。同样，您不应该将grid或flex类赋予容器元素。您只能在容器内进行操作。

    <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

只需再给它上一堂课？像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结构，例如：

<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>

和CSS

.two-col {
  display: flex;
  flex-flow: row;
}

.two-col ul,
.two-col p{
  width: 50%;
}