Artículos de Tecnología > Front End

CSS: Grids y tablas con responsividad en la Web

Mario Souto
Mario Souto

Grids consisten en dividir una proporción de la pantalla del usuario en partes iguales con espaciado entre ellas. Similar al antiguo sistema de table que teníamos, pero de manera receptiva, para que el sitio brinde una excelente experiencia de usuario.Los smartphones son prácticamente parte de las manos de todos los que tienen uno, todo el tiempo accedemos a apps de todo tipo (incluso recordando beber agua) y en ocasiones incluso nos olvidamos que detrás de muchas de estas hay una versión web que funciona tan bien cuánto.Diferentes sites acessados via um celular

Con el nivel de experiencia en el uso de las aplicaciones, la web se vio obligada a tener un estándar de calidad superior y una de las bases de esta experiencia es que un sitio sea realmente responsivo y eso es exactamente lo que veremos con más detalle en la publicación de hoy. y entender el concepto de grid del que se habla mucho.

¿Qué es el Grid?

Exemplo de grid com colunas

La idea de tener un grid consiste básicamente en dividir una proporción de la pantalla del usuario en partes iguales, con espaciamiento entre ellas. Esto ya existía desde el principio, cuando trabajábamos con columnas y celdas en el momento en que los sitios se hacían en tablas.

Site feito com tabelas

Como las tablas no son muy flexibles y ninguna otra tag de html tenía un estilo estándar siguiendo esta idea de dividir por partes iguales para definir una estructura, cuando surgió la necesidad de hacer diseños para múltiples dispositivos de diferentes tamaños, la cosa empezó a complicarse y muchos sitios antiguos que no se han actualizado todavía siguen hoy con un desplazamiento lateral.

Exemplo de site com scroll lateral

Con los diferentes tipos de pantallas que existen, el código CSS necesitaría tener muchas adaptaciones para que todo funcione si no hubiera un grid que sirviera como un lenguaje común con respecto al ancho de las cosas entre los diseñadores y los front-enders, porque el layout de un proyecto podría venir teniendo cada elemento un valor que cambiaría en las más diversas resoluciones, la idea es trabajar menos con valores fijos y más con valores relativos en css.

¿Y cómo hacer un grid con código?

Bueno, la mejor manera de introducir la parte del código es volver a la idea de dividir la pantalla en columnas del mismo tamaño como en la siguiente imagen:Grid com 12 colunas

Imagina que 12 significa el 100% del área disponible y 6 significa el 50% de esa área máxima donde se pueden presentar al usuario uno o varios contenidos, esta área se suele llamar contenedor.

Puedes leer también:

Artículos de Tecnología > Front End

En Alura encontrarás variados cursos sobre Front End. ¡Comienza ahora!

  • 101 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
  • Descuento de lanzamiento de 30%

Trimestral

Descuento de lanzamiento de 30%
  • 101 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
US$19,90
un pago de US$29,90 US$19,90
¡Quiero empezar a estudiar!

Paga en moneda local en los siguientes países

Semestral

Descuento de lanzamiento de 30%
  • 101 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
US$33,90
un pago de US$49,90 US$33,90
¡Quiero empezar a estudiar!

Paga en moneda local en los siguientes países

Acceso a todos los cursos
Estudia las 24 horas, dónde y cuándo quieras
Nuevos cursos cada semana