Nested Flexbox Grid

Nested Flexbox Grid

The simplest in this case would be to update the grid rule and either use a border

.flex-grid {
  .item {
    flex: 1;
    min-height: 150px;
  }
  .item--primary, .item--secondary, .item--tertiary {
    border: 2px solid white;
  }
}

or a margin (fiddle)

Stack snippet

.flex-grid .item {  flex: 1;  min-height: 150px;}
.flex-grid .item--primary,.flex-grid .item--secondary,.flex-grid .item--tertiary {  margin: 2px;  background: lightgray;}
.flex-grid .item--primary {  margin-bottom: 0;}
.flex__direction--column {  display: flex;  flex-direction: column;  -ms-flex-direction: column;  -webkit-flex-direction: column;}
.flex__direction--row {  display: flex;  flex-direction: row;  -ms-flex-direction: row;  -webkit-flex-direction: row;}

<!-- Product Grid --><div class="flex-grid">  <div class="flex__direction--column">    <div class="flex__direction--row">
      <!-- Primary Gateway -->      <div class="item item--primary">        <div class="item__description">          <h3>Primary Gateway</h3>          <p>It is a long established fact that a reader will be distracted by the readable.</p>        </div>      </div>
      <div class="item flex__direction--column">        <!-- Secondary Gateway -->        <div class="item item--secondary">          <div class="item__description">            <h4>Secondary Gateway</h4>            <p>It is a long established fact that a reader will be distracted by the readable.</p>          </div>        </div>        <div class="item">          <div class="flex__direction--row">            <!-- Tertiary Gateway -->            <div class="item item--tertiary">              <div class="item__description">                <h5>Tertiary Gateway</h5>                <p>It is a long established fact that a reader will be distracted by the readable.</p>              </div>            </div>            <!-- Tertiary Gateway -->            <div class="item item--tertiary">              <div class="item__description">                <h5>Tertiary Gateway</h5>                <p>It is a long established fact that a reader will be distracted by the readable.</p>              </div>            </div>          </div>        </div>      </div>    </div>  </div></div>

How to use nested flexbox to make grid

What you are missing is flex: 1 or flex-grow: 1 in .split-v > .flex-row which will fit div in its content.

#container {  height: 300px;  width: 300px;}.split-h {  display: flex;  flex-direction: row;  height: 100%;}
.split-h > .debug {  border: 1px dotted grey;}
.split-h > .flex-col {  flex: 1;  height: 100%}
.split-v {  display: flex;  flex-direction: column;  width: 100%;  flex: 1;}
.split-v > .debug {  border: 1px dotted red;}
.split-v > .flex-row {  overflow: auto;  width: 100%;  flex: 1;}

<div id="container">  <div class="split-h">    <div class="debug flex-col left">    </div>    <div class="debug flex-col right split-v">      <div class="split-v">        <div class="debug flex-row top">        </div>        <div class="debug flex-row bottom">        </div>      </div>    </div>  </div></div>

struggling with a nested flexbox grid

Here's one method that may work for you:

(No changes to the HTML.)

.block {  display: flex;  height: 100vh;  background: grey;}
.column {  display: flex;  flex-wrap: wrap;  width: 50%;}
.box_big {  flex-basis: 100%;  height: 70%;  background-color: chartreuse;  border: solid 1px black;}
.box_small {  flex: 0 0 50%;  height: 35%;  background-color: aqua;  border: solid 1px black;}
.box_long {  flex-basis: 100%;  height: 30%;  background-color: violet;  border: solid 1px black;}
* {  margin: 0;  box-sizing: border-box;}

<div class="block">  <div class="column">    <div class="box_long"></div>    <div class="box_big"></div>  </div>  <div class="column">    <div class="box_small"></div>    <div class="box_small"></div>    <div class="box_small"></div>    <div class="box_small"></div>    <div class="box_long"></div>  </div></div>

Flexbox, nested grid/child

Update your code like below:

.grid-stretch {
  display: flex;
  align-items: stretch;
  background-color: yellow; /* to track errors */
}

.child-centered  {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;
  background-color: green; /* to track errors */
}
/* added */
.flex {
  display: flex;
}
.flex  *{
  flex-grow:1;
}
/**/
html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow-wrap: break-work;
}

.root {
  max-width: 1200px;
  height: 100%;
}

header {
  min-height: 80px;
  /* set a solid border inside the header and not on its edge */
  box-sizing: border-box;
  border-bottom: 3px solid black;
}

/* depth 1 */
header nav:nth-child(1) {
  flex: 3;
  background-color: blue;
}

header nav:nth-child(2) {
  flex: 5;
  background-color: white;
}

header nav:nth-child(3) {
  flex: 2;
  background-color: red;
}

/* depth 2 */
header nav:nth-child(2) div {
  background-color: orange;
}

header nav:nth-child(3) div div {
  background-color: orange;
}

<!DOCTYPE html>
<html>

<body>
  <div class='root'>
    <header class='grid-stretch'>

      <nav class="flex">
        <a class="child-centered">link</a>
      </nav>

      <nav class="flex">
        <div class='grid-stretch'>
          <div class='child-centered'>
            <a>link</a>
            <a>link</a>
            <a>link</a>
          </div>
        </div>
      </nav>

      <nav class="flex">
        <div class='grid-stretch'>
          <div class='child-centered'>
            <a>link</a>
            <a>link</a>
            <a>link</a>
          </div>
        </div>
      </nav>
    </header>

  </div>
</body>

</html>

flex-direction not working in nested flexbox grid

In your code, .work__container is a flex container. It has display: flex.

But .work__flex is not a flex container. It doesn't have display: flex or display: inline-flex.

Therefore, flex-direction, which only applies to flex containers, is being ignored in .work__flex. For the same reason, flex-wrap is also being ignored in .work__flex.

Here's a more complete explanation: Proper use of flex properties when nesting flex containers

Creating a space between flex items in nested flexbox

Set Width of nav-links or use column-gap

        .navbar-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .nav-links {
            width: 300px;
            // column-gap: 30px;
            display: flex;
            justify-content: space-between;
        }
 

<!DOCTYPE html>
<html lang="en">

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

    <div class="navbar-container">
        <a href="index.html">
            <div class="logo">
                <img src="./media/logo.svg" alt=" logo" height="80px" width="80">
            </div>
        </a>
        <ul class="nav-links">
            <li class="nav-link">
                <a href="#">Install</a>
            </li>
            <li class="nav-link">
                <a href="#">Learn</a>
            </li>
            <li class="nav-link">
                <a href="#">item</a>
            </li>
            <li class="nav-link">
                <a href="#">item</a>
            </li>

            <li class="nav-link">
                <a href="#">item</a>
            </li>

        </ul>
    </div>
</body>

</html>

---

Related Topics