CSS Grid and Flex – Content going beyond the specified columns

May 14, 2022

I’m trying to create a page using css grid and flex. I have defined the grid areas and positioned them.

When I’m adding content to blog-post-list section contents goes beyond <section> the specified area.

I’m expecting 3rd and 4th blog-card boxes to go to next row rather than going across the aside. Shouldn’t it act like a container if it has more content its height get increase ?

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>

>Solution :

Is this what you’re trying to achieve?

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

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

footer{
  grid-column: 1 / 13;
}

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

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

.blog-card{
  border: 1px solid black;
  padding: 20px;
  margin: 15px;
  flex-basis: 100%;
}

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