adding columns using flex

Question

I'm trying to learn more about flex.

I want to add more columns to a flex layout but I can only get two columns.

When I try to add a third column, the div's just stack.

Here's the two col version and my attempt to get a third column...

http://brinsterinc.com/footer.html http://brinsterinc.com/footer1.html

Here's the CSS...

footer[is=footer] {
background: hsl(var(--tertiary));
display: grid;
gap: 3rem;
grid:
    "menu"
    "menu1"
    "menu2"
    "policies"
    "copyright";
padding: clamp(4rem,8vw,8rem) max((100% - 80rem) / 2,4vw);
}
footer[is=footer]>div>ul {
all: unset;
display: flex;
flex-flow: column wrap;
gap: 1rem;
}
footer[is=footer]>div:nth-of-type(1) {
display: flex;
flex-direction: column;
gap: 2rem 4rem;
grid-area: menu;
}
footer[is=footer]>div:nth-of-type(2) {
display: flex;
flex-direction: column;
gap: 2rem 4rem;
grid-area: menu1;
}
footer[is=footer]>div:nth-of-type(3) {
display: flex;
flex-direction: column;
gap: 2rem 4rem;
grid-area: menu2;
}
footer[is=footer]>div:nth-of-type(4) {
grid-area: policies;
}
footer[is=footer]>p {
all: unset;
color: hsl(var(--on-tertiary));
grid-area: copyright;
}

@media (min-width: 50em) {
footer[is=footer] {
grid: "menu menu1 menu2" "copyright policies" / -webkit-max-content 1fr;
grid:
    "menu menu1 menu2"
    "copyright policies" / max-content 1fr;
place-items: start;
}
footer[is=footer]>div:nth-of-type(4)>ul {
-moz-column-gap: clamp(1rem,4vw,2rem);
column-gap: clamp(1rem,4vw,2rem);
flex-direction: row;
}
}

Answer 1

Put a flex wrapper round the items you want to put in a column. I think the grid markup is causing some problems though, you're allocating them to different grid areas and without setting grid-template-rows or grid-auto-rows, the child divs will stack on top of each other.

footer[is=footer] {
  background: hsl(var(--tertiary));
  /* display: grid;
      gap: 3rem;
      grid:
        "menu"
        "menu1"
        "menu2"
        "policies"
        "copyright";
      padding: clamp(4rem, 8vw, 8rem) max((100% - 80rem) / 2, 4vw); */
}

.flexContainer {
  display: flex;
}

.flexContainer div {
  flex: 1 0 auto;
}

footer[is=footer]>div>ul {
  /* all: unset;
      display: flex;
      flex-flow: column wrap;
      gap: 1rem; */
}

footer[is=footer]>div:nth-of-type(1) {
  /* display: flex;
      flex-direction: column;
      gap: 2rem 4rem;
      grid-area: menu; */
}

footer[is=footer]>div:nth-of-type(2) {
  /* display: flex;
      flex-direction: column; */
  /* gap: 2rem 4rem;
      grid-area: menu1; */
}

footer[is=footer]>div:nth-of-type(3) {
  /* display: flex;
      flex-direction: column; */
  /* gap: 2rem 4rem;
      grid-area: menu2; */
}

footer[is=footer]>div:nth-of-type(4) {
  /* grid-area: policies; */
}

footer[is=footer]>p {
  /* all: unset;
      color: hsl(var(--on-tertiary));
      grid-area: copyright; */
}


/* @media (min-width: 50em) {
      footer[is=footer] {
        grid: "menu menu1 menu2""copyright policies" / -webkit-max-content 1fr;
        grid:
          "menu menu1 menu2"
          "copyright policies" / max-content 1fr;
        place-items: start;
      }

      footer[is=footer]>div:nth-of-type(4)>ul {
        -moz-column-gap: clamp(1rem, 4vw, 2rem);
        column-gap: clamp(1rem, 4vw, 2rem);
        flex-direction: row;
      }
    } */

<footer is="footer">
  <div class="flexContainer">
    <div>
      <ul>
        <li>
          <a href="">
            link
          </a>
        </li>
        <li>
          <a href="">
            link
          </a>
        </li>
        <li>
          <a href="">
            link
          </a>
        </li>
        <li>
          <a href="">
            link
          </a>
        </li>
        <li>
          <a href="">
            link
          </a>
        </li>
        <li>
          <a href="">
            link
          </a>
        </li>

      </ul>
    </div>
    <div class="oakhide">
      <ul>

        <li>
          <a href="">
            link
          </a>
        </li>
        <li>
          <a href="">
            link
          </a>
        </li>
        <li>
          <a href="">
            link
          </a>
        </li>
        <li>
          <a href="">
            link
          </a>
        </li>
        <li>
          <a href="">
            link
          </a>
        </li>
        <li>
          <a href="">
            link
          </a>
        </li>

      </ul>

    </div>
    <div>
      <ul>

        <li>
          <a href="">
            link
          </a>
        </li>
        <li>
          <a href="">
            link
          </a>
        </li>
        <li>
          <a href="">
            link
          </a>
        </li>
        <li>
          <a href="">
            link
          </a>
        </li>
        <li>
          <a href="">
            link
          </a>
        </li>
        <li>
          <a href="">
            link
          </a>
        </li>

      </ul>

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

      <li>
        <a href="">
            link
          </a>
      </li>
      <li>
        <a href="">
            link
          </a>
      </li>
      <li>
        <a href="">
            link
          </a>
      </li>
      <li>
        <a href="">
            link
          </a>
      </li>
      <li>
        <a href="">
            link
          </a>
      </li>
      <li>
        <a href="">
            link
          </a>
      </li>

    </ul>
  </div>
  <p><small>Copyright © 2022</small></p>
</footer>