Semantic-UI Page Grids
Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.
A Semantic UI grid is used to harmonize negative space in a layout. Version 1.X of Semantic UI Semantic-UI Page Grids were used to contain the maximum width of grids holding page content. Now the Semantic UI Page Grid has been deprecated in favor of the simpler container element.
Semantic UI Page Grids Class: This is now deprecated. Rather than using a page grid, prefer using a ui grid container to include top-level page content inside a grid.
- grid container: This class is used to set the grid container.
<div class="ui four column doubling stackable grid container"> <div class="column"> .... </div> .... </div>
Example 1: In this article, we will use the three-column doubling stackable grid container as a replacement for the Page grid.
Example 2: In this example, we will use the four-column doubling stackable container grid as a replacement of the Page grid with the colorful columns header. As it is four column container, the columns seem to be on the left side, the last column appears to be empty.