Layout - CSS question

[harpkit]

I'm trying to center content using within grids using the Shadows CSS framework.

If I start with this code -

<div class="o-layout o-layout--wide u-grids-1 u-grids-2--m">
     <div class="o-layout__item">
          <div>Still More Content</div>
     </div>
     <div class="o-layout__item">
          <div>Still More Content</div>
     </div>
</div>

I get a nice two column layout where each column takes up half the screen. The "Still More Content" ends up hugging the left side of each column but I would like that to be centered in each column. It looks like I should be able to add the o-layout--justify-center class to center that content. I've put that class in every div in that code and it doesn't do anything. What am I missing?

Thanks.
Matt

[Matt Zimmermann]

Hi Matt,

If you are looking to center the contents, you should be able to add "u-text-center" to the layout DIV or to the layout items.

[harpkit]

A. That was fast.
B. It worked! Thank you.

One follow up question - in what context would I use o-layout--justify-center ?

[Matt Zimmermann]

Hi Matt,

The justify-content property horizontally aligns the flexible container's items when the items do not use all available space on the main-axis. Using "o-layout--justify-center", items are positioned at the center of the container.

[harpkit]

I think I get it now. Thanks again.