Hi!
So I figured out how to build the thee column teams modle for the practicum but I can’t get it to go from 3 to 2 columns…
Can someone help me out with my code?
You need to set flex-wrap: wrap and set CSS media queries (or image widths) for the different screen sizes. Here’s a great reference on how flexbox works: A Complete Guide to CSS Flexbox | CSS-Tricks
Hi @KCozzi,
To achieve this goal, there are multiple ways to get this.
Easiest is to use display: grid with auto-fit columns.
CSS for example
.row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr));
}
If you want to have more controle over it, you can use CSS media queries like this:
.row {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media(max-width: 992px){
.row {
grid-template-columns: repeat(2, 1fr);
}
}
@media(max-width: 480px){
.row {
grid-template-columns: 1fr;
}
}
Check out this codepen demo.