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.
<!DOCTYPE html> < html >
< head >
< title > Semantic-UI Grid Automatic Column Count </ title >
< link rel = "stylesheet" href =
</ 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.
<!DOCTYPE html> < html >
< head >
< title > Semantic-UI Grid Automatic Column Count </ title >
< link rel = "stylesheet" href =
</ 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