Html Question posted in
Some basic documentation can be found here.

Html – How to create 4 flex box containers per row

I am simply looking to move the 8 flex box items I have (name: products-box) to 4 per row. Here is what I have so far:

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body{
    min-height: 100vh;
}
header{
    height: 80px;
    display: flex;
    background-color: lightblue;
}
.products-container{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.products-box{
    width: 200px;
    height: 200px;
    background-color: lightpink;
    color: white;
    font-size: 20px;
    text-align: center;
    line-height: 200px;
}
.main-container{
    display: flex;
    min-height: 100vh;
}
.nav-sidebar{
    min-width: 150px;
    background-color: lightgray;
}
.inner-text{
    font-weight: 600;
    font-size: 24px;
    margin: auto;
}
<header>
    <span class="inner-text">Header</span>
</header>
<div class="main-container">
    <aside class="nav-sidebar" id="nav-container">
        <span class="inner-text">Sidebar</span>
    </aside>
    <div class="products-container">
        <div class="products-box">
            Item1
        </div>
        <div class="products-box">
            Item2
        </div>
        <div class="products-box">
            Item3
        </div>
        <div class="products-box">
            Item4
        </div>
        <div class="products-box">
            Item5
        </div>
        <div class="products-box">
            Item6
        </div>
        <div class="products-box">
            Item7
        </div>
        <div class="products-box">
            Item8
        </div>
    </div>
</div>

I am trying to get the flexbox labeled products-box to be 4 per row, and be even if not.

Tags:

3

Answers


  1. 0

    Try tweaking your .products-box in your css a little bit:

    .products-box {
    flex: 0 0 25%; /* Set flex basis to 25% */
    max-width: 25%; /* Restrict maximum    width to 25% */
    height: 200px;
    background-color: lightpink;
    color: white;
    font-size: 20px;
    text-align: center;
    line-height: 200px;
}

    Hope that helps 🙂

    Login or Signup to reply.
  2. 0

    Since a parent container/row has a width of 100%.

    To have 4 product-boxes per row, each product-box should occupy 25% of the its parent element.

    Check it out below code:

        *{
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    body{
        min-height: 100vh;
    }
    header{
        height: 80px;
        display: flex;
        background-color: lightblue;
    }
    .products-container{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .products-box{
        width: 25%;
        height: 200px;
        background-color: lightpink;
        color: white;
        font-size: 20px;
        text-align: center;
        line-height: 200px;
    }
    .main-container{
        display: flex;
        min-height: 100vh;
    }
    .nav-sidebar{
        min-width: 150px;
        background-color: lightgray;
    }
    .inner-text{
        font-weight: 600;
        font-size: 24px;
        margin: auto;
    }
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <span class="inner-text">Header</span>
    </header>
    <div class="main-container">
        <aside class="nav-sidebar" id="nav-container">
            <span class="inner-text">Sidebar</span>
        </aside>
        <div class="products-container">
            <div class="products-box">
                Item1
            </div>
            <div class="products-box">
                Item2
            </div>
            <div class="products-box">
                Item3
            </div>
            <div class="products-box">
                Item4
            </div>
            <div class="products-box">
                Item5
            </div>
            <div class="products-box">
                Item6
            </div>
            <div class="products-box">
                Item7
            </div>
            <div class="products-box">
                Item8
            </div>
        </div>
    </div>
</body>
</html>
    Login or Signup to reply.
  3. 0

    For displaying products, I prefer a grid. The snippet below demonstrates a grid with a fixed number of columns.

    * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  min-height: 100vh;
}

header {
  height: 80px;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

.products-container {
  width: 100%;
  height: auto;
  padding: 1em;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
  align-self: start;
}

.products-box {
  aspect-ratio: 1;
  background-color: lightpink;
  color: white;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-container {
  display: flex;
  min-height: 100vh;
}

.nav-sidebar {
  min-width: 150px;
  background-color: lightgray;
  text-align: center;
  padding-top: 1em;
}

.inner-text {
  font-weight: 600;
  font-size: 24px;
}
    <header>
  <span class="inner-text">Header</span>
</header>
<div class="main-container">
    <aside class="nav-sidebar" id="nav-container">
        <span class="inner-text">Sidebar</span>
    </aside>
    <div class="products-container">
        <div class="products-box">
            Item1
        </div>
        <div class="products-box">
            Item2
        </div>
        <div class="products-box">
            Item3
        </div>
        <div class="products-box">
            Item4
        </div>
        <div class="products-box">
            Item5
        </div>
        <div class="products-box">
            Item6
        </div>
        <div class="products-box">
            Item7
        </div>
        <div class="products-box">
            Item8
        </div>
    </div>
</div>

    The potential problem with this is that the size of each product box varies greatly depending on the screen width. If you want to keep the size of the product boxes more consistent and instead vary the number of products in each row, you could use an auto-fill.

    .products-container {
  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search