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 usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. La mejor parte de este marco es que crea diseños hermosos y receptivos, ya que contiene componentes semánticos preconstruidos.
Grid es un componente esencial en cualquier sitio web, ya que alinea el espacio de manera eficiente y mejora la interfaz de usuario. Semantic-UI nos proporciona un componente conocido como Responsive Grid Container . Este componente contiene un contenedor que se puede usar junto con una cuadrícula para proporcionar un contenedor receptivo de ancho fijo para envolver el contenido de una página.
Clase de contenedor de cuadrícula sensible:
- ui grid container: esta clase se usa para crear un contenedor de cuadrícula que responde por naturaleza.
Sintaxis:
<div class="ui grid container">
...
</div>
Ejemplo 1: en el siguiente programa, crearemos un contenedor de cuadrícula sensible utilizando la clase de contenedor de cuadrícula ui.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Responsive Grid Container</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <center> <div class="ui green header">GeeksforGeeks</div> <strong>Semantic-UI Responsive Grid Container</strong> </center> <div class="ui grid container"> <!--Grid Container--> <div class="four wide column"> 1 </div> <div class="four wide column"> 2 </div> <div class="four wide column"> 3 </div> <div class="four wide column"> 4 </div> <div class="four wide column"> 5 </div> <div class="four wide column"> 6 </div> <div class="four wide column"> 7 </div> <div class="four wide column"> 8 </div> </div> </body> </html>
Output
Ejemplo 2: En el siguiente programa, comprenderemos la diferencia entre una cuadrícula normal y un contenedor de cuadrícula que responde por naturaleza.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Responsive Grid Container</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <center> <div class="ui green header">GeeksforGeeks</div> <strong>Semantic-UI Responsive Grid Container</strong> </center> <br> <strong>Normal Grid</strong> <div class="ui grid"> <div class="four wide column"> 1 </div> <div class="four wide column"> 2 </div> <div class="four wide column"> 3 </div> <div class="four wide column"> 4 </div> </div> <br> <br> <strong>Container Grid</strong> <div class="ui grid container"> <!--Grid Container--> <div class="four wide column"> 1 </div> <div class="four wide column"> 2 </div> <div class="four wide column"> 3 </div> <div class="four wide column"> 4 </div> </div> </body> </html>
Output
Referencia: https://semantic-ui.com/collections/grid.html
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA