Fixed cols width, number of cols/rows depending on the screen width

Question

Using Bootstrap 3, I'm looking for a grid layout where the columns widths were fixed on any screen resolution (let's say 200 px), but their number were depending on the screen width.

In other words, I know the width of the columns, but I don't know how many columns I'll have per lines, because it will depend on the screen width. The margins between the cells will then also depend on the screen width.

When the screen has a large width, there must be many columns but few lines:

 ______________________________________________________________
|   ___________    ___________    ___________    ___________   |
|  |           |  |           |  |           |  |           |  |
|  |    #1     |  |    #2     |  |    #3     |  |    #4     |  |
|  |<- 200px ->|  |<- 200px ->|  |<- 200px ->|  |<- 200px ->|  |
|  |           |  |           |  |           |  |           |  |
|  |___________|  |___________|  |___________|  |___________|  |
|   ___________                                                |
|  |           |                                               |
|  |    #5     |                                               |
|  |<- 200px ->|                                               |
|  |           |                                               |
|  |___________|                                               |
|______________________________________________________________|

When the screen has a small width, there must be few columns but many lines.

               ________________________________
              |   ___________    ___________   |
              |  |           |  |           |  |
              |  |    #1     |  |    #2     |  |
              |  |<- 200px ->|  |<- 200px ->|  |
              |  |           |  |           |  |
              |  |___________|  |___________|  |
              |   ___________    ___________   |
              |  |           |  |           |  |
              |  |    #3     |  |    #4     |  |
              |  |<- 200px ->|  |<- 200px ->|  |
              |  |           |  |           |  |
              |  |___________|  |___________|  |
              |   ___________                  |
              |  |           |                 |
              |  |    #5     |                 |
              |  |<- 200px ->|                 |
              |  |           |                 |
              |  |___________|                 |
              |________________________________|

What are the solutions?

I tried the Bootstrap grid system, but you still have to specify the number of cols per row (or I didn't get how to use it).

Mohsen Safari Mohsen Safari · Accepted Answer · 2013-11-25T11:03:07

grid systems are for create responsive sections and put them over or side of each other, but what you are looking for is not responsive, your elements are fixed. I think you can do it easily with simple style. for example put all of your elements in a single column with full width and then style them.

div{
    width:100px;
    height:100px;
    background:#aaa;
    margin:15px;
    float:left;
}

here is DEMO.

Fixed cols width, number of cols/rows depending on the screen width

1 Answers