10 prácticos fragmentos de código de cuadrícula CSS

La especificación de cuadrícula de CSS no es exactamente "nueva", pero definitivamente es más nueva en el mundo de desarrollo convencional. Muchos codificadores frontend ni siquiera conocen las propiedades de la cuadrícula CSS todavía, y mucho menos cómo se aplican a una interfaz.

Puede encontrar muchos tutoriales buscando, pero también recomiendo estudiar fragmentos de código. De esta manera, se sumerge en proyectos del mundo real para que pueda ver cómo funcionan las cuadrículas CSS en una página web en vivo.

Esta colección debería ofrecer una gran cantidad de recursos para ayudarlo a aprender, personalizar y cambiar el estilo de las cuadrículas CSS para lo que sea que esté haciendo en la web.

1. Bloque de héroe de múltiples imágenes

Comencemos con este bloque de héroe realmente genial diseñado con propiedades de cuadrícula. Este diseño imita la sección de la imagen principal de la página de inicio que encontrará en muchos sitios web con estilo de revista.

La desarrolladora Rachel Andrew creó esto usando un poco de CSS personalizado de sus propios proyectos. Funciona increíblemente bien y el diseño responde completamente al arranque.

Sin mencionar que se ve fantástico en las pantallas de los móviles; no es algo que siempre encuentres con grandes bloques de imágenes.

Este es un excelente recurso para estudiar las cuadrículas CSS y un fragmento útil para cualquiera que codifique un tema de blog con estilo de revista.

2. Diseño de cuadrícula CSS

La propiedad grid-auto-flow está en pantalla completa con esta demostración utilizando la configuración "densa". Esto obliga a los elementos a meterse más abajo en la página a medida que la cuadrícula cambia de tamaño.

Con esta configuración, tiene mucho control sobre qué elementos de la página cambian de posición, dónde ocurren esos cambios y cómo debe responder la cuadrícula. Esto toma un asiento delantero sobre las consultas de los medios que se utilizan principalmente en el diseño receptivo.

Si no está seguro de lo que hace este código, recuerde: ¡Google es su amigo! Muchas publicaciones geniales e hilos de desbordamiento de pila que cubren toda esta configuración.

3. Datos no tan espeluznantes de la calabaza

Aquí hay un fragmento bastante bueno creado con algunos datos básicos de calabaza. Bueno, hechos de calabaza organizados por un diseño de cuadrícula CSS.

El código en realidad se ejecuta en SCSS/Sass, lo que significa que necesitará cierta familiaridad con el lenguaje para profundizar. Pero también puede compilar el código Sass en CSS sin formato dentro de CodePen si desea ver las propiedades básicas.

Una de mis cosas favoritas de este diseño es el color y la tipografía. Realmente grita Halloween con el ícono de calabaza y todos esos tonos de amarillo/naranja.

4. Diseño hexagonal automático

Este es quizás uno de los proyectos más prácticos que encontré para esta galería. Eche un vistazo a este estilo de cuadrícula e intente cambiar el tamaño de su navegador.

Notará que los elementos con forma hexagonal se reformatean para encajar en la página en consecuencia. Esta es probablemente la mejor manera de manejar páginas complejas con muchas fotos. A menudo veo este tipo de diseño en sitios web de conferencias y páginas "acerca de nosotros" para empresas con muchos empleados.

Ahora, con la estructura de cuadrícula CSS, no necesita preocuparse por los estilos de respuesta manuales. Y este fragmento de código es el mejor lugar para comenzar a planificar un diseño similar.

5. Pokédex en CSS Grid

Todavía tengo que ver algo tan creativo como este Pokedex en una cuadrícula CSS. Se basa en HTML y CSS con un poco de JavaScript para completar automáticamente los tamaños de celda.

A medida que cambie el tamaño de la página, notará que los gráficos también aumentan de tamaño. Esto es bastante fácil de manejar con CSS, y es aún más fácil una vez que aprendes algunas de las propiedades de la cuadrícula.

Tenga en cuenta que esto no es interactivo, por lo que no puede hacer clic en nada ni abrir nuevas páginas. Pero con la base de diseño establecida en piedra, sería bastante simple agregar esas funciones.

6. Cuadrícula sencilla

Aquí hay una idea realmente interesante que trae estilos de diseño de impresión a la web. Eche un vistazo a este ejemplo en CodePen que presenta muchas columnas con encabezados y tipografía de gran tamaño.

El diseño de la cuadrícula en sí se basa en columnas establecidas con espacios predefinidos. Esto significa que a medida que cambia el tamaño del navegador, ciertas columnas se desglosan de acuerdo con estas reglas.

Es una excelente manera de asegurarse de que ciertas columnas siempre aparezcan una al lado de la otra, o al menos que aparezcan a la vista, para que sean fáciles de leer.

7. CSS Grid con Flexbox Fallback

No todos los navegadores se han puesto al día con la estructura de cuadrícula CSS. Es por eso que este fragmento le enseña cómo diseñar una cuadrícula CSS personalizada usando flexbox (y flotantes) como respaldo.

Esto es realmente complicado ya que desea utilizar las propiedades de la cuadrícula si son compatibles, pero desea que el navegador las ignore si no. Afortunadamente, el código está bien comentado para que pueda profundizar e incluso intentar ajustar algunas de las características por sí mismo.

No llamaría a esto una solución alternativa perfecta, pero definitivamente es mejor que nada.

8. Demostración de terminología de cuadrícula

¿No está seguro de toda esta confusa terminología de cuadrícula CSS? Entonces este fragmento puede ayudar a aclarar las cosas.

Si profundiza en este ejemplo, encontrará algunas características destacadas con escritos que explican las cuadrículas en el camino. También aprenderá cómo mirar correctamente las líneas de la cuadrícula y cómo ver las cuadrículas CSS con precisión en la página.

Tenga en cuenta que no obtendrá todo de esta demostración porque no cubre todo. Es solo una pequeña introducción a las propiedades más fáciles con ayudas visuales.

9. Usando columnas de plantilla de cuadrícula: repetir ()

Para ver un ejemplo muy específico de la propiedad grid-template-columns, eche un vistazo a esta demostración en vivo. Le muestra cómo usar la función de repetición en lugar de declarar el mismo valor de columna varias veces en su CSS.

Una vez más, la compatibilidad con los navegadores aún se está poniendo al día, pero la mayoría de los navegadores web modernos funcionan con esta técnica.

Sin mencionar que encontrará muchos comentarios dentro del CSS para ayudarlo a comprender lo que hace.

10. Crucigrama de cuadrícula de CSS puro

Para terminar con una nota divertida, eche un vistazo al crucigrama CSS puro de Adrian Roworth. Todo este diseño se basa en nada más que código HTML y CSS, específicamente las propiedades de la cuadrícula CSS para la estructura del diseño.

Lo que es aún más loco es que puedes ingresar contenido en los cuadros de crucigramas para resolver los acertijos. ¡Cuan genial es eso!

Tenga en cuenta que esto es bastante complejo y es uno de los pocos proyectos enumerados aquí que no es compatible con dispositivos móviles. Pero es una prueba de lo lejos que hemos llegado con los diseños de cuadrícula en la web, así que espero que veamos mucho más de este tipo de cosas en un futuro próximo.