Search code examples
semantic-uisemantic-ui-react

Semantic UI, difference between table and grid?

I'd like to create a multiple rows + multiple columns view.

I think I can either use table or grid.

Which one should I use over another and why?

Solution

  • Summary

    Grid

    Using a grid makes content appear to flow more naturally on your page.

    Table

    A standard table.

    from Semantic-UI

    Explained

    Grids

    The CSS Grid Layout specification is one of a few new specifications that are redefining how we approach layout for the web. Alongside Flexbox and the Box Alignment Module it will become part of a modern layout system for websites and web applications.

    from Grid by Example

    Table

    Table is just a layout, and could be complex for complex views. Just think in spreadsheets. You can merge columns and rows to get your layout.

    Opinion

    You can use the option you want, according to your needs. But if you are looking to organize your web content, use grids; If you need to deploy data use tables.