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 !