CSS Grid Layout Columnas fluidas y mejores canales

En este tutorial vamos a tomar la cuadrícula de nuestro tutorial anterior y lo usaremos como área de juegos para mirar más a fondo en la cuadrícula. Mejoraremos la forma en que definimos nuestros canales, exploraremos diseños flexibles, fr unidad, e introducir el repetir() función.

Unidades flexibles

El objetivo principal de Grid es permitirnos controlar correctamente el diseño en la web, así que hagamos que nuestra red estática fluya antes de continuar. Si recuerdas, estábamos definiendo nuestra cuadrícula con medidas estáticas de píxeles:

cuadrícula-plantilla-columnas: 150px 150px 150px; rejilla-plantilla-filas: auto auto auto; rejilla: 20px; 

También es posible usar otras unidades aquí, como ems o rems, por ejemplo. O incluso unidades más inusuales como vh y vmin.. 

En este caso vamos a cambiar nuestras unidades de píxeles por porcentajes.. 

rejilla-plantilla-columnas: 33.33% 33.33% 33.33%;

Hmm, eso es un poco desordenado, pero de alguna manera hace el trabajo. Notará que los anchos de columna ahora suman hasta el 100%; nuestros canales se restarán de ellos automáticamente. rejilla aceptará unidades fijas o flexibles, lo que significa que podemos combinar perfectamente las columnas fluidas y las canaletas fijas sin cálculos complejos de nuestra parte.

Repetir

Vamos a escribir esto es una forma más limpia, usando el repetir() función:

cuadrícula-plantilla-columnas: repetir (3, 33.33%);

Esto declara “Repetir 33.33% tres veces” Dándonos tres columnas. Y ni siquiera necesitar la cuadrícula-plantilla-filas declaración porque la auto El valor se asigna como predeterminado de todos modos. 

Nota: cuando las columnas se definen usando valores%, usarán exactamente esos valores y agregarán cualquiera rejilla encima. Notará que la cuadrícula de arriba se ha desplazado hacia la derecha porque ahora tiene un ancho de 99.99% más las rejillas.

La unidad de fr

Se puede hacer una mejora final a nuestra cuadrícula simple, y resolverá el problema de ancho que acabamos de mencionar; vamos a presentar el fr, o fracción unidad. Una sola unidad fr describe "Una pieza de todas las piezas en las que dividimos esto". Por ejemplo, podríamos declarar nuestras columnas usando:

 cuadrícula-plantilla-columnas: 1fr 1fr 1fr;

Aquí hay un total de tres unidades fr, por lo que cada columna tendría un ancho de un tercio. Aquí hay otro ejemplo:

 cuadrícula-plantilla-columnas: 2fr 1fr 1fr

Ahora hay un total de cuatro unidades fr, por lo que la primera columna ocuparía la mitad del ancho disponible, con las otras dos columnas cada una tomando un cuarto.

Estas unidades son realmente poderosas, especialmente en combinación con otras unidades de medida:

rejilla-plantilla-columnas: 300px 1fr 3fr 20%;

Aquí hemos declarado cuatro columnas: 

• El primero se fija en 300px de ancho.
• El último es un 20% flexible del elemento contenedor de rejilla de ancho.
• luego se calculan las unidades fr, teniendo también en cuenta las canaletas, dejando la segunda columna con una parte del espacio restante
• y el tercero con tres piezas..

Se ve así, destacando perfectamente la colocación automática a medida que nuestros nueve elementos cambian para llenar los vacíos:

Pero volvamos a nuestra red original. Reemplazemos el valor torpe e inexacto del 33.33% con 1fr: 

 cuadrícula-plantilla-columnas: repetir (3, 1fr);

Pluma acabada

Conclusión

Entonces, para recapitular:

1. Grid aceptará unidades flexibles en combinación con unidades de medida fijas.
2. los repetir() La función nos ahorrará tiempo y mantendrá nuestras hojas de estilo mantenibles..
3. los fr, o fracción La unidad es una forma muy poderosa de describir plantillas de cuadrícula..

Hemos recorrido un largo camino en solo dos tutoriales, ¡pero ahora eres el orgulloso propietario de una cuadrícula muy limpia y concisa! En el siguiente tutorial exploraremos áreas de cuadrícula, echando un vistazo a la lapso palabra clave y algunos diseños prácticos.

Recursos utiles

• los tipo y fr unidad en W3C
• De nuevo, sigue a @rachelandrew