En este artículo, aprenderemos cómo crear una cuadrícula de una sola columna. Discutiremos dos enfoques de la tarea.
Enfoque 1: Uso de jQuery Mobile Grid
jQuery Mobile es un conjunto seleccionado de interacciones de interfaz de usuario, efectos, widgets y temas creados sobre la biblioteca jQuery JavaScript. Grids en JQuery proporciona columnas basadas en CSS que responden. Las cuadrículas tienen un ancho del 100 %, las cuadrículas no tienen color de fondo, borde ni relleno. Las cuadrículas contienen elementos en ellas, estos elementos se pueden hacer flotar uno al lado del otro usando ui-block-a/b/c/d/e .
Pasos:
- Incluya jQuery Mobile en la página HTML a través de un CDN o localmente.
- En el cuerpo, cree un elemento div con la clase ui-grid-solo .
- En el elemento div, creamos otro elemento div con la clase ui-block-a .
- Eso es todo, nuestra cuadrícula de una sola columna está lista para usar. Ahora podemos agregar cualquier cosa a esta cuadrícula única.
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src= "http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script> </head> <body> <div class="ui-grid-solo"> <div class="ui-block-a"> <a href="#" class="ui-btn ui-shadow ui-corner-all"> Single Column Grid </a> </div> </div> </body> </html>
Producción:
Enfoque 2: usar la propiedad de visualización de cuadrícula en CSS
CSS Grid ofrece un sistema de diseño basado en cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin flotadores ni posicionamiento. Podemos usar esto para crear nuestra cuadrícula de una sola columna.
Pasos:
- Cree un div y configure la visualización como Grid y configure la propiedad grid-template-columns al 100%.
- Ahora, dentro de ese div, cree otro div, esta será la columna única.
- Agregue un poco de relleno y borde y está listo para comenzar.
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
display: grid;
}
.column {
border: 3px rgb(216, 117, 81) solid;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="column">Single-column Grid</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pulamolusaimohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA