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.
Los anchos de columna de la cuadrícula de interfaz de usuario semántica se utilizan para establecer el ancho del diseño de la cuadrícula. Una fila contiene una cuadrícula de dieciséis columnas como máximo y si una columna no cabe en una fila, se moverá a la siguiente fila automáticamente.
Clase de anchos de columna de cuadrícula de interfaz de usuario semántica:
- *anchura numérica: esta clase se utiliza para establecer la anchura del elemento de cuadrícula. El tamaño de la cuadrícula no puede ser más de dieciséis.
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 los anchos de columna de cuadrícula de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Grid Column Widths </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 Column Widths</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="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="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 class="twelve 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="two 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="fourteen 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="sixteen 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:
Anchos de columna de cuadrícula de interfaz de usuario semántica
Ejemplo 2: este ejemplo describe los usos de los anchos de columna de cuadrícula de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Grid Column Widths </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 Column Widths</h3> <div class="ui externally celled 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="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="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="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="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="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="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="sixteen 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:
Anchos de columna de cuadrícula de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/grid.html#column-widths