CODEWITHSUNDEEP
htmlcss
Mahdi Ghiasi
Mahdi Ghiasi

Reputation: 15301

Creating a grid layout with css

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)

Upvotes: 3

Views: 2503

Answers (1)

amon
amon

Reputation: 57590

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.

Upvotes: 5

Related Questions