Diseño de página web responsive - Vista de cuadrícula

¿Qué es la vista de cuadrícula?

Muchas páginas web se basan en la vista de cuadrícula (grid-view), lo que significa que la página se divide en varias columnas:

Es muy útil usar la vista de cuadrícula al diseñar páginas web. Esto permite colocar elementos en la página más fácilmente.

La vista de cuadrícula responsive generalmente tiene 12 columnas, un ancho total del 100%, y se contrae y estira al ajustar el tamaño de la ventana del navegador.

Construir vista de cuadrícula responsive

Comencemos a construir una vista de cuadrícula responsive.

Primero, asegúrese de que todos los elementos HTML box-sizing La propiedad se establece en border-boxDe esta manera, se asegura de que el ancho y la altura totales de los elementos incluyan los márgenes internos (relleno) y los bordes.

Añada el siguiente código en CSS:

* {
  box-sizing: border-box;
}

Por favor, visite nuestra Box Sizing CSS Lea más sobre la propiedad box-sizing en este capítulo.

El siguiente ejemplo muestra una página web sencilla de respuesta a dispositivos móviles, que contiene dos columnas:

25%
75%

ejemplo

.menu {
  ancho: 25%;
  float: left;
}
.main {
  ancho: 75%;
  float: left;
}

Pruebe personalmente

Si la página web solo contiene dos columnas, el ejemplo anterior es bastante bueno.

Pero, queremos usar una vista de cuadrícula responsiva con 12 columnas para controlar mejor la página web.

Primero, debemos calcular el porcentaje de una columna: 100% / 12 columnas = 8.33%.

Luego, creamos una clase para cada una de las 12 columnas, es decir class="col-" y un número, que define el número de columnas que debe cruzar esta 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%;}

Pruebe personalmente

Todas estas columnas deben flotar a la izquierda y tener un relleno interno de 15px:

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

Cada fila debe estar envuelta en <div> El número total de columnas en línea debe ser 12:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Todas las columnas en línea se desplazan a la izquierda, por lo que salen del flujo de la página y dejan espacio para otros elementos, como si no existieran estas columnas. Para evitar esto, agregaremos estilos de limpieza de flujo:

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

Quisiéramos agregar algunos estilos y colores para que se vea más bonito:

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;
}

Pruebe personalmente

Tenga en cuenta que cuando ajusta la ventana del navegador a un ancho muy pequeño, la página del ejemplo no se ve ideal. En el próximo capítulo, aprenderá cómo resolver este problema.