Semantic-UI Grid Rows
Last Updated :
16 Mar, 2022
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. This framework allows us to use various of its styles and properties to make a website more user-friendly.
A Semantic UI Grid is a structure with a long history used to align negative space in designs, with the help of rows and columns it makes it easier to design any webpage. In This article we will discuss Semantic UI Grid Rows, Rows are groups of columns that are aligned horizontally.
Rows can either be explicit, marked with an additional row element, or implicit, automatically occurring when no more space is left in a previous row. Semantic UI Grid Rows are divided into 3 categories, these are Grouping, Clearing Content, and Special Grids.
Semantic-UI Grid Rows Class:
- row: This class is used to insert the rows in the layout.
Syntax:
<div class="ui grid ...">
<div class="row ...">
<div class="column">...</div>
...
</div>
</div>
Example 1: The following code demonstrates the Semantic UI Grid Rows.
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 four column grid">
<div class="row">
<div class="column">
<button>Geek</button>
</div>
<div class="column">
<button>Geek</button>
</div>
<div class="column">
<button>Geek</button>
</div>
<div class="column">
<button>Geek</button>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Grid Rows
Example 2: The following code demonstrates the Semantic UI Grid Rows using Grouping. Row wrappers allow us to apply variations to a group of columns. We can combine columns using this property.
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 four column grid">
<div class="two column row">
<div class="column">
<button class="ui fluid button">
Geek
</button>
</div>
</div>
<div class="column">
<button class="ui fluid button">
Geek
</button>
</div>
<div class="column">
<button class="ui fluid button">
Geek
</button>
</div>
<div class="column">
<button class="ui fluid button">
Geek
</button>
</div>
<div class="column">
<button class="ui fluid button">
Geek
</button>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Grid Rows
Example 3: The following code demonstrates the Semantic UI Grid Rows using Clearing Content. Row wrappers will automatically clear previous columns, making them useful when using floated variations.
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 grid">
<div class="four column row">
<div class="left floated column">
<button class="ui fluid button">
Geek
</button>
</div>
<div class="right floated column">
<button class="ui fluid button">
Geek
</button>
</div>
</div>
<div class="four column row">
<div class="column">
<button class="ui fluid button">
Geek
</button>
</div>
<div class="column">
<button class="ui fluid button">
Geek
</button>
</div>
<div class="column">
<button class="ui fluid button">
Geek
</button>
</div>
<div class="column">
<button class="ui fluid button">
Geek
</button>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Grid Rows
Example 4: Additionally, some types of grids, like divided or celled require row wrappers to apply to format correctly.
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 grid">
<div class="ui internally celled grid">
<div class="row">
<div class="three wide column">
<img src=
</div>
<div class="ten wide column">
<p>GeeksforGeeks</p>
</div>
<div class="three wide column">
<img src=
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Grid Rows
Reference: https://semantic-ui.com/collections/grid.html#rows
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...