3

I'm going to create a horizontal grid layout with CSS. (And I'll make it to scroll horizontally by JQuery and this solution. Please note that scrolling is not my problem. my problem is about creating the grid)

This is an example:

I have searched the internet about CSS Grids, but it seems that they can't help me...

My Question is, how to create something like the image above? Which plugins, or css properties should I use for this purpose?

EDIT: I want to have fixed number of rows (I mean, the number of rows should not change when I resize the page. there should be an scrollbar instead.) (I will use it inside a div with overflow: auto)

Community
  • 1
  • 1
Mahdi Ghiasi
  • 14,873
  • 19
  • 71
  • 119

1 Answers1

5

display:table, display:table-row, display:table-cell, display:inline-block

These css properties can help, just look them up on your local css information site.

The table-values let every element behave like a table, without actually using one. This may be a good solution for your problem.

The inline-block-value solves the overhang problem some floating layouts have as the blocks are displayed inline, just like imgs. There is little support for this in old browsers, of course.

amon
  • 57,091
  • 2
  • 89
  • 149
  • What is wrong with this? http://jsfiddle.net/ZUNxD/1/ It changes the size of divs to fit on the page, but I don't want that... Also `margin` don't work... – Mahdi Ghiasi Jul 17 '12 at 18:27
  • A table tries to fit into all available width. You can force a bigger size with the `width` property; in your fiddle, set it in the `.a` class. – amon Jul 17 '12 at 18:29
  • negative magins? Work, but the idea is horrible. Does `width: trazillion px !important;` not work? Do you have a current fiddle? – amon Jul 17 '12 at 18:40
  • Sorry, I didn't understand what you said. are you saying that I should use negative margins?!? – Mahdi Ghiasi Jul 17 '12 at 18:41
  • Sorry, my bad. the `width` property should do the trick. Please, never use negative margins, except for menus. Is your table scrollable by now? Can I help you any further? – amon Jul 17 '12 at 18:47
  • My table is scrollable. but `margin` of cells is not working. see my code: http://jsfiddle.net/ZUNxD/3/ – Mahdi Ghiasi Jul 17 '12 at 18:51
  • 1
    Take a look here: http://jsfiddle.net/mqXXa/18/ Essentially I added the `border-collapse` and `border-spacing` attributes. As our grid is told to behave like a table, we also have to style it accordingly. We can emulate a spacing between rows if we add an inner `div` as I did in row 1, cell 4. – amon Jul 17 '12 at 19:26