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. 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.
Semantic-UI Grid Columns Classes:
- 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 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 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 unit width out of 16.
- twelve wide column: It specifies a column that occupies 12 unit width out of 16.
- thirteen wide column: It specifies a column that occupies 13 unit width out of 16.
- fourteen wide column: It specifies a column that occupies 14 unit width out of 16.
- fifteen wide column: It specifies a column that occupies 15 unit width out of 16.
- sixteen wide column: It specifies a column that occupies 16 unit width out of 16.
Syntax:
<div class="ui grid"> <div class="eight wide column"></div> <div class="nine wide column"></div> </div>
Example: The below example illustrates the use of column classes in Semantic UI Grid.
<!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="four wide column">
four wide column
</div>
<div class="eight wide column">
eight wide column
</div>
<div class="four wide column">
four wide column
</div>
<div class="six wide column">
six wide column
</div>
<div class="ten wide column">
ten wide column
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic UI – Grid Columns
Reference: https://semantic-ui.com/collections/grid.html#columns