1

I guess I have the simplest problem ever and cannot find a ready solution.

I need to make a grid with fixed widths and a fixed distance between them.

I need x columns a 400px (x = total width/400), and during browser resizing, I would need this grid to shrink, column by column (columns must always keep their width size and distance between them).

The content flows over all columns and should spread out over all columns.

That's why I don't like any open-source grid system (Bootstrap, Skeleton, etc.) they all use %width, and columns always change the width on resizing.

What would be the simplest way?

Edit/Clarification:

This is how it looks without columns: http://jsfiddle.net/xjrt8qrm/16/show/

<div>See the fiddle</div>

I want it to have x columns. x is the maximum possible amount of 400px columns, depending on the user's resolution. I want only one row of columns, so the content spreads like on a newspaper from top to bottom.

So it will look somehow like this on a PC: https://i.stack.imgur.com/ycF2m.png (You can ignore the text/comments there).

Priyanka Vadhwani
  • 991
  • 7
  • 10
Visawie
  • 43
  • 2
  • 2
  • 7
  • 1
    i find isotope good for this kinda stuff http://isotope.metafizzy.co/ – Shan Robertson Mar 20 '15 at 18:48
  • I'm looking for some help/first steps or a tutorial that uses fixed-width columns and possibly media queries for the breakpoints. – Visawie Mar 20 '15 at 19:01
  • Technically you could use Bootstrap if you wanted to, it can handle fixed-fluid design. http://stackoverflow.com/questions/8740779/how-to-build-a-2-column-fixed-fluid-layout-with-twitter-bootstrap – DACrosby Mar 20 '15 at 19:06
  • Well... I did answer the question but rereading the question I have doubts. You want a fixed width, and fixed margin... how can you expect the grid to "shrink" when resizing if the margin and width of the columns are fixed? – Alvaro Menéndez Mar 20 '15 at 19:06
  • @Alvaro The height isn't fixed and the width also isn't - only the column-width. So it shrinks, because there will be less columns if the resolution gets smaller. The content spreads over less columns. – Visawie Mar 20 '15 at 19:32

3 Answers3

0

It's pretty simple. The container holds the contents together. Float left will cause them to line up left to right. When the container runs out of space to hold them, they'll drop from the right to a row below one at a time. The clear div clears out the float so that it doesn't propagate to other nearby classes. Obviously, you'll have to handle padding, margins, etc as your style dictates.

If you needed newspaper like vertical layout, you could try a solution like this one

You could use media queries in this manner or even overflow:none to hide columns that didn't fit if that was your desired behavior.

Here's a simple solution:

HTML:

<div class="container">
      <div class="fourhundred">
          Div 1
      </div>
      <div class="fourhundred">
          Div 2
      </div>
      <div class="fourhundred">
          Div 3
      </div>
      <div class="clear"></div>
    </div>

CSS:

.fourhundred { 
  width: 400px;
  margin: 10px;
  float: left;
}
.clear { clear:left }
.container { width: 100% }
Community
  • 1
  • 1
bpeterson76
  • 12,918
  • 5
  • 49
  • 82
  • That was very well explained. Thank you. I still have some questions. 1. Why do I need to put everything into multiple fourhundred containers? Ideally I'd wrap one container around everything and let it split the thing wherever it wants to. The problem with this solution is (if I understood it correctly) that if "Div 2" would be very long it would never split. I want the content spread equally over all columns if that makes sense. Currently it's packed in sections, which doesn't work well for me. I can provide a jsfiddle if I don't make much sense. Edit: Yes, I'm looking for a vertical layout. – Visawie Mar 20 '15 at 19:18
  • The newspaper like layout seems ideal, but for me it doesn't seem to work. I only have one column. Guess there must be something in my document that prevents that. – Visawie Mar 20 '15 at 19:25
  • Regions would be the way to go, but my understanding is that they're not terribly advanced on the CSS3 roadmap yet. Perhaps that's changed. Here's an example that would make it REALLY easy: http://www.inserthtml.com/2012/10/css3-regions-flow/ Absent that, you might try columnizer which is a JQuery plugin that does some more advanced content splitting so you don't have to. – bpeterson76 Mar 20 '15 at 19:53
  • Thanks @bpeterson76. I'll check out that example. I tried columnizer - it's great, but sadly it doesn't work how I want in my case, because I use a lot of tables and that breaks it. :( See: [This](http://stackoverflow.com/questions/28990763/how-to-prevent-a-column-break-between-a-heading-and-the-first-row-of-a-table) & [this](http://stackoverflow.com/questions/27441957/responsive-columns-and-the-columnizer-plugin-how-can-i-stop-the-text-from-wrap) question. Nobody could help - so at the end I decided to do it only with CSS.) – Visawie Mar 20 '15 at 20:07
0

This is why flexbox have been designed. Add to your container:

.container {
  display: flex;
  justify-content: space-between;
  align-content: space-between;
    width:100%;
}

as in this Fiddle

Alvaro Menéndez
  • 8,766
  • 3
  • 37
  • 57
  • Flex boxes are great, but my understanding is that he didn't want the 400 px columns to be anything but 400px.... – bpeterson76 Mar 20 '15 at 19:47
  • @bpeterson76 Well said. Exactly that. (I edited the top question to make it a bit clearer). – Visawie Mar 20 '15 at 19:53
  • Well, this answer may not be the good one, but in my example the colums will always be the width you want. In the fiddle is 50px (I set it at 50 insteed of 400px for a more visual understanding of the example) what it changes is the margin between the columns to always adapt to the container width. Then if the window width is smaller than the number of colums width there wont' be margins and colums will stack one over the others (that's when media queries may take effect easily... 6 colums, 400px each, at 2400px window width you need to set up your queries to start and so on...) – Alvaro Menéndez Mar 20 '15 at 22:11
0

Simply used width: calc(100% / 3); you can use any value instead of 3. Divided the whole width into 3.

here is the Fiddle Demo

<div id = "main">
    <div id ="sub">One
    </div>
    <div id ="sub">Two
    </div>
    <div id ="sub">Three
    </div>
</div>

CSS Part

#main{
    border: 2px solid black;
    height:100px;
    width:100%;
    position: relative;
    display:flex;
}
#sub{
    border:1px solid red;
    width: calc(100% / 3);
    height: calc(100% - 40px);
    padding:10px;
    margin : 5px;   
    display:inline-block;
}
Anjula Ranasinghe
  • 584
  • 1
  • 9
  • 24
  • I said I don't want a percentage - rather a fixed size for the subs. Sorry if I didn't explain it well enough? – Visawie Mar 20 '15 at 19:36