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.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
</head>
<body>
<div class="ui container center aligned">
<h1 class="ui green header">
GeeksforGeeks
</h1>
<h3>
Semantic-UI Varying Grids
</h3>
<br>
<div class="ui two column grid">
<div class="column">
<div class="ui four column grid">
<div class="green column">
GFG Nested
</div>
<div class="red column">
GFG Nested
</div>
<div class="blue column">
GFG Nested
</div>
<div class="orange column">
GFG Nested
</div>
</div>
</div>
<div class="pink column">
GeeksforGeeks
</div>
<div class="grey column">
GeeksforGeeks
</div>
<div class="column">
<div class="ui grid">
<div class="green four wide column">
GFG Nested
</div>
<div class="blue three wide column">
GFG Nested
</div>
<div class="red nine wide column">
GFG Nested
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
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.
<!DOCTYPE html> <html>
<head>
<title>Semantic-UI Varying Grid</title>
<link href=
rel="stylesheet"/>
</head>
<body>
<div class="ui container center aligned">
<h2 class="ui green header"> GeeksforGeeks </h2>
<h3> Semantic-UI Varying Grid Significant Word Order </h3>
</div> <br>
<div class="ui grid">
<div class="left floated right aligned seven wide column">
<div class="ui segment">
GFG Left floated Right aligned
</div>
</div>
<div class="right floated left aligned seven wide column">
<div class="ui segment">
GFG Right floated left aligned
</div>
</div>
<div class="right floated seven wide column">
<div class="ui segment">
GeeksforGeeks Right floated
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/collections/grid.html#nesting-grids