Merida Design Blog

Publicado el | Tutoriales / , ,

Como crear un grid css para páginas responsivas

Crear sitios web responsivos es cada vez mas sencillo, podemos lograrlo usando un layout con flexbox, apoyandonos en un grid o definiendo cuidadosamente los puntos para cambiar los estilos a través de @media queries.

Personalmente recomiendo usar un grid, ya que es mas rápido maquetar un sitio desde cero. Existen frameworks que nos ofrecen un grid entre muchas otras cosas como: Foundation y Bootstrap, sin embargo, a veces solo necesitamos el grid y es por eso que en este tutorial veremos como crear uno sencillo pero bastante flexible.

Índice de subsecciones:

 

Corrección del modelo de caja

Ántes de comenzar nuestro grid, el primer paso es estandarizar el comportamiento de los elementos tipo caja (div, p, h1, etc.), buscando que todos los navegadores tengan el mismo comportamiento que Internet Explorer (leiste bien, ie es el que lo hace correctamente).

Lo que este pequeño código hace es que cuando agregamos un padding, este será calculado hacia la parte interior del elemento, ya que si no hacemos esto y por ejemplo, agregamos un padding de 10px a un elemento de 500px, el tamaño real del elemento en el navegador sería de 520px, pero con esta solución el ancho y alto de los elementos no serán afectados sin importar el padding y border que se le aplique.

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

 

Columnas

Ahora definimos la clase .columns que será compartida por todas las columnas de nuestro grid y a la cual le asignamos las propiedades necesarias para que éstas se puedan alinear en una sola fila. Definimos también la clase .row que se encargará de contener las columnas.

...

.columns {
	float: left;
	min-height: 1px;
	padding: 0 15px;
	position: relative;
}

.collapse .columns { padding: 0; }

.row {
	max-width: 100%;
	min-width: 0;
	width: auto;
	margin: 0 auto;
}

[class*="column"] .row { margin: 0 -15px; }
.collapse [class*="column"] .row { margin: 0; }

Adicionalmente definimos también una clase que nos permita eliminar la separación entre columnas a la cual he llamado .collapse y la podemos ver en las filas 17 y 27.

 

Porcentajes

Una vez definido el comportamiento general de las columnas ahora definimos el porcentaje para cada tipo de columna, basándonos en un grid de 12 columnas.

...

.row .one { width: 8.33%; }
.row .two { width: 16.66%; }
.row .three { width: 25%; }
.row .four { width: 33.33%; }
.row .five { width: 41.66% }
.row .six { width: 50%; }
.row .seven { width: 58.33%; }
.row .eight { width: 66.66%; }
.row .nine { width: 75%; }
.row .ten { width: 83.33%; }
.row .eleven { width: 91.66%; }
.row .twelve { width: 100%; }

 

Clearfix

La siguiente clase evitamos que el contenedor de las columnas colapse dejando que el contenido de las columnas rebase la del contenedor.

...

.row:before, 
.row:after, 
.clearfix:before, 
.clearfix:after { content: ""; display: table; }

.row:after, 
.clearfix:after { clear: both; }

.row, 
.clearfix { zoom: 1; }

.wrapper { 
	max-width: 100%;
	width: 1000px; /* Modificar de acuerdo a sus necesidades */
	margin: 0 auto; 
}

La clase .wrapper la podemos usar como el contenedor principal del cuerpo de la página, dentro del cual colocaremos nuetro grid.

 

Media Queries

Por último definimos el punto de quiebre a partir del cual todas las columnas se mostrarán al 100% para que su contenido sea visto correctamente es dispositivos móviles. Yo he definido éste punto a los 700px, sin embargo lo puedes ajustar de acuerdo a las necesidades de tu contenido.

...

@media only screen and (max-width: 700px) {

  .row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }

  .column, 
  .columns { 
    width: auto !important; float: none; 
  }
  .column:last-child, 
  .columns:last-child { float: none; }
  
  [class*="column"] + [class*="column"]:last-child { float: none; }
  
  .column:before, 
  .columns:before, 
  .column:after, .columns:after { content: ""; display: table; }
  .column:after, .columns:after { clear: both; }

}

 

Les dejo un link a un demo, y el código fuente:

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


.columns {
	float: left;
	min-height: 1px;
	padding: 0 15px;
	position: relative;
}

.collapse .columns { padding: 0; }

.row {
	max-width: 100%;
	min-width: 0;
	width: auto;
	margin: 0 auto;
}

[class*="column"] .row { margin: 0 -15px; }
.collapse [class*="column"] .row { margin: 0; }

.row .one { width: 8.33%; }
.row .two { width: 16.66%; }
.row .three { width: 25%; }
.row .four { width: 33.33%; }
.row .five { width: 41.66% }
.row .six { width: 50%; }
.row .seven { width: 58.33%; }
.row .eight { width: 66.66%; }
.row .nine { width: 75%; }
.row .ten { width: 83.33%; }
.row .eleven { width: 91.66%; }
.row .twelve { width: 100%; }

.row:before, 
.row:after, 
.clearfix:before, 
.clearfix:after { content: ""; display: table; }

.row:after, 
.clearfix:after { clear: both; }

.row, 
.clearfix { zoom: 1; }

.wrapper { 
	max-width: 100%;
	width: 1000px; /* Modificar de acuerdo a sus necesidades */
	margin: 0 auto; 
}

@media only screen and (max-width: 700px) {

  .row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }

  .column, 
  .columns { 
    width: auto !important; float: none; 
  }
  .column:last-child, 
  .columns:last-child { float: none; }
  
  [class*="column"] + [class*="column"]:last-child { float: none; }
  
  .column:before, 
  .columns:before, 
  .column:after, .columns:after { content: ""; display: table; }
  .column:after, .columns:after { clear: both; }

}

Conclusión

Como puedes ver tener nuestro propio grid css no es complicado, y ahora nos podemos enfocar al contenido del sitio web sin perder mucho tiempo maquetando nuestro layout. Como mencioné anteriormente existen otras formas de hacer sitios web responsivos y las cuales estaremos viendo en futuros tutoriales.

Como siempre, si hay algún tema en particular que quisieras ver no olvides dejar tu sugerencia en el siguiente formulario o a través de los comentarios.



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: