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.
Semantic-UI Special Grids Row es un tipo especial de diseño de cuadrícula que divide o coloca en celdas los contenedores de fila requeridos para agregar algún formato adicional.
Clase utilizada de fila de cuadrículas especiales de interfaz de usuario semántica:
- celdas internas: esta clase se usa para agregar formato divisor dentro del elemento de cuadrícula.
- Celda externa: esta clase se usa para agregar formato divisor dentro y fuera del elemento de cuadrícula.
Sintaxis:
<div class="ui internally celled grid">
<div class="row">
<div class="*number wide column">
...
</div>
...
</div>
</div>
Ejemplo 1: este ejemplo describe los usos de Semantic-UI Special Grids Row.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Grid Special Grids 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 Special Grids Row</h3> </div> <div class="ui container externally celled grid center aligned"> <div class="row"> <div class="four 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="four 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> <div class="row"> <div class="four 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="four 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> </div> </body> </html>
Producción:
Ejemplo 2: Este ejemplo describe los usos de Semantic-UI Special Grids Row.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Grid Special Grids 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 Special Grids Row</h3> </div> <div class="ui container externally celled grid center aligned"> <div class="row"> <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"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> <div class="six wide 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="row"> <div class="four wide column"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> <div class="eight wide column justified"> <p> Cascading Style Sheets fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. </p> </div> <div class="four wide column"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/collections/grid.html#special-grids