Skip to content
Related Articles
Open in App
Not now

Related Articles

Semantic-UI Grid Column Widths

Improve Article
Save Article
Like Article
  • Last Updated : 13 Mar, 2022
Improve Article
Save Article
Like Article

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

Semantic UI Grid is used to harmonize negative space in a layout. The grid layout is used to create a grid-based layout system with the help of rows and columns. Grid is very easy to design any webpage without using floats and positioning.

Semantic-UI Grid Column Widths are used to set the width of the grid layout. A row contains a maximum sixteen-column grid and if a column does not fit in a row then it will move to the next row automatically.

Semantic-UI Grid Column Widths Class:

  • *number wide: This class is used to set the width of the grid element. The size of the grid cannot be more than sixteen.

Syntax:

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

Note: The *number is replaceable with the integer number(Alphabetic). 

Example 1: This example describes the uses of Semantic-UI Grid Column Widths.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Grid Column Widths
    </title>
  
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Grid Column Widths</h3>
  
        <div class="ui grid">
            <div class="eight wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
  
            </div>
            <div class="eight wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
  
            </div>
            <div class="six wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
  
            </div>
            <div class="ten wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
  
            </div>
            <div class="twelve wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
  
            </div>
            <div class="four wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
  
            </div>
            <div class="two wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
  
            </div>
            <div class="fourteen wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
  
            </div>
            <div class="sixteen wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
  
            </div>
        </div>
    </div>
</body>
  
</html>

Output:
Semantic-UI Grid Column Widths
Semantic-UI Grid Column Widths
Example 2: This example describes the uses of Semantic-UI Grid Column Widths.
HTML



<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Grid Column Widths
    </title>
  
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Grid Column Widths</h3>
  
        <div class="ui externally celled grid">
            <div class="eight wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
  
            </div>
            <div class="eight wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
  
            </div>
            <div class="six wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
  
            </div>
            <div class="six wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
  
            </div>
            <div class="four wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
  
            </div>
            <div class="four wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
  
            </div>
            <div class="eight wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
  
            </div>
            <div class="sixteen wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
  
            </div>
        </div>
    </div>
</body>
  
</html>
Output:
Semantic-UI Grid Column Widths
Semantic-UI Grid Column Widths
Reference: https://semantic-ui.com/collections/grid.html#column-widths

My Personal Notes
arrow_drop_up
Like Article

Save Article

Related Articles
1.
Primer CSS Grid Column Widths
2.
Blaze UI Grid Widths
3.
Blaze UI Grid Fixed widths
4.
Bulma Desktop and Widescreen maximum widths
5.
Primer CSS Truncate Custom Max Widths
6.
Blaze UI Containers Widths
7.
Tachyons Layout Widths
8.
Tachyons Layout Max Widths
9.
How to use grid element using the grid auto placement rules?
10.
How to make a grid without calling CSS Grid property ?
Previous
Semantic-UI Grid Colored
Next

Semantic-UI Grid Row Grouping
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
ppatelkap
@ppatelkap
Vote for difficulty





Article Tags :
Report Issue
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!