La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para páginas web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos. Hace que las páginas web se vean increíbles y receptivas.
Semantic UI Grid se utiliza para armonizar el espacio negativo en un diseño. El diseño de cuadrícula se utiliza para crear un sistema de diseño basado en cuadrícula con la ayuda de filas y columnas. Grid es muy fácil de diseñar cualquier página web sin usar flotadores ni posicionamiento.
La columna de flujo automático de cuadrícula de interfaz de usuario semántica se utiliza para establecer el flujo de contenido automáticamente a la siguiente fila si todas las columnas de la cuadrícula se toman en la fila actual.
Clase de columna de flujo automático de cuadrícula de interfaz de usuario semántica:
- *número: esta columna se utiliza para establecer el ancho de la cuadrícula de columnas. Si el ancho de la cuadrícula de columnas excede la fila actual, se moverá automáticamente a la siguiente fila.
Sintaxis:
<div class="ui grid">
<div class="*number wide column"></div>
...
</div>
Nota: El *número es reemplazable con el número entero (alfabético).
Ejemplo 1: este ejemplo describe los usos de la columna de flujo automático de cuadrícula de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Grid Automatic Flow Column </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 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>
Producción:
Flujo automático de columna de cuadrícula de interfaz de usuario semántica
Ejemplo 2: este ejemplo describe los usos de la columna de flujo automático de cuadrícula de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Grid Automatic Flow Column </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 Automatic Flow Column</h3> <div class="ui externally celled grid"> <div class="eight wide column"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> <div class="four wide column"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> <div class="six wide column"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> <div class="four wide column"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> <div class="six wide column"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> </div> </body> </html>
Producción:
Flujo automático de columna de cuadrícula de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/grid.html#automatic-flow