Accentsconagua
Share
La forma en que abordamos el diseño en la web está cambiando, y en la vanguardia de ese cambio está el diseño de cuadrícula de CSS. Esta guía de inicio rápido actualizada omitirá los detalles y matices, en lugar de ayudarlo a quedarse atascado, ahora mismo..
CSS Grid Layout (conocido por sus amigos como "Grid") ha dado pasos agigantados en el último año, y como tal, encontrará soporte para el navegador bastante sólido hoy en día..
caniuse.comLa cuadrícula nos permite organizar elementos en una página, según las regiones creadas por guías.
En su forma más simple estas guías, o Líneas de cuadrícula, marco horizontal y vertical pistas de cuadrícula. Pistas de la rejilla sirven como filas y columnas, con canalones corriendo entre ellos. Donde las pistas de la rejilla horizontal y vertical se cruzan, nos quedamos con Células, al igual que usamos con tablas. Estos son todos los términos importantes para entender.
En la imagen de abajo verás una cuadrícula de demostración, mostrando:
Una cuadrícula básica, que resalta las líneas de cuadrícula, columnas, filas y celdasPara un diseño gráfico, puede que nos resulte más familiar si usamos exactamente la misma cuadrícula, pero separamos algunas pistas para proporcionarnos canales entre las áreas de contenido..
La misma cuadrícula, pero esta vez con un parecido sorprendente con la bandera finlandesa.Hay un último término que debemos aclarar antes de continuar:
Una de las muchas áreas de cuadrícula posibles en nuestra cuadrícula de demostración.UNA área de cuadrícula ¿Hay alguna parte de nuestra cuadrícula cercada por cuatro líneas de cuadrícula? Puede comprender cualquier número de celdas.
¡Es hora de construir esta grilla en el navegador! Comencemos con un marcado.
Para recrear la cuadrícula anterior, necesitamos un elemento contenedor; lo que quieras:
En ella vamos a colocar nueve elementos infantiles..
Bifurca este bolígrafo de arranque si quieres seguirlo. He añadido algunos estilos básicos para diferenciar visualmente cada elemento de la cuadrícula.
Primero, debemos declarar que nuestro elemento contenedor es una cuadrícula que usa un nuevo valor para el monitor propiedad:
.grid-1 display: grid;
Claro, eso fue fácil. A continuación, debemos definir nuestra cuadrícula, indicando cuántas pistas de cuadrícula tendrá, tanto horizontal como verticalmente. Lo hacemos con el rejilla-plantilla-columnas y cuadrícula-plantilla-filas propiedades:
.grid-1 display: grid; cuadrícula-plantilla-columnas: 150px 150px 150px; rejilla-plantilla-filas: auto auto auto;
Notarás tres valores para cada uno. Los valores para rejilla-plantilla-columnas Indique que "las tres columnas deben tener un ancho de 150 px". Los tres valores para cuadrícula-plantilla-filas Estado algo similar. Cada uno seria en realidad auto de forma predeterminada, tomando la altura del contenido, pero los hemos expresado aquí para visualizar claramente lo que está pasando.
Entonces, ¿qué tenemos ahora?
A cada uno de nuestros artículos se le ha asignado automáticamente un área de cuadrícula en orden cronológico. No está mal, pero nos faltan las canaletas. Hora de arreglar eso.
Grid viene con una solución específica para declarar mediciones de canaletas. Nosotros podemos usar rejilla-columna-brecha y rejilla de separación de filas, o la taquigrafía rejilla propiedad.
Agreguemos un canal fijo de 20px a nuestro .cuadrícula-1 elemento.
.grid-1 display: grid; cuadrícula-plantilla-columnas: 150px 150px 150px; rejilla-plantilla-filas: auto auto auto; rejilla: 20px;
Y ahora, nos quedamos con una grilla bonita y ordenada:
Eso es todo, estás listo y funcionando con Grid! Vamos a resumir los cuatro pasos esenciales:
pantalla: rejilla;.rejilla-plantilla-columnas y cuadrícula-plantilla-filas propiedades.rejilla propiedades.En la siguiente parte de esta serie, analizaremos la sintaxis de Grid, exploraremos diseños flexibles, fr unidad, la repetir() Funciona, y lleva nuestra simple grilla mucho más allá. Te veo allí!
