SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best way to design a grid with CSS?

    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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Quote Originally Posted by MatthewBOnline View Post
    Hi,

    What is the best method of designing a grid format with CSS?
    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:


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •