Semantic-UI Varying Grids

Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website.

Semantic-UI Grid is used to harmonize the negative space in our webpage layout. The Varying Grid facilitates the alignment of the content either horizontal or vertical, along with styling with different colors variations in the grid. It has 5 types of Varying Grids, which are Nesting Grids, Colored, Automatic Column Count, Centering Content, and Significant Word Order.

In this article, we will discuss all the varying grid types in Semantic-UI, along with their implementations.

Semantic-UI Varying Grid:

• Nesting Grids: This is used to place the grid inside another grid that helps us to sub-division the columns. 
• Colored: This is used to fill the colors in the grids. Grids can use named colors variations to add background colors, but only with padded grids that do not include negative margins.
• Automatic Column Count: This is used to automatically divide the column width evenly on equal width variation. It is useful for dynamic content.
• Centering Content: This is used to center the columns inside the grid. If the row does not take all the sixteen grid columns space then we can center the columns using the centered class.
• Significant Word Count: This is used to align things horizontal or vertical. We can align the columns and text using Significant Word Order classes. In this article, we will discuss Varying Grid Significant Word Order in Semantic-UI.

Syntax:

<div class="Varying-Grid-Types">
 ...
</div>

Example 1: The following example demonstrates the Semantic-UI Varying Grids by specifying the nested colored grids.

Output:

👁 Image

Example 2: The following code demonstrates the Semantic-UI Varying Grid Significant Word Order using left floated, right floated, left-aligned, and right-aligned classes.

Output:

👁 Image

Reference: https://semantic-ui.com/collections/grid.html#nesting-grids