Menu
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 !
522
A Semantic UI Grid is a structure with a long history used to align negative space in designs, with the help of rows and columns it makes it easier to design any webpage. In This article we will discuss Semantic UI Grid Rows, Rows are groups of columns that are aligned horizontally.
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.
The framework that helps to organize your UI elements, guide the reader and identify individual parts of your design. The grid consists of grid units. The layout is placed upon the grid and has a certain amount of columns. Columns have margins on the left and right, as well as paddings between each column.
Most grids do not need to specify rows. Content will automatically flow to the next row when all the grid columns are taken in the current row. Since columns use padding to create gutters, content stylings should not be applied directly to columns, but to elements inside of columns. Column widths can be specified using (x) wide class names.
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>
You could use the stretched grid to stretching the segments vertically, so they would have the same height. And use the .ui.segments could help you to keep the code clean. [Online Demo]
CSS
.segment {
min-height: 100px;
}
HTML
<div class="ui horizontal segments">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="ui stretched two column grid">
<div class="column">
<div class="ui vertical segments">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
</div>
<div class="column">
<div class="ui segment"></div>
<div class="ui segment"></div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
