# How do I make my cards turn into columns

**URL:** <https://forum.freecodecamp.org/t/how-do-i-make-my-cards-turn-into-columns/478673>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [September 21, 2021, 4:55pm UTC](https://forum.freecodecamp.org/t/how-do-i-make-my-cards-turn-into-columns/478673 "2021-09-21T16:55:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kasakapen](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kasakapen/32/229778_2.png) [@Kasakapen](https://forum.freecodecamp.org/u/Kasakapen)\
**Post date:** [September 21, 2021, 4:55pm UTC](https://forum.freecodecamp.org/t/how-do-i-make-my-cards-turn-into-columns/478673/1 "2021-09-21T16:55:40Z")

</div>

I tried display flex, column, and made the width: 100%, but none of them seem to work… well it works but then, it turns to this:

 ![image](https://global.discourse-cdn.com/freecodecamp/original/3X/0/e/0e486890fc5bb8f0b33ad0138fcbf31fa8549ffb.png)  
I am trying to make it like this:  
[![](https://res.cloudinary.com/dz209s6jk/image/upload/q_auto:good,w_900/Challenges/jua3vpavrjnnhbmvo7er.jpg) ](https://res.cloudinary.com/dz209s6jk/image/upload/q_auto:good,w_900/Challenges/jua3vpavrjnnhbmvo7er.jpg)

Thanks in advance

---

<div class="post-metadata">

**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\
**Post date:** [September 21, 2021, 5:03pm UTC](https://forum.freecodecamp.org/t/how-do-i-make-my-cards-turn-into-columns/478673/2 "2021-09-21T17:03:42Z")

</div>

I think we need to be able to see what you have done in order to help the best. Link please?

If each card is a block level element, such as a div, then they should line up on top of each other naturally and you shouldn’t need to do anything special to get this arrangement. It’s when you want to put them side-by-side that you need some CSS magic.

---

<div class="post-metadata">

**Author:** ![Kasakapen](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kasakapen/32/229778_2.png) [@Kasakapen](https://forum.freecodecamp.org/u/Kasakapen)\
**Post date:** [September 21, 2021, 5:05pm UTC](https://forum.freecodecamp.org/t/how-do-i-make-my-cards-turn-into-columns/478673/3 "2021-09-21T17:05:39Z")

</div>

[https://website-project-1.nanakobi-genfi.repl.co/](https://website-project-1.nanakobi-genfi.repl.co/)  
sorry forgot the link

---

<div class="post-metadata">

**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\
**Post date:** [September 21, 2021, 5:11pm UTC](https://forum.freecodecamp.org/t/how-do-i-make-my-cards-turn-into-columns/478673/4 "2021-09-21T17:11:13Z")

</div>

I’d take a look at the width you are placing on each card.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [March 23, 2022, 5:11am UTC](https://forum.freecodecamp.org/t/how-do-i-make-my-cards-turn-into-columns/478673/5 "2022-03-23T05:11:24Z")

</div>

Closed on March 23, 2022, 5:11am UTC

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.