Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para su uso y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más sorprendente y receptivo.
El elemento de cuadrícula de interfaz de usuario semántica se utiliza para mostrar el contenido en filas y columnas para facilitar el diseño de las páginas web. El contenido de la columna de la cuadrícula de la interfaz de usuario semántica se usa para agregar el contenido de la columna y agregar relleno al elemento de la columna. El estilo del contenido de la columna no debe aplicarse directamente a las columnas, sino a los elementos dentro de las columnas.
Clase utilizada de contenido de columna de cuadrícula de interfaz de usuario semántica:
- columna: esta clase se utiliza para agregar la columna del área de contenido para el elemento.
Sintaxis:
<div class="ui number* column grid">
<div class="column">
<div class="ui segment">
...
</div>
</div>
...
</div>
Nota: El número* se puede reemplazar con el deletreo alfabético de cualquier número
Ejemplo 1: en este ejemplo, describiremos el uso del contenido de columna de cuadrícula de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Grid Column Content </title> <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"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Grid Column Content</h3> <div class="ui four column grid"> <div class="column"> <div class="ui segment"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> <div class="column"> <div class="ui segment"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> <div class="column"> <div class="ui segment"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> <div class="column"> <div class="ui segment"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> </div> </div> </body> </html>
Producción:
Contenido de la columna de la cuadrícula de la interfaz de usuario semántica
Ejemplo 2: en este ejemplo, describiremos el uso del contenido de columna de cuadrícula de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI Grid Column Content </title> <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"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Grid Column Content</h3> <div class="ui grid"> <div class="four wide column"> <div class="ui segment"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> <div class="four wide column"> <div class="ui segment"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> <div class="four wide column"> <div class="ui segment"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> <div class="four wide column"> <div class="ui segment"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> <div class="four wide column"> <div class="ui segment"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> <div class="four wide column"> <div class="ui segment"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> </div> </div> </body> </html>
Producción:
Contenido de la columna de la cuadrícula de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/grid.html#column-content