# Product Landing Page centering grid items

**URL:** <https://forum.freecodecamp.org/t/product-landing-page-centering-grid-items/228482>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [September 20, 2018, 2:11pm UTC](https://forum.freecodecamp.org/t/product-landing-page-centering-grid-items/228482 "2018-09-20T14:11:45Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![MarcelPenn](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/marcelpenn/32/115945_2.png) [@MarcelPenn](https://forum.freecodecamp.org/u/MarcelPenn)\
**Post date:** [September 20, 2018, 2:11pm UTC](https://forum.freecodecamp.org/t/product-landing-page-centering-grid-items/228482/1 "2018-09-20T14:11:45Z")

</div>

Hey, need help lining up items within a grid and also the content inside the individual cells. I’m trying to line up the three coloured cells in my project to be a straight column down the middle with the content following suit. I’ve tried a few different things with grid but for some reason it doesn’t seem to effect it at all. Sorry if I didn’t explain it well but any help at all would be appreciated! \*Edit the project [https://codepen.io/MarcelPenn/pen/jvwvjJ](https://codepen.io/MarcelPenn/pen/jvwvjJ)

---

<div class="post-metadata">

**Author:** ![aditya\_p](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/aditya_p/32/99447_2.png) [@aditya\_p](https://forum.freecodecamp.org/u/aditya_p)\
**Post date:** [September 20, 2018, 2:24pm UTC](https://forum.freecodecamp.org/t/product-landing-page-centering-grid-items/228482/2 "2018-09-20T14:24:24Z")

</div>

It is always advisable to provide a link to your project, that we can tinker with your code and offer you help.

---

<div class="post-metadata">

**Author:** ![MarcelPenn](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/marcelpenn/32/115945_2.png) [@MarcelPenn](https://forum.freecodecamp.org/u/MarcelPenn)\
**Post date:** [September 20, 2018, 2:30pm UTC](https://forum.freecodecamp.org/t/product-landing-page-centering-grid-items/228482/3 "2018-09-20T14:30:37Z")

</div>

Oof. It’s already been a long morning. Edited with link to codepen.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [September 20, 2018, 3:05pm UTC](https://forum.freecodecamp.org/t/product-landing-page-centering-grid-items/228482/4 "2018-09-20T15:05:13Z")

</div>

You are missing the “s” in grid-template-columns on the .container.

I’m not sure i understand the layout you are asking for. It sounds like you want to just stack the divs inside the container, but your CSS seems to imply something else, i.e. why have three columns if you only want one. As for aligning the content, that is the text, you should use the parent divs for that, again not sure if you want the text centered or what?

---

<div class="post-metadata">

**Author:** ![MarcelPenn](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/marcelpenn/32/115945_2.png) [@MarcelPenn](https://forum.freecodecamp.org/u/MarcelPenn)\
**Post date:** [September 20, 2018, 4:49pm UTC](https://forum.freecodecamp.org/t/product-landing-page-centering-grid-items/228482/5 "2018-09-20T16:49:40Z")

</div>

Hey, thanks. I had it set at one column at first but was messing with it and forget to change it back. My brain was fried this morning decided to take a little break lol. I’ll mess around with it later and figure it out!

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [March 9, 2021, 11:00am UTC](https://forum.freecodecamp.org/t/product-landing-page-centering-grid-items/228482/6 "2021-03-09T11:00:04Z")

</div>


