如何让我的内容偏向 CSS 中的左栏

Question

我有一个显示不同 div 的应用程序，我想设置它的样式以便随着 window 大小的变化，添加和删除列以及动态排列内容列内。我使用媒体查询每隔 400 像素向主容器添加一列，每个 div 的宽度为 400 像素。 However.when 有两列和三列 div 溢出在最右边的列中结束。如何让我的列从左到右填充？

@media (max-width: 1199px) and (min-width: 800px) {
  .main-container {
    column-count: 2;
    padding: 15px;
    margin: 15px;
  }

  .item {
    border: solid black 1px;
    width: 400px;
    -webkit-column-break-inside: avoid;
  }
}

<section class="main-container">

    <div class="item">
        <h2>Title</h2>
        <p>this is a paragrapgh</p>
    </div>

    <div class="item">
        <h2>Title</h2>
        <p>this is a paragrapgh</p>
    </div>

    <div class="item">
        <h2>Title</h2>
        <p>this is a paragrapgh</p>
    </div>

</section>

Answer 1

您可以使用显示网格来实现这一点，当 window 有足够的大小时使用自动填充来添加新列并在 minmax 函数中定义大小。

.main-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 400px));
}

Answer 2

您可以使用网格。现在只要有空闲的 400px space 它就会添加一个新列。

* {
  box-sizing: border-box;
}
.main-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 400px);
  grid-gap: /* Here you can add whatever spacing between items you want */ ;
  padding: 15px;
  margin: 15px;
}
.main-container > .item {
  border: solid black 1px;
  width: 400px;
}

<section class="main-container">
  <div class="item">
    <h2>Title</h2>
    <p>this is a paragrapgh</p>
  </div>
  <div class="item">
    <h2>Title</h2>
    <p>this is a paragrapgh</p>
  </div>
  <div class="item">
    <h2>Title</h2>
    <p>this is a paragrapgh</p>
  </div>
</section>

如何让我的内容偏向 CSS 中的左栏

How do I get my content to favor the left column in CSS

html

css

alignment

multiple-columns

media-queries