Semantic-UI Grid Automatic Column Count

Last Updated : 13 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 looks more amazing. It uses a class to add CSS to the elements.

Semantic-UI Grid layout is used to harmonize the negative space layout. The grid element is used to create a grid-based layout system that helps the rows and columns. Grid elements make it easier to design any webpage without using floats and positioning.

Semantic-UI Grid Automatic Column Count is used to automatically divide the column width evenly on equal width variation. It is useful for dynamic content.

Semantic-UI Grid Automatic Column Count Class:

  • equal width: This class is used to divide the column width evenly.

Syntax:

<div class="ui equal width grid">
      <div class="column"></div>
      ...
</div>

Example 1: This example describes the uses of Semantic-UI grid automatic column count using equal width classes.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title> Semantic-UI Grid Automatic Column Count </title>

    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>

<body>
    <div class="ui container center aligned">
        <h2 style="color:green"> GeeksforGeeks </h2>

        <h3>  Semantic-UI Grid Automatic Column Count </h3>

        <div class="ui equal width grid justified">
            <div class="column">
                HTML stands for HyperText Markup Language. 
                It is used to design web pages using a 
                markup language. It is the combination of 
                Hypertext and Markup language.
            </div>
            <div class="column">
                CSS (Cascading Style Sheets) is a stylesheet 
                language used to design the webpage to make 
                it attractive. The reason for using this is 
                to simplify the process of making web pages 
                presentable.
            </div>
            <div class="equal width row">
                <div class="column">
                    JavaScript is the world most popular 
                    lightweight, interpreted compiled programming 
                    language. It is also known as scripting 
                    language for web pages. 
                </div>
                <div class="column">
                    jQuery is an open-source JavaScript library 
                    that simplifies the interactions between an 
                    HTML/CSS document, or more precisely the 
                    Document Object Model (DOM), and JavaScript. 
                </div>
                <div class="column">
                    Bootstrap is a free and open-source tool 
                    collection for creating responsive websites 
                    and web applications. It is the most popular 
                    HTML, CSS, and JavaScript framework for 
                    developing responsive, mobile-first websites.
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Example 2: This example describes the uses of Semantic UI grid automatic column count with four equal columns in the first row and one column in the second row.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>  Semantic-UI Grid Automatic Column Count </title>

    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>

<body>
    <div class="ui container center aligned">
        <h2 style="color:green"> GeeksforGeeks </h2>

        <h3> Semantic-UI Grid Automatic Column Count</h3>

        <div class="ui equal width grid justified">
            <div class="green column">
                HTML stands for HyperText Markup Language.
                It is used to design web pages using a
                markup language. It is the combination of
                Hypertext and Markup language.
            </div>
            <div class="red column">
                CSS (Cascading Style Sheets) is a stylesheet
                language used to design the webpage to make
                it attractive. The reason for using this is
                to simplify the process of making web pages
                presentable.
            </div>
            <div class="yellow column">
                JavaScript is the world most popular
                lightweight, interpreted compiled programming
                language. It is also known as scripting
                language for web pages.
            </div>
            <div class="blue column">
                jQuery is an open-source JavaScript library
                that simplifies the interactions between an
                HTML/CSS document, or more precisely the
                Document Object Model (DOM), and JavaScript.
            </div>

            <div class="equal width row">
                <div class="black column">
                    Bootstrap is a free and open-source tool
                    collection for creating responsive websites
                    and web applications. It is the most popular
                    HTML, CSS, and JavaScript framework for
                    developing responsive, mobile-first websites.
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Output:

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

Comment

Explore