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 fila de agrupación de cuadrícula de interfaz de usuario semántica se utiliza para agregar algunos grupos de elementos de cuadrícula de columna. Utiliza contenedores en fila para fusionar la cuadrícula y crear un diseño de cuadrícula único.
Fila de agrupación de cuadrícula de interfaz de usuario semántica Clase utilizada:
- * fila de columna de número: esta clase se utiliza para agrupar el diseño de cuadrícula de fila.
Sintaxis:
<div class="ui *number column grid">
<div class="*number column row">
<div class="column"></div>
</div>
...
</div>
Nota: El *número es reemplazable con el número entero (alfabético).
Ejemplo 1: este ejemplo describe los usos de la fila de agrupación de cuadrícula de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Grid Grouping Row </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 Grouping Row</h3> <div class="ui four column grid"> <div class="two column row"> <div class="column justified"> <p> JavaScript is a lightweight, cross-platform, and interpreted scripting language. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments. </p> </div> </div> <div class="column justified"> <p> JavaScript is a lightweight, cross-platform, and interpreted scripting language. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments. </p> </div> <div class="column justified"> <p> JavaScript is a lightweight, cross-platform, and interpreted scripting language. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments. </p> </div> </div> </div> </body> </html>
Producción:
Agrupación de filas de cuadrícula de interfaz de usuario semántica
Ejemplo 2: este ejemplo describe los usos de la fila de agrupación de cuadrícula de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Grid Grouping Row </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 Grouping Row</h3> <div class="ui four column externally celled grid"> <div class="two column row"> <div class="column justified"> <p> JavaScript is a lightweight, cross-platform, and interpreted scripting language. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments. </p> </div> </div> <div class="column"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> <div class="column"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> <div class="column"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> <div class="column"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> </div> </body> </html>
Producción:
Agrupación de filas de cuadrícula de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/grid.html#grouping