Semantic UI – ui grid best approach for layout (rows/columns vs segments)-open source projects Semantic-Org/Semantic-UI


Semantic UI wanted segments to mean parts of text/articles. They left a small note:

A segment is used to create a grouping of related content. Horizontal segments are most effectively used with grids, to allow for text groups that are aligned across grid rows.

In essence, they mean that grid is the foundation of your markup. The grid has been designed for laying out the page.

You can use segments within your grid to group similar content. (If you look more in the docs, you can see that intention where they have stacked, piled, loading classes for segments.)

For example, I’d like to have the three cells in the bottom left as some sort of news feed. Then I’d use segments there:

             Horizontal section, column 1
             Horizontal section, column 2
             Horizontal section, column 3
Left column, row 1

Left column, row 2

Left column, row 3

Right column, row 1 Right column, row 2