Responsive Web Design - Grid-View

---

¿Qué es grid-view?

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

Usar grid-view es muy útil al diseñar páginas web. Facilita la colocación de elementos en la página.

Una vista de cuadrícula y/o grid-view responsive a menudo tiene 12 columnas y un ancho total del 100%, y se reducirá y expandirá a medida que cambie el tamaño de la ventana del navegador.

Ver ejemplo

---

Construyendo un grid-view responsive

Comencemos a construir una vista de cuadrícula responsive.

Primero asegúrese de que todos los elementos HTML tengan la propiedad box-sizing 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 archivo CSS:

* {
  box-sizing: border-box;
}

El siguiente ejemplo muestra una página web responsive simple, con dos columnas:

Ejemplo:

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

Ver ejemplo

---

El ejemplo anterior está bien si la página web solo contiene dos columnas.

Sin embargo, queremos utilizar grid-view con 12 columnas para tener más control sobre 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, class="col-" y un número que define cuántas columnas debe abarcar la sección:

Ejemplo:

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

Ver ejemplo

---

Todas estas columnas deben flotar hacia 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 <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>

Todas las columnas dentro de una fila flotan 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;
}

Ver ejemplo

Observe 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.

---

Traducido con 💚 desde W3Schools.com