Question

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)

Answer 1

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.