CODEWITHSUNDEEP
htmlcsstwitter-bootstrapgridresponsive-design
sp00m
sp00m

Reputation: 48827

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

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).

Upvotes: 0

Views: 430

Answers (1)

Mohsen Safari
Mohsen Safari

Reputation: 6795

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.

Upvotes: 1

Related Questions