Diseño Web Responsive -Vista de cuadrícula
¿Qué es la vista de cuadrícula?
Muchas páginas web están diseñadas basadas en cuadrículas, lo que significa que la página se distribuye en columnas.
Usar la vista de cuadrícula nos ayuda a diseñar páginas web. Esto hace que sea más fácil agregar elementos a la página.
La vista de cuadrícula responsive suele tener 12 columnas, con un ancho del 100%, y se ajusta automáticamente cuando se cambia el tamaño de la ventana del navegador.
Crear una vista de cuadrícula responsive
A continuación, vamos a crear una vista de cuadrícula responsive.
Primero asegúrate de que todos los elementos HTML tenganbox-sizingel atributo y esté establecido aborder-box。
Asegúrate de que los márgenes y los bordes estén incluidos dentro del ancho y alto del elemento.
Agrega el siguiente código:
* {
box-sizing: border-box;
}
Para ver más contenido sobre box-sizing, haz clic en:La propiedad box-sizing de CSS3。
El siguiente ejemplo muestra una página web responsive simple con dos columnas:
El ejemplo anterior contiene dos columnas.
Un sistema de cuadrícula de 12 columnas permite un mejor control de las páginas web responsive.
Primero podemos calcular el porcentaje de cada columna: 100% / 12 columnas = 8.33%.
Especifica una clase en cada columna,class="col-"para definir cuántos spans tiene cada columna:
CSS:
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
Pruébalo »
Todas las columnas flotan a la izquierda, con un padding de 15px:
CSS:
float: left;
padding: 15px;
border: 1px solid red;
}
Cada fila se envuelve con <div>. La suma de todas las columnas debe ser 12:
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>
Las columnas flotan a la izquierda y se añade la limpieza de flotación:
CSS:
content: "";
clear: both;
display: block;
}
Podemos agregar algunos estilos y colores para que se vea mejor:
Ejemplo
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
Pruébalo »