CSS Grid 和 Flex - 超出指定列的内容

Question

我正在尝试使用 css grid 和 flex 创建页面。我已经定义了网格区域并定位了它们。

当我向 blog-post-list 部分添加内容时，内容超出了 <section> 指定区域。

我希望第 3 个和第 4 个 blog-card 框转到下一行，而不是越过一边。如果它有更多的内容，它的高度会增加，它不应该像一个容器吗？

TIA

body{
  color: #000;
  text-align: center;
}

.content{
  display:grid;
  grid-template-columns: repeat(12,1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 2px;;
  max-width:960px;
  margin: 0 auto;
}

.content > *{
  background: #3bbced;
  padding: 30px;
}

header{
  grid-column: 1/13;
}
nav{
  grid-column: 1/13;
}

section{
  grid-column: 1/8;
  grid-row: 3/9;
}
aside{
  grid-column: 8 /13;
  grid-row: 3/9;
}

footer{
  grid-column: 1 / 13;
}

.blog-post-list{
  display: flex;
}

.blog-card{
  border: 1px solid black;
  padding: 20px;
  margin: 15px;
  min-width: 38%;
}

    <div class="content">
    <header>
      header
    </header>
    <nav>
      Navigation
    </nav>
    <section>
      <div class="blog-post-list">
        <div class="blog-card">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

        </div>
        <div class="blog-card">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

        </div>
        <div class="blog-card">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

        </div>
        <div class="blog-card">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

        </div>
      </div>
    </section>
    <aside>
      aside
    </aside>
    <footer>
      Footer
    </footer>     
  </div>

Answer 1

您应该用 flex-wrap 更改此部分。如果你想把所有的都放在同一行，那么你应该给子元素较小的百分比

.blog-post-list{
  display: flex;
  flex-wrap: wrap;
}

body{
  color: #fff;
  text-align: center;
}

.content{
  display:grid;
  grid-template-columns: repeat(12,1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 2px;;
  max-width:960px;
  margin: 0 auto;
}

.content > *{
  background: #3bbced;
  padding: 30px;
}

header{
  grid-column: 1/13;
}
nav{
  grid-column: 1/13;
}

section{
  grid-column: 1/8;
  grid-row: 3/9;
}
aside{
  grid-column: 8 /13;
  grid-row: 3/9;
}

footer{
  grid-column: 1 / 13;
}

.blog-post-list{
  display: flex;
  flex-wrap: wrap;
}

.blog-card{
  border: 1px solid black;
  padding: 20px;
  margin: 15px;
  min-width: 38%;
}

<div class="content">
    <header>
      header
    </header>
    <nav>
      Navigation
    </nav>
    <section>
      <div class="blog-post-list">
        <div class="blog-card">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

        </div>
        <div class="blog-card">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

        </div>
        <div class="blog-card">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

        </div>
        <div class="blog-card">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

        </div>
      </div>
    </section>
    <aside>
      aside
    </aside>
    <footer>
      Footer
    </footer>     
  </div>

CSS Grid 和 Flex - 超出指定列的内容

CSS Grid and Flex - Content going beyond the specified columns

css

flexbox

css-grid