Semantic-UI Varying Grid Significant Word Order

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. Varying Grid Significant Word Order is used to align the 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.

Semantic-UI Varying Grid Significant Word Order Classes:

• left floated: This class is used to float the column left.
• right floated: This class is used to float the column right.
• center aligned: This class is used to align the content in the center.
• left aligned: This class is used to align the content on the left.
• right aligned: This class is used to align the content on the right.

Syntax:

<div class="ui Significant-Word-Order-Class 
 grid">
 .....
</div>

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

Output:

👁 Semantic-UI Varying Grid Significant Word Order

Example 2: The following code demonstrates the Semantic-UI Varying Grid Significant Word Order using center aligned class.

Output:

👁 Semantic-UI Varying Grid Significant Word Order

Reference: https://semantic-ui.com/collections/grid.html#significant-word-order