hi,

I need to build a web page with a grid with a number of columns proportional to the browser window width.

If I have more columns, as a consequence I'm going to have less rows.

How do u suggest to implement it ?

thanks

5 answers

1
point

I believe you would just want to float each row to the left inside their containing element:

/* CSS */
.container {width: 75%}
.column {float: left}

/* HTML */
<div class="container">
    <div class="column">One</div>
    <div class="column">Two</div>
    <div class="column">Three</div>
</div>
Answered almost 7 years ago by Matt Milburn
  • This method is using float to wrap/unwrap the column divs to more/less 'rows' if the container's width changes with the browser window. So the number of column is not fixed. +1 o.k.w almost 7 years ago
0
points

thanks for reply.

But in your example the number of columns is fixed right ? I actually need to change the number of columns according to the browser width.

Answered almost 7 years ago by Patrick
  • @Patrick, see my comment to Matt's answer. His method is one of many ways to accomplish what you described. Might not be exactly what you want unless you can be more specific. Try to respond by commenting to his answer instead of adding new answer :) o.k.w almost 7 years ago
0
points

I'd recommend using media queries. Elsewise, you could use something like Automatic Multi Columns.

Answered almost 7 years ago by Anthony Lemmer
  • is the link working ? I had some problems to open it Patrick almost 7 years ago
  • The link looks fine to me :) o.k.w almost 7 years ago
Mottie 1134
0
points

What are your parameters?

  • How big is the grid?
  • Whats the max number of columns?
  • Would you consider just using a table?
  • Can you use javascript to adjust the sizes or are you asking for a CSS only solution?
  • If using javascript do you want it to degrade gracefully if disabled?
  • Are you using php?
  • What do you mean by "If I have more columns, as a consequence I'm going to have less rows."? Do the rows get pushed out of the view port? Do you remove the extra rows?
Answered almost 7 years ago by Mottie
0
points

How big is the grid? It depends on the number of elements

Whats the max number of columns? There is not a max

Would you consider just using a table? No, at the moment I'm using a simple html list. I also tried other structures using drupal CMS (grid, table), but the best thing seems to use 1 column, and then float:left, since i want it to dynamically change

Can you use javascript to adjust the sizes or are you asking for a CSS only solution? Javascript is fine. The sizes of the columns are fixed, I don't care if there is empty space on the right.

If using javascript do you want it to degrade gracefully if disabled? No, it is not necessary

Are you using php? yes drupal CMS

What do you mean by "If I have more columns, as a consequence I'm going to have less rows."? Do the rows get pushed out of the view port? Do you remove the extra rows?

well if I have N elements and I add a column, the content has to flow into the last column, and as consequence I have less rows

Anyway, at the moment I'm using just CSS, a simple list and float:left attribute for all elements. So it is doing what I need.

However still it is not exactly what I need, because the elements are distribuited horizontally and not vertically.

Answered almost 7 years ago by Patrick
  • Thanks for the clarifications, sorry I haven't gotten back to you until now, but seeing your other question it sounds like you need a way to vertically float the div... I linked jQuery Masonry plugin over there as a possible solution. If that isn't what you are looking for, then I'll take another look at this question. Mottie almost 7 years ago