我想要使用显示网格水平两行答案

【问题标题】：I want two rows horizontally using display grid我想要使用显示网格水平两行
【发布时间】：2022-02-01 22:03:46
【问题描述】：

正如我的标题所说，我想要并排使用显示网格的两行问题是我在使用时无法并排选择两行..

.grid-container {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto;
grid-column-gap:100px;}

它创建两行但垂直和一列。当我使用..

.grid-container {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto auto;
grid-column-gap:100px;}

它像这样并排创建两列和两个垂直行..

到目前为止，这很好，直到我点击我的手风琴按钮时，我点击了这件事发生了..

当我点击我不想要的时，两列都占据了高度。解决这个问题的唯一方法是并排创建两个单独的行。或者任何人都可以提出不同的建议，我现在太累了，无法思考这个问题背后的逻辑。谢谢:)

【问题讨论】：

目前还不能使用网格。 masonry 网格的值仅在 Firefox 实验模式下支持。解决它的最简单方法是使用column-count-property：.grid-container { column-count: 2; column-gap: 100px; }
@tacoshy 我已经尝试过了，但没有得到想要的结果

标签： html css bootstrap-5

【解决方案1】：

我知道您希望使用 display: grid 属性，但我没有找到使用这些属性的方法。我在这里为您提供一个替代，使用display:flex。

我在下面的例子中使用了 Bootstrap 的手风琴。

1)您需要在容器上使用一些display:flex 以使其直接子元素（此处为块/div）彼此相邻。

2) 您需要定义该容器的 2 个子块才能拥有 2 列。您可以使用执行 width:50% 的引导程序的 col-6 来执行此操作。

3) 在这两列中，放置您的手风琴。他们应该采取行动并开放，而不会影响住在另一列的邻居。

这是它视觉上的样子：

如果您愿意，这里有一个使用 Bootstrap 5.1.3 的代码示例：

<html lang="en">
    <head>
        <!-- CSS only -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
      <link rel="stylesheet" href="./styles.css">
        <meta charset="utf-8">
        <title>Document</title>
    
    </head>
    <body>
      <div class="d-flex">
        <div class="col-6">
          <div class="accordion" id="accordion-1">
            <div class="accordion-item">
              <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne-1" aria-expanded="true" aria-controls="collapseOne-1">
                  Accordion Item #1
                </button>
              </h2>
              <div id="collapseOne-1" class="accordion-collapse collapse show" aria-labelledby="headingOne-1" data-bs-parent="#accordion-1">
                <div class="accordion-body">
                  <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="headingTwo-1">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo-1" aria-expanded="false" aria-controls="collapseTwo-1">
                  Accordion Item #2
                </button>
              </h2>
              <div id="collapseTwo-1" class="accordion-collapse collapse" aria-labelledby="headingTwo-1" data-bs-parent="#accordion-1">
                <div class="accordion-body">
                  <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="headingThree-1">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree-1" aria-expanded="false" aria-controls="collapseThree-1">
                  Accordion Item #3
                </button>
              </h2>
              <div id="collapseThree-1" class="accordion-collapse collapse" aria-labelledby="headingThree-1" data-bs-parent="#accordion-1">
                <div class="accordion-body">
                  <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-6">
          <div class="accordion" id="accordion-2">
            <div class="accordion-item">
              <h2 class="accordion-header" id="headingOne-2">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne-2" aria-expanded="true" aria-controls="collapseOne-2">
                  Accordion Item #1
                </button>
              </h2>
              <div id="collapseOne-2" class="accordion-collapse collapse show" aria-labelledby="headingOne-2" data-bs-parent="#accordion-2">
                <div class="accordion-body">
                  <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo-2" aria-expanded="false" aria-controls="collapseTwo-2">
                  Accordion Item #2
                </button>
              </h2>
              <div id="collapseTwo-2" class="accordion-collapse collapse" aria-labelledby="headingTwo-2" data-bs-parent="#accordion-2">
                <div class="accordion-body">
                  <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree-2" aria-expanded="false" aria-controls="collapseThree-2">
                  Accordion Item #3
                </button>
              </h2>
              <div id="collapseThree-2" class="accordion-collapse collapse" aria-labelledby="headingThree-2" data-bs-parent="#accordion-2">
                <div class="accordion-body">
                  <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

          <!-- JavaScript Bundle with Popper -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    </body>
    </html>

