Web ResponsiveComponents
Grid system

Grid system

Para construir una página debes empezar por distribuir el espacio horizontal utilizando un rejilla de 12 columnas. Como el site de InfoJobs es responsive el ancho de las columnas medido en pixeles variará en función al ancho total de la ventana del navegador pero será siempre porporcional, no pudiendo nunca suceder que tengamos unas columnas que tengan un ancho diferente al resto. Esta primera división del espacio de trabajo es lo que llamaremos a partir de ahora “Page grid”.

Page grid de 12 columnas aplicado a un panel de 970px de ancho.

Grid layouts

Dependiendo de la manera como quieras agrupar el contenido, y partiendo del page grid, puedes distribuir las 12 columnas para crear bloques. Es lo que hemos llamado “grid layouts”. El grid layout más básico consiste en usar el ancho total, es decir las 12 columnas, de manera que el contenido llegue de un extremo a otro de la página.

También puedes dividir el espacio por la mitad, de manera que tendrás dos bloques de 6 columnas cada uno, o dividirlo en tres, de manera que tendrás 3 bloques de 4 columnas cada uno. El tamaño mínimo que puede tener cada bloque es de 3 columnas y el máximo, como veíamos anteriormente, de 12 columnas.

Dependiendo del contenido que quieras mostrar puedes agrupar las columnas en bloques para crear grid layouts.

Content Grid

Una vez distribuido el espacio en bloques de columnas llega el momento de añadir el contenido. Para que el texto, imágenes y demás componentes que se muestran en cada bloque no estén justo en el borde de la página y haya un márgen suficiente entre bloque y bloque, usaremos el “content grid”. El content grid se crea añadiendo un gutter a cada columna. Este espacio entre columnas no puede ser ocupado por ningún elemento, y solo lo hemos de usar para separar el contenido.

  • Ancho de columna
  • 20dp
Layout 4/8 con el content grid aplicado.

480px and below

Para simplificar la estructura de contenido en tamaños de ventana pequeños debes usar tan solo 1 columna que ocupe todo el ancho de la página, en lugar de las 12 columnas que veíamos anteriormente.

  • Ancho de columna
  • 10dp
Columna full width con márgenes laterales.

Values and measures

En esta tabla podrás ver a modo de referencia el número máximo de columnas que puedes usar y los márgenes que debes respetar en base al ancho de la página. Recuerda que cada uno de estos anchos corresponde a un breakpoint, es decir el punto en el que el layout de la página cambia, pero entre breakpoints el contenido es líquido y se debe adaptar al ancho disponible sin modificar el layout.

Tabla de referencia de medidas.