# CMS for Developers: Three Column Module for Practicum

**URL:** <https://community.hubspot.com/t/cms-for-developers-three-column-module-for-practicum/79000>\
**Category:** CMS Development\
**Tags:** starter\
**Created:** [April 10, 2023, 6:19pm UTC](https://community.hubspot.com/t/cms-for-developers-three-column-module-for-practicum/79000 "2023-04-10T18:19:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![KCozzi](https://avatars.discourse-cdn.com/v4/letter/k/f9ae1b/32.png) [@KCozzi](https://community.hubspot.com/u/KCozzi)\
**Post date:** [April 10, 2023, 6:19pm UTC](https://community.hubspot.com/t/cms-for-developers-three-column-module-for-practicum/79000/1 "2023-04-10T18:19:45Z")

</div>

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?

 ![Screen Shot 2023-04-10 at 2.16.55 PM.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/a/4/a44c32cc4a39e7ea1e6fed1feb7609d3bf6b1b07.jpeg)

 ![Screen Shot 2023-04-10 at 2.17.08 PM.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/c/6/c6b5aa4dced3c349c73394596579b7e137c1a821.jpeg)

---

<div class="post-metadata">

**Author:** ![ckrakowski](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ckrakowski/32/44503_2.png) [@ckrakowski](https://community.hubspot.com/u/ckrakowski)\
**Post date:** [April 10, 2023, 8:12pm UTC](https://community.hubspot.com/t/cms-for-developers-three-column-module-for-practicum/79000/2 "2023-04-10T20:12:27Z")

</div>

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](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

---

<div class="post-metadata">

**Author:** ![Indra](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/indra/32/98381_2.png) [@Indra](https://community.hubspot.com/u/Indra)\
**Post date:** [April 11, 2023, 7:20am UTC](https://community.hubspot.com/t/cms-for-developers-three-column-module-for-practicum/79000/3 "2023-04-11T07:20:56Z")

</div>

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

```lia-code-sample
.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:

```lia-code-sample
.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](https://codepen.io/ind88/pen/ZEqGwzM).

[https://codepen.io/ind88/pen/ZEqGwzM](https://codepen.io/ind88/pen/ZEqGwzM)