Que es una vista Grid (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 Responsive 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.
Creación de una vista de cuadrícula receptiva
Comencemos a construir una vista de cuadrícula Responsive. Primero, asegúrate 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.
Agrega el siguiente código en su CSS:
* {
box-sizing: border-box;
}
El siguiente ejm muestra una página sencilla responsive con 2 columnas.
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.menu {
width: 25%;
float: left;
padding: 15px;
border: 1px solid red;
}
.main {
width: 75%;
float: left;
padding: 15px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="main">
<h1>Prueba</h1>
<p>Esto es una prueba</p>
</div>
</body>
</html>
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.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Grid</title>
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
.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%;}
</style>
</head>
<body>
<div class="header">
<h1>Pruebas CSS Grid</h1>
</div>
<div class="row">
<div class="col-3">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="col-9">
<h1>La ciudad</h1>
<p>Aqui escribimos nuestro texto...</p>
</div>
</div>
</body>
</html>
Explicación del ejm
Todas estas columnas deben estar flotando a la izquierda y tener un padding de 15px:
[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:
<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</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:
.row::after {
content: "";
clear: both;
display: table;
}
También queremos agregar algunos estilos y colores para que se vea mejor:
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;
}
Nuestro ejm completo quedaría de la siguiente manera.
Ejm
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.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%;}
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;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete.
The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
</html>