Semantic-UI Grid
Last Updated :
18 Oct, 2022
Semantic UI is a UI framework based on CSS preprocessor less and jQuery. It is used to build beautiful and responsive web experiences using the elements and modules which come bundled with it.
The Semantic UI grids are divided into horizontal units which are known as columns and vertical units are known as rows. Each row in a grid has a fixed amount of columns in it. By default, Semantic UI follows a 16-column system, i.e., each row in a grid is divided into 16 units and each column can specify the number of units it occupies. For example, 5 three-wide columns can fit in a row as 16 divided by 3 is 5.
Types of Grids:
columns: In this type of grid, the grids are divided into horizontal units.
| Class-Name |
Description |
| two wide column |
It specifies a column that occupies 2 unit width out of 16. |
| three wide column |
It specifies a column that occupies a 3-unit width out of 16. |
| four wide column |
It specifies a column that occupies a 4-unit width out of 16. |
| five wide column |
It specifies a column that occupies 5-unit width out of 16. |
| six wide column |
It specifies a column that occupies a 6-unit width out of 16. |
| seven wide column |
It specifies a column that occupies a 7-unit width out of 16. |
| eight wide column |
It specifies a column that occupies an 8-unit width out of 16. |
| nine wide column |
It specifies a column that occupies a 9-unit width out of 16. |
| ten wide column |
It specifies a column that occupies 10-unit width out of 16. |
| eleven wide column |
It specifies a column that occupies 11 units of width out of 16. |
| twelve wide column |
It specifies a column that occupies 12 units width out of 16. |
| thirteen wide column |
It specifies a column that occupies 13 units width out of 16. |
| fourteen wide column |
It specifies a column that occupies 14 units of width out of 16. |
| fifteen wide column |
It specifies a column that occupies 15 units width out of 16. |
| sixteen wide column |
It specifies a column that occupies 16 units width out of 16. |
rows: In this type of grid, the grids are divided into vertical units.
| Class-Name |
Description |
| row |
This class is used to insert the rows in the layout. |
variable grid: It facilitates the alignment of the content either horizontal or vertical, along with styling with different color variations in the grid.
responsive grid: It offers us five types of Responsive grids Containers, Stackable, Reverse Order, Doubling, and Manual Tweaks.
Example 1: In the below code, we will use the above classes to demonstrate the use of the grid.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Grid Columns</title>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<style>
.ui.container {
text-align:center;
}
h3 {
margin-top:0px;
}
.ui.grid {
margin-top:25px;
}
.ui.grid .column {
background-clip:content-box;
height:100px;
color:white;
background-color:black;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Semantic UI - Grid Columns </h3>
</div>
<div class="ui grid">
<div class="two wide column">
two wide column
</div>
<div class="nine wide column">
nine wide column
</div>
<div class="five wide column">
five wide column
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: In the below code, we will use the above classes to demonstrate the use of the grid.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic-UI Grid Rows</title>
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body>
<h1 class="ui header green">
GeeksforGeeks
</h1>
<strong> Semantic UI Grid Rows </strong>
<br/><br/>
<div class="ui six column grid">
<div class="row">
<div class="column">
<button>GfG</button>
</div>
<div class="column">
<button>GfG</button>
</div>
<div class="column">
<button>GfG</button>
</div>
<div class="column">
<button>GfG</button>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/collections/grid.html
Share your thoughts in the comments
Please Login to comment...