Share
En este tutorial vamos a utilizar CSS Grid para ayudarnos a crear un "diseño de cuadrícula roto", algo que siempre ha sido difícil con los métodos de diseño CSS más tradicionales..
Esto es en lo que estamos trabajando (mire la versión más grande para un efecto completo):
Este diseño se basa en el trabajo de Anthony Harmon, cuyo trabajo es perfecto para nuestra demostración. Eche un vistazo a este diseño que hizo para Rel Acoustics:
Saludos Anthony :)Los diseñadores web se han condicionado a lo largo de los años para observar el flujo de documentos y el orden de origen; creando diseños mediante bloques flotantes y dejándolos llenar la página como construir ladrillos. En el mundo del diseño responsivo, este enfoque parece bastante natural. Sin embargo, está muy lejos del diseño de impresión, donde las dimensiones fijas significan que los diseñadores pueden colocar con confianza el texto y las imágenes exactamente donde lo desean, lo que lleva a diseños más experimentales y visualmente atrevidos..
CSS Grid, más allá de permitirnos organizar cosas a lo largo de los ejes x e y, puede ayudarnos a cerrar la brecha de diseño y ser un poco más atrevidos con nuestros diseños!
"Tenemos que empezar a reimaginar lo que puede ser un buen diseño gráfico con cosas que se superponen". - Jen Simmons
Es hora de atascarse.
Las columnas de cuadrícula no tienen que ser uniformes. Tomemos una sección del diseño de arriba y veamos cómo se ve la cuadrícula..
Nota: estamos construyendo una sección en este tutorial. No hay razón para que cada una de las secciones de la página no pueda construirse a partir de grillas independientes..
Comenzaremos con un marcado, un contenedor de cuadrícula:
A continuación, en ese contenedor, declararemos pantalla: rejilla; luego define las columnas y filas.
.grid1 display: grid; cuadrícula-plantillas-columnas: 3fr 6fr 1fr 5fr 10fr 2fr; rejilla-plantilla-filas: auto de 100px 15px auto;
Las columnas están dispuestas tal como las ves en la imagen de arriba. los fr la unidad es una fracción de todo el ancho, por lo que la primera columna ocupa tres de ellas, la segunda es más ancha y ocupa seis. En total, nuestro diseño consta de 27 unidades de ancho, casi clásicas proporciones de rejilla.!
Las filas son un poco diferentes. Verás una mezcla de medidas de píxeles fijos y auto. Dónde auto se utiliza, la fila crecerá y se reducirá dependiendo del contenido.
Comencemos con las imágenes. Para el marcado tenemos un par de opciones; o bien usamos img Elementos, o utilizamos otros elementos con un fondo de imagen..
Podriamos usar ajuste de objeto: cubierta; en img Elementos, pero eso es complicado, ¿por qué hacer nuestras vidas más difíciles? Así que para esta demostración iremos con la última, porque eso nos da una mayor flexibilidad en cuanto a cómo cambian las proporciones de las imágenes con diseños fluidos..
Da la bienvenida a algunos buenos amigos:
Con algunas imágenes de fondo para cubrirlas:
.img1 background: url (wooden.jpg); tamaño de fondo: cubierta; .img2 background: url (speaker.jpg); tamaño de fondo: cubierta; .img3 background: url (waves.jpg); tamaño de fondo: cubierta;
El algoritmo de colocación automática de Grid ya los habrá puesto ordenadamente en nuestra grilla, pero seamos específicos. Usaremos las líneas de la cuadrícula para determinar dónde debe comenzar y terminar cada elemento..
Nuestra primera imagen comienza en la línea 1 de la columna y termina en la 3. Podemos definir eso de la siguiente manera:
cuadrícula-columna: 1/3;
o así:
cuadrícula-columna: 1 / tramo 2;
En términos de filas, nuestra primera imagen debe comenzar en la línea 2 de la fila y terminar en la 5, lo que podemos decir así:
fila de la cuadrícula: 2/5;
o esto:
fila de la cuadrícula: 2 / span 3;
Ahora hagamos lo mismo con nuestras otras dos imágenes. Esto es lo que debes terminar con:
Es cierto que no es particularmente impresionante, pero eso es porque la mayoría de las filas aún no tienen altura. Obtendrán eso una vez que comencemos a agregar más contenido en el siguiente paso..
Para más información sobre cómo columna de cuadrícula y fila de rejilla trabajo, eche un vistazo a estos tutoriales rápidos:
Ahora agreguemos el contenido textual; un blockquote dentro de un contenedor, y el bloque call to action. Puedes agregarlos donde quieras como elementos secundarios de la .cuadrícula1 contenedor, orden de la fuente realmente no importa.
"Casi de inmediato, se corrió la voz de un galés que había construido este increíble sistema de sub bajos de sonido, y pronto los audiófilos comenzaron a buscar estos legendarios submarinos que se construyeron como ningún otro".Gibraltar
Presentamos 212 / SE, nuestro subwoofer más potente y ágil, diseñado exclusivamente para sistemas y salas más grandes para permitir que los altavoces de vanguardia superior lleguen a la voz plena.
Ver detalles del producto →
A continuación, antes de que diseñemos algo, los colocaremos en la cuadrícula tal como lo hicimos con las imágenes:
.strapline grid-column: 3 / span 3; fila de la cuadrícula: 2 / span 1; .cta-wrapper grid-column: 4 / span 2; fila de la cuadrícula: 4 / span 2;
Buscando mejor!
En este punto, vale la pena señalar que puede jugar con el índice z si lo desea. El apilamiento sigue el orden de origen por defecto; lo primero en el marcado se colocará en la parte inferior, lo que se declara más adelante va arriba. Pero si fuéramos a aplicar índice z: 1; a .img1 sería apilado encima de .img2.
Encender el inspector de su navegador hoy en día le dará alguna ayuda con el diseño de cuadrícula. En el inspector de Chrome, la selección de elementos levantará las líneas de cuadrícula y las mediciones, como:
El inspector dentro de Firefox hará aún más, permitiéndole superponer la cuadrícula usando los controles debajo de Diseño lengüeta. Puede mostrar los números de línea, los nombres de área y navegar por las áreas de la cuadrícula en una versión en miniatura más pequeña:
Propina: al ver bajo el Reglas pestaña, pulsa el icono de cuadrícula junto a monitor para alternar la superposición:
Al inspeccionar la cuadrícula, se dará cuenta rápidamente de si ha colocado mal alguno de los elementos de la cuadrícula, omitió una fila aquí o allá o si nombró algo incorrectamente..
Algunas declaraciones de fuentes rápidas y estilos de botones harán que esto se vea aún mejor, sin demasiado esfuerzo. Comenzaremos por vincular algunas fuentes de Google en el del documento:
Estamos usando Open Sans para el cuerpo, Playfair Display para el blockquote y el encabezado. Vamos a aplicarlos:
cuerpo color: # 292929; fuente: 1em / 1.7 'Open sans', sans-serif; blockquote font: italic 1.1em / 2 'Playfair Display', serif; margen: 0 0 2em 0; .cta h1 font: bold 6em / 1 'Playfair Display', serif; margen: 0 0 20px 0; posición: relativa;
Ahora algunos estilos de botones:
.botón display: inline-block; color blanco; texto-decoración: ninguno; fondo: # 292929; relleno: .8em 1.5em; .button: hover background: black;
Por último, alinearemos la cita del bloque con el centro, luego agregaremos algo de relleno a la llamada a la acción, ayudando a completar la fila en la que se colocó. Esto es lo que debería tener ahora:
Tenga en cuenta que estamos construyendo nuestro diseño para una vista amplia. Lo que ves integrado en el tutorial puede no parecer óptimo.
El diseño en el que estamos trabajando tiene un par de toques visuales que aún no hemos utilizado. Podríamos agregarlos de varias maneras, pero como no lo son contenido como tal los agregaremos usando pseudo elementos CSS. Primero, el garabato sobre el blockquote:
.strapline margin-top: 100px; posición: relativa; .straplina :: antes contenido: "; pantalla: bloque; fondo: url (wavy.svg) repetición-x; fondo-tamaño: cubierta; ancho: 20%; altura: .5em; posición: absoluta; superior: - 3em; izquierda: 40%;
Estos estilos utilizan un ::antes de pseudo elemento en el .línea recta div, colocándolo por encima del contenedor utilizando una posición superior negativa. Está perfectamente centrado, y recordará que le dimos suficiente espacio definiendo nuestra primera fila como de 100px de altura.
Haremos algo similar para una insignia SVG en el encabezado:
.cta h1 :: before content: "; display: bloque; altura: 1em; ancho: 1em; fondo: url (badge.svg) centro central sin repetición; fondo-tamaño: 80%; posición: absoluta; izquierda: - 120px; arriba: 0;
Nuevamente, estamos usando un pseudo elemento porque es simplemente un florecimiento visual en lugar de ser un contenido valioso. Eso no quiere decir que no podría haberlo añadido como un
¡Ahora hemos construido un diseño de rejilla roto muy sólido! Es hora de que algunos próximos pasos lo lleven aún más lejos.
CSS Grid es bastante compatible en la actualidad, aunque IE11 aún requiere una versión con prefijo, por lo que es posible que desee envolver sus estilos de cuadrícula en un @supports declaración. Eso se vería algo así:
@supports (display: grid) / * diseño de grid * / .grid1 display: grid; cuadrícula-plantillas-columnas: 3fr 6fr 1fr 5fr 10fr 2fr; rejilla-plantilla-filas: auto de 100px 15px auto; …
Cualquier navegador que no sea compatible con CSS Grid ignorará lo que haya colocado dentro de esta declaración, dándole la opción de proporcionar un respaldo..
Eche un vistazo a los "fallbacks" de cuadrícula y anule las ideas sobre cómo diseñar fallbacks si lo desea..
Nuestro diseño se ve nítido en pantallas más grandes, pero cuando se comprime en vistas más pequeñas (como cuando se integra en este tutorial) aparecen algunas grietas. ¿Cómo manejarías esto de una manera sensible? Agregar consultas de medios le permitirá establecer los estilos primero y luego ir aumentando gradualmente para diseñar y hacer que la cuadrícula sea más compleja a medida que se amplían las vistas:
.grid1 display: grid; cuadrícula-plantilla-columnas: 1fr 1fr; pantalla solo @media y (min-width: 768px) .grid1 grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr; rejilla-plantilla-filas: auto de 100px 15px auto;
También puede optar por ocultar los adornos que creamos en dispositivos más pequeños, guardándolos hasta que haya más espacio en la pantalla para jugar. La decisión es tuya!
Aquí hay un ejemplo de cómo podría hacer que este diseño en particular sea sensible.
Este tutorial le ha dado un vistazo al mundo de los diseños alternativos que se pueden lograr con CSS Grid. Olvida los diseños que has estado practicando con flotadores y posicionamiento; ¡Rompe esos viejos hábitos! Comience a explorar diseños más complejos y veamos si podemos hacer que la web sea un poco más interesante..
Accentsconagua