Semantic UI - ui grid best approach for layout (rows/columns vs segments)
I'm new to Semantic UI and I'm trying to design a webpage with the layout below. Looking at the documentation, I've decided to use ui page grid. I've also decided to define the top fixed menu outside of the grid.
My first approach was something like this:
<body>
<div class="ui page grid">
<div class="three column row">
<div class="column"> Horizontal section, column 1</div>
<div class="column"> Horizontal section, column 2</div>
<div class="column"> Horizontal section, column 3</div>
</div>
<div class="two column row">
<div class="column">
<div class="row"> Left column, row 1</div>
<div class="row"> Left column, row 2</div>
<div class="row"> Left column, row 3</div>
</div>
<div class="column">
<div class="row"> Right column, row 1</div>
<div class="row"> Right column, row 2</div>
</div>
</div>
</div>
</body>
My question is:
Is it the correct approach to achieve a layout similar to the one of the image ? Should I use segments to divide the content instead of rows or columns ?
Thank you in advance !
Answer
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:
<body>
<div class="ui page grid">
<div class="three column row">
<div class="column"> Horizontal section, column 1</div>
<div class="column"> Horizontal section, column 2</div>
<div class="column"> Horizontal section, column 3</div>
</div>
<div class="two column row">
<div class="column">
<div class="ui segment">
<div class="ui vertical segment">
<p>Left column, row 1</p>
</div>
<div class="ui vertical segment">
<p>Left column, row 2</p>
</div>
<div class="ui vertical segment">
<p>Left column, row 3</p>
</div>
</div>
</div>
<div class="column">
<div class="row"> Right column, row 1</div>
<div class="row"> Right column, row 2</div>
</div>
</div>
</div>
</body>