adding columns using flex - css

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>