Skip to content
Related Articles

Related Articles

Semantic-UI Grid Column

Improve Article
Save Article
  • Last Updated : 29 Mar, 2022
Improve Article
Save Article

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic UI Grid columns offer us grids, that divide horizontal space into columns. All columns in a grid must specify their width as a proportion of the total available row width. All grid systems choose an arbitrary column count to allow per row. Semantic’s default theme uses 16 columns.

Semantic-UI Grid Columns Class:

  • column: This class is used to create a 12 grid column.
  • *alphabetic-number: This is the class that you have to mention the column width by calculating of the divisor of 12, the total grid is 12, one, two, three,…. up to twelve.

Syntax:

<div class="ui grid">
  <div class="*alphabetic-number wide column"></div>
  <div class="*alphabetic-number wide column"></div>
  ....
</div>

Below examples illustrate the Semantic-UI Grid Columns:

Example 1: In this example we will create two rows that will contain three grid’s 4 columns and three grids 1 column.

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic-UI Grid Columns</title>
        <link href=
            rel="stylesheet" />
    </head>
    <body>
        <center>
            <h1 class="ui header green">GeeksforGeeks</h1>
            <strong>
            Semantic-UI Grid Columns
            </strong>
        </center>
        <br>
        <div class="ui grid">
            <div class="three wide green column">1</div>
            <div class="three wide yellow column">2</div>
            <div class="three wide blue column">3</div>
            <div class="three wide red column">4</div>
        </div>
        <br><br>
        <div class="ui grid">
            <div class="twelve wide purple column">12</div>
        </div>
    </body>
</html>


Output:

Semantic-UI Grid Columns

Semantic-UI Grid Columns

Example 2: In this example we will create two rows that will contain six grid’s 2 columns and three grids 1 columns.

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic-UI Grid Columns</title>
        <link href=
            rel="stylesheet" />
    </head>
    <body>
        <center>
            <h1 class="ui header green">GeeksforGeeks</h1>
            <strong>
            Semantic-UI Grid Columns
            </strong>
        </center>
        <br>
        <div class="ui grid">
            <div class="six wide green column">1</div>
            <div class="six wide yellow column">2</div>
        </div>
        <br><br>
        <div class="ui grid">
            <div class="twelve wide purple column">12</div>
        </div>
    </body>
</html>


Output:

Semantic-UI Grid Columns

Semantic-UI Grid Columns

Reference: https://semantic-ui.com/collections/grid.html#columns


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!