Semantic UI es el marco de código abierto que utilizó CSS y jQuery para hacer que nuestros sitios web se vean hermosos y receptivos. Tiene clases predefinidas como bootstrap para usar para hacer que nuestro sitio web sea más interactivo. Tiene algunos componentes semánticos preconstruidos y podemos usar estos componentes para crear un sitio web receptivo.
Semantic-UI Grid se utiliza para armonizar el espacio negativo en el diseño de nuestra página web. La cuadrícula variable facilita la alineación del contenido, ya sea horizontal o vertical, junto con el estilo con diferentes variaciones de colores en la cuadrícula. Tiene 5 tipos de cuadrículas variables, que son cuadrículas anidadas, coloreadas, conteo automático de columnas, contenido centrado y orden de palabras significativas.
En este artículo, discutiremos todos los diferentes tipos de grillas en Semantic-UI, junto con sus implementaciones.
Cuadrícula variable de interfaz de usuario semántica:
- Nesting Grids : Sirve para colocar la grilla dentro de otra grilla que nos ayuda a subdividir las columnas.
- Coloreado : Esto se utiliza para rellenar los colores en las cuadrículas. Las cuadrículas pueden usar variaciones de colores con nombre para agregar colores de fondo, pero solo con cuadrículas rellenas que no incluyen márgenes negativos.
- Recuento automático de columnas : Esto 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.
- Contenido de centrado : Esto se utiliza para centrar las columnas dentro de la cuadrícula. Si la fila no ocupa todo el espacio de las dieciséis columnas de la cuadrícula, entonces podemos centrar las columnas usando la clase centrada.
- Recuento significativo de palabras: Esto se usa para alinear las cosas horizontal o verticalmente. Podemos alinear las columnas y el texto usando clases de orden significativo de palabras. En este artículo, discutiremos el orden de palabras significativo de cuadrícula variable en la interfaz de usuario semántica.
Sintaxis:
<div class="Varying-Grid-Types"> ... </div>
Ejemplo 1: el siguiente ejemplo demuestra las cuadrículas variables de la interfaz de usuario semántica especificando las cuadrículas de colores anidadas.
HTML
<!DOCTYPE html> <html> <head> <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"> <h1 class="ui green header"> GeeksforGeeks </h1> <h3> Semantic-UI Varying Grids </h3> <br> <div class="ui two column grid"> <div class="column"> <div class="ui four column grid"> <div class="green column"> GFG Nested </div> <div class="red column"> GFG Nested </div> <div class="blue column"> GFG Nested </div> <div class="orange column"> GFG Nested </div> </div> </div> <div class="pink column"> GeeksforGeeks </div> <div class="grey column"> GeeksforGeeks </div> <div class="column"> <div class="ui grid"> <div class="green four wide column"> GFG Nested </div> <div class="blue three wide column"> GFG Nested </div> <div class="red nine wide column"> GFG Nested </div> </div> </div> </div> </div> </body> </html>
Producción:
Cuadrículas variables de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra el orden de palabras significativas de la cuadrícula variable de la interfaz de usuario semántica utilizando clases flotantes a la izquierda, flotantes a la derecha, alineadas a la izquierda y alineadas a la derecha .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Varying Grid</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 class="ui green header"> GeeksforGeeks </h2> <h3> Semantic-UI Varying Grid Significant Word Order </h3> </div> <br> <div class="ui grid"> <div class="left floated right aligned seven wide column"> <div class="ui segment"> GFG Left floated Right aligned </div> </div> <div class="right floated left aligned seven wide column"> <div class="ui segment"> GFG Right floated left aligned </div> </div> <div class="right floated seven wide column"> <div class="ui segment"> GeeksforGeeks Right floated </div> </div> </div> </body> </html>
Producción:
Cuadrícula variable de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/grid.html#nesting-grids