Diseño web receptivo - Vista de cuadrícula
¿Qué es una vista de cuadrícula?
Muchas páginas web se basan en una vista de cuadrícula, lo que significa que la página está dividida en columnas:
El uso de una vista de cuadrícula es muy útil al diseñar páginas web. Facilita la colocación de elementos en la página.
Una vista de cuadrícula receptiva a menudo tiene 12 columnas y tiene un ancho total del 100%, y se reducirá y expandirá a medida que cambia el tamaño de la ventana del navegador.
Ejemplo: vista de cuadrícula receptiva
Creación de una vista de cuadrícula receptiva
Comencemos a construir una vista de cuadrícula receptiva.
Primero asegúrese de que todos los elementos HTML tengan la box-sizingpropiedad establecida en
border-box. Esto asegura que el relleno y el borde estén incluidos en el ancho y alto total de los elementos.
Agregue el siguiente código en su CSS:
* {
box-sizing: border-box;
}
Lea más sobre la box-sizingpropiedad en nuestro capítulo CSS Box Sizing .
El siguiente ejemplo muestra una página web receptiva simple, con dos columnas:
Ejemplo
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
El ejemplo anterior está bien si la página web solo contiene dos columnas.
Sin embargo, queremos usar una vista de cuadrícula receptiva con 12 columnas para tener más control sobre la página web.
Primero debemos calcular el porcentaje para una columna: 100% / 12 columnas = 8,33%.
Luego creamos una clase para cada una de las 12 columnas class="col-"y un número que define cuántas columnas debe abarcar la sección:
CSS:
.col-1 {width: 8.33%;}
.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%;}
Todas estas columnas deben estar flotando a la izquierda y tener un relleno de 15px:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Cada fila debe estar envuelta en un archivo <div>. El número de columnas dentro de una fila siempre debe sumar 12:
HTML:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
Las columnas dentro de una fila están todas flotando hacia la izquierda y, por lo tanto, se eliminan del flujo de la página, y otros elementos se colocarán como si las columnas no existieran. Para evitar esto, agregaremos un estilo que borre el flujo:
CSS:
.row::after {
content: "";
clear: both;
display: table;
}
También queremos agregar algunos estilos y colores para que se vea mejor:
Ejemplo
html {
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;
}
Tenga en cuenta que la página web del ejemplo no se ve bien cuando cambia el tamaño de la ventana del navegador a un ancho muy pequeño. En el próximo capítulo aprenderá cómo solucionarlo.