Hi,
What is the best method of designing a grid format with CSS?
I am used to using tables to achieve the results. In the past this has allowed us to input product summary’s in each cell of a table.
But how can it be done with CSS?
Kind regards,
Matt.
Hi,
It all depends on what you mean by a grid and what the requirements are exactly. A “grid” means many different things in CSS as some frameworks are called ‘grids’ so we needf to know whetehr you mean a grid framework or just a specific grid like structure?
From your comments it sounds like you means something like a product image with a product description underneath?
You can in fact replicate a table structure for that using display:table and display:table-cell and do it in much the same way that you would have done with tables. However, it would have the same downside as a table in that columns would not wrap in a fluid environment, which may be what you want in a fixed width design, but generally these days you want elements to wrap to fit the window.
In that case you could use display:inline-block for each element and then it can wrap to a new line as required. You could also float the items but would need to ensure they are all the same height so that they won’t snag when they wrap.
Here’s a rough demo: