How to keep boxes on the same line or centered under each other?

Question

I have a section that contains 6 articles. I have sized these article boxes to fit the screen of an iPhone. If the computer screen is large enough I want them to line up side by side like this;

######

But as the screen gets smaller I want them to drop to the line bellow but be centered in the page like these:

#####
  #

####
 ##

###
###

##
##
##

#
#
#
#
#
#

I would prefer an only CSS method to do this, but if there isn't one I will try others. I have searched this site the web and several books and I have not been able to find a way to do this.

you need some sort of css grid layout system – Prashank Jun 24 '15 at 16:08 — Prashank, Jun 24 '15 at 16:08

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

You could set text-align:center to the container, and display:inline-block to the item.

JsFiddle Demo

.wrap {
    text-align: center;
}
.item {
    display: inline-block;
}

<div class="wrap">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
</div>

Further reading - How to remove the space between inline-block elements?

edited May 23 '17 at 11:43

Community

1
1

answered Jun 24 '15 at 16:02

Stickers

75,527
23
147
186

This worked though I did have to remove the spacing between the article elements so there borders would collapse. Other than that it works like a charm thanks. – sjtwiv Jun 24 '15 at 16:15
1

@sjtwiv The white spacing thing is very common with inline elements, you can follow the link above to read more, my favorite solution is using `font-size` tricks. Other than that, `box-sizing:border-box` can be very useful too. – Stickers Jun 24 '15 at 16:18

score -2 · Answer 2 · answered Jun 24 '15 at 15:51

You should look into using a framework, if anything to make everything cross-browser happy. Most frameworks have such a responsive design layout system to do exactly what you need.

My favorite is the Twitter Bootstrap: http://getbootstrap.com/

w3schools also has a lightweight framework you might like if you want more control: http://www.w3schools.com/w3css/default.asp

good luck

How to keep boxes on the same line or centered under each other?

2 Answers2