Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene diferentes elementos geniales para usar para hacer que su sitio web se vea más sorprendente. Utiliza una clase para agregar CSS a los elementos.
El diseño de cuadrícula de interfaz de usuario semántica se utiliza para armonizar el diseño del espacio negativo. El elemento de cuadrícula se usa para crear un sistema de diseño basado en cuadrícula que ayuda a las filas y columnas. Los elementos de cuadrícula facilitan el diseño de cualquier página web sin utilizar flotadores ni posicionamiento.
Semantic-UI Grid Automatic Column Count se utiliza para dividir automáticamente el ancho de la columna de manera uniforme en la misma variación de ancho. Es útil para contenido dinámico.
Clase de conteo automático de columnas de cuadrícula de interfaz de usuario semántica:
- ancho igual: esta clase se usa para dividir el ancho de la columna de manera uniforme.
Sintaxis:
<div class="ui equal width grid">
<div class="column"></div>
...
</div>
Ejemplo 1: este ejemplo describe los usos del conteo automático de columnas de la cuadrícula Semantic-UI usando clases de igual ancho .
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>
Producción:
Ejemplo 2: este ejemplo describe los usos del recuento automático de columnas de la cuadrícula de la interfaz de usuario semántica con cuatro columnas iguales en la primera fila y una columna en la segunda fila.
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>
Producción:
Referencia: https://semantic-ui.com/collections/grid.html#automatic-column-count