Open In App

Semantic-UI Grid Column Automatic Flow

Improve
Improve
Like Article
Like
Save
Share
Report

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 Automatic Flow Column is used to set the flow of content automatically to the next row if all the grid columns are taken in the current row. 

Semantic-UI Grid Automatic Flow Column Class:

  • *number: This column is used to set the width of the column grid. If the column grid width exceeds the current row, it will automatically move to the next row.

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 the Semantic-UI Grid Automatic Flow Column.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Grid Automatic Flow Column
    </title>
    <link href=
          rel="stylesheet" />
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Grid Automatic Flow Column</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="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="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>
    </div>
</body>
  
</html>


Output:

Semantic-UI Grid Column Automatic Flow

Semantic-UI Grid Column Automatic Flow

Example 2: This example describes the uses of the Semantic-UI Grid Automatic Flow Column.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Grid Automatic Flow Column
    </title>
    <link href=
          rel="stylesheet" />
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Grid Automatic Flow Column</h3>
  
        <div class="ui externally celled grid">
            <div class="eight wide column">
                <img src=
            </div>
            <div class="four wide column">
                <img src=
            </div>
            <div class="six wide column">
                <img src=
            </div>
            <div class="four wide column">
                <img src=
            </div>
            <div class="six wide column">
                <img src=
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI Grid Column Automatic Flow

Semantic-UI Grid Column Automatic Flow

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



Last Updated : 13 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads