Elements not wrapping in CSS Grid

Question

Hello everyone,

Pretty new into web development, I'm trying to learn how to use the beautiful css grid tool, but I'm actually stuck with this:

I want my cards to auto-flow one by one in the next row (with the same column-template), but I'm actually only seeing one card in my browser.

I was thinking the issue is with my .wrapper height in vh. I tried px and %, but I'm really stuck to find a solution.

I really would appreciate if someone have an idea about the issue, or any comment regarding my (bad... or good ?) way of coding !

/* Just some horrible stylization to better see boxes */

body {
  padding: 0px;
  margin: 0px;
}

div {
  background-color: #f1c40f;
  border: 1px solid white;
}

/* Definition of the 3 grids used*/

.wrapper {
  height: 100vh;
  box-sizing: border-box;
  display: grid;
  align-content: stretch;
  justify-content: stretch;
  grid-template-columns: 2fr 1fr 3fr 1fr 3fr 1fr 2fr;
  grid-template-rows: 1fr 5fr 1fr;
  grid-template-areas: "header header header header header header header"
                       "main main main main main main main"
                       "footer footer footer footer footer footer footer"
}

.main {
  grid-area: main;
  display: grid;
  grid-template-columns: 60px 7fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "sidebar box-content box-content";
}

/* This box-content's grid-template-columns have many ones, it is done to modify
only the grid-template-areas with media-queries for larger screen*/

.box-content {
  grid-area: box-content;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr;
  grid-template-rows: 1fr 7fr 1fr;
  grid-auto-flow: row;
  grid-template-areas: ". . . . . . . . ."
                       ". card card card card card card card."
                       ". . . . . . . . .";
}

/* Definition of the different element's grid-area*/

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}


.card {
  grid-area: card;
}

.footer {
  grid-area: footer;
}

 <!-- I apologize for non-semantic tags, only a quick prototyping -->

  <div class="wrapper">
    <div class="header"> Header Header Header Header Header</div>
    <div class="main">
      <div class="sidebar">Sidebar Sidebar </div>
      <div class="box-content">
        <div class="card"> Card Card Card Card Card Card </div>
        <div class="card"> Card Card Card Card Card Card </div>
        <div class="card"> Card Card Card Card Card Card </div>
        <div class="card"> Card Card Card Card Card Card </div>
      </div>
    </div>
    <div class="footer"> Footer Footer Footer Footer Footer </div>
  </div>

Thanks

Answer 1

For your cards to wrap, row-by-row, use the auto-fit and minmax functions.

Here's a full explanation: Getting columns to wrap in CSS Grid

Here's a basic demo: jsFiddle (re-size the browser width to see the effect)

Here's the demo code:

.wrapper {
  height: 100vh;
  display: grid;
  align-content: stretch;
  justify-content: stretch;
  grid-template-columns: 2fr 1fr 3fr 1fr 3fr 1fr 2fr;
  grid-template-rows: 1fr 5fr 1fr;
  grid-template-areas: "header header header header header header header"
                       "main main main main main main main"
                       "footer footer footer footer footer footer footer"
}

.main {
  grid-area: main;
  display: grid;
  grid-template-columns: 60px 7fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "sidebar box-content box-content";
}

.box-content {
  grid-area: box-content;
  align-items: start;
  align-content: start;
  display: grid;
  grid-gap: 10px;
  padding: 10px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }


body {
  padding: 0px;
  margin: 0px;
}

div {
  background-color: #f1c40f;
  border: 1px solid white;
}
* { 
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="header"> Header Header Header Header Header</div>
  <div class="main">
    <div class="sidebar">Sidebar Sidebar </div>
    <div class="box-content">
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>      
    </div>
  </div>
  <div class="footer"> Footer Footer Footer Footer Footer </div>
</div>

Answer 2

/* Just some horrible stylization to better see boxes */

body {
  padding: 0px;
  margin: 0px;
}

div {
  background-color: #f1c40f;
  border: 1px solid white;
}

/* Definition of the 3 grids used*/

.wrapper {
  height: 100%;
  box-sizing: border-box;
  
  align-content: stretch;
  justify-content: stretch;
  grid-template-columns: 2fr 1fr 3fr 1fr 3fr 1fr 2fr;
  grid-template-rows: 1fr 5fr 1fr;
  grid-template-areas: "header header header header header header header"
                       "main main main main main main main"
                       "footer footer footer footer footer footer footer"
}

.main {
  grid-area: main;
  display: grid;
  grid-template-columns: 60px 7fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "sidebar box-content box-content";
}

/* This box-content's grid-template-columns have many ones, it is done to modify
only the grid-template-areas with media-queries for larger screen*/

.box-content {
  grid-area: box-content;
  grid-template-rows: 1fr 7fr 1fr;
  grid-auto-flow: row; padding:20px;
  
  
}

/* Definition of the different element's grid-area*/

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}


.card-1 {
  display: grid;
  width: 100%; margin-bottom:20px; min-height:500px;
 
  
}

.footer {
  grid-area: footer;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Layout 1</title>
</head>
<body>

  <!-- I apologize for non-semantic tags, only a quick prototyping -->

  <div class="wrapper">
    <div class="header"> Header Header Header Header Header</div>
    <div class="main">
      <div class="sidebar">Sidebar Sidebar </div>
      <div class="box-content">
        <div class="card-1"> Card Card Card Card Card Card </div>
        <div class="card-1"> Card Card Card Card Card Card </div>
        <div class="card-1"> Card Card Card Card Card Card </div>
        <div class="card-1"> Card Card Card Card Card Card </div>
      </div>
    </div>
    <div class="footer"> Footer Footer Footer Footer Footer </div>
  </div>
</body>
</html>

can you please check your solution

and more example - https://gridbyexample.com/examples/