-- 更新--

我找到了另一种方法来做你所描述的事情，仍然使用display:flex，但为了尊重你对响应式设计的描述，进行了更多的结构更改：

在手机/平板电脑上：横向设计，两个元素相邻。？手风琴打开时不会影响对方的高度。
在桌面/大屏幕上：垂直设计

这是一个代码示例，如果有帮助，请告诉我（请尝试响应式查看结构更改）。

<html lang="en">
    <head>
        <!-- CSS only -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
      <link rel="stylesheet" href="./styles.css">
        <meta charset="utf-8">
        <title>Document</title>
    
    </head>
    <body>
      <div class="col-12 col-lg-4">
        <div class="row">
          <div class="col-6 col-lg-12">
            <div class="accordion" id="accordion-1">
              <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne-1" aria-expanded="true" aria-controls="collapseOne-1">
                    Accordion Item #1
                  </button>
                </h2>
                <div id="collapseOne-1" class="accordion-collapse collapse show" aria-labelledby="headingOne-1" data-bs-parent="#accordion-1">
                  <div class="accordion-body">
                    <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo-1">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo-1" aria-expanded="false" aria-controls="collapseTwo-1">
                    Accordion Item #2
                  </button>
                </h2>
                <div id="collapseTwo-1" class="accordion-collapse collapse" aria-labelledby="headingTwo-1" data-bs-parent="#accordion-1">
                  <div class="accordion-body">
                    <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree-1">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree-1" aria-expanded="false" aria-controls="collapseThree-1">
                    Accordion Item #3
                  </button>
                </h2>
                <div id="collapseThree-1" class="accordion-collapse collapse" aria-labelledby="headingThree-1" data-bs-parent="#accordion-1">
                  <div class="accordion-body">
                    <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-6 col-lg-12">
            <div class="accordion" id="accordion-2">
              <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne-2">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne-2" aria-expanded="true" aria-controls="collapseOne-2">
                    Accordion Item #1
                  </button>
                </h2>
                <div id="collapseOne-2" class="accordion-collapse collapse show" aria-labelledby="headingOne-2" data-bs-parent="#accordion-2">
                  <div class="accordion-body">
                    <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo-2" aria-expanded="false" aria-controls="collapseTwo-2">
                    Accordion Item #2
                  </button>
                </h2>
                <div id="collapseTwo-2" class="accordion-collapse collapse" aria-labelledby="headingTwo-2" data-bs-parent="#accordion-2">
                  <div class="accordion-body">
                    <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                  </div>
                </div>
              </div>
              <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree-2" aria-expanded="false" aria-controls="collapseThree-2">
                    Accordion Item #3
                  </button>
                </h2>
                <div id="collapseThree-2" class="accordion-collapse collapse" aria-labelledby="headingThree-2" data-bs-parent="#accordion-2">
                  <div class="accordion-body">
                    <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      

          <!-- JavaScript Bundle with Popper -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    </body>
    </html>

【讨论】：

感谢您的努力，但在这不适合我之前我拒绝了这个想法。我上面显示的图片适用于平板电脑和移动视图而不是大屏幕对于大屏幕我希望我的侧边栏垂直在一行一列中，对于移动视图我想要它们（并排分隔成两行和两列）我已经展示了
现在唯一的办法是硬代码，我不这样做，但我必须为平板电脑和移动视图设计另一个侧边栏，并让该侧边栏不显示。
我已经更新了我的答案，仍然使用 flex，但是你给我的描述是为了尊重你的结构变化。对@SheikhFarzaib 有帮助吗？
就是这样。这就是我要的。我真的很感谢你的努力，你做得很好谢谢:)