Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout

Maquetado CSS Grid: Columnas Fluidas y Mejores Medianiles

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: A Quick Start Guide
CSS Grid Layout: Using Grid Areas

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

En éste tutorial vamos a tomar la grilla de nuestro tutorial previo y usarla como herramienta de experimentación para aprender más sobre Grid. Mejoraremos la forma que definimos nuestros medianiles, exploraremos maquetados flexibles, la undad fr, y presentaremos la función repeat().

Unidades Flexibles

El objetivo de Grid es permitirnos controlar adecuadamente el maquetado en la web, así que hagamos fluída nuestra griilla estática antes de continuar. Si recuerdas, estábamos definiendo nuestra grilla con medidas de pixel estáticas:

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

En éste caso vamos a cambiar nuestras unidades en pixel por porcentajes. Como estamos definiendo nuestras anchuras de columnas y nuestras anchuras de medianiles manualmente tenemos que asegurarnos que los valores totales sean igual a 100%.

Considera el Medianil

Existe una nueva y más eficiente forma de declarar las medidas del medianil, y es con una propiedad hecha para tal propósito. Podemos usar la propiedad grid-column-gap y grid-row-gap, o mejor la abreviada grid-gap.

Usar ésta significa que no necesitamos más incluir trazos de grilla para acomodar nuestros medianiles, sólo necesitamos declarar las columnas y filas, así que en nuestro caso eso significa tres de cada una:

Hmm, eso es algo confuso, pero hace el trabajo. La diferencia que notarás es que las anchuras de columna ahora se agregan hasta el 100%; nuestros medianiles realmente serán restados de ellas automáticamente.

Repeat (Repetir)

Escribamos ésto en una manera más prolija usando la función repeat():

Ésto indica "repetir 33.33% tres veces" dándonos tres columnas: Y ni siquiera necesitamos la declaración grid-template-rows porque el valor auto es asignado como predeterminado de todas maneras. Ahora sólo necesitamos indicar qué tan grandes queremos nuestros medianiles:

grid-gap aceptará unidades fijas o flexibles, lo que significa que podemos combinar perfectamente columnas fluidas y medianiles fijos sin efectuar cálculos complejos.

Reestableciendo nuestros valores grid-column y grid-row

Algo está faltando: aún tenemos una carga de declaraciones grid-column y grid-row en nuestros elementos de la grilla, pero están erróneos porque ya no tenemos tantos trazos de grilla. Felizmente, porque estamos usando grid-gap para definir nuestros medianiles, podemos dejar el posicionamiento de los elementos en colocación automática-los elementos ya no caerán en los medianiles. Por ahora, removemos todos los posicionamientos:

La Unidad fr

Una mejora final puede efectuarse para hacer sencilla nuestra grilla; vamos a introducir fr, o unidad fraction. Una unidad fr describe "una pieza de la muchas piezas en que estamos diviendo ésto". Por ejemplo, podríamos declarar nuestras columnas usando:

Aquí hay un total de tres unidades fr, así que cada columna sería de un tercio de ancho. Aquí está otro ejemplo:

Ahora hay un total de cuatro unidades fr, así que la primera columna tomaría la mitad de la anchura disponible, con las otras dos columnas cada una tomando un cuarto.

Éstas unidades son realmente poderosas, especialmente en combinación con otras unidades de medida.

Aquí hemos declarado cuatro columnas:

  • la primera es fija con un anchura de 300px
  • la última es flexible 20% de la anchura del elemento contenedor grid
  • entonces las unidades fr son calculadas, dejando la segunda columna con una pieza del espacio restante.
  • y la tercera con tres piezas.

Se ve así, perfectamente resaltando la colocación automática pues nuestros nueve elementos cambian para llenar los medianiles:

Pero de vuelta a nuestra grilla original. Vamos a reemplazar el torpe e inexacto valor de 33.33% con 1fr:

Ejemplo en CodePen finalizado:

Conclusión

Recapitulemos:

  1. Grid aceptará unidades flexibles en combinación con unidade fijas de medidas.
  2. No necesitamos declarar medianiles dentro de nuestro grid-template, en lugar de ello podemos usar las propiedades grid-gap.
  3. grid-gap significa que no estamos obligados a posicionar nuestros elementos grid-podemos manejar más responsabilidad con colocación automáica.
  4. La función repeat() nos ahorrará tiempo y tener nuestras hojas de estilos vigentes.
  5. La unidad fr o fraction es una forma muy poderosa de describir plantillas de grilla.

Hemos recorrido un largo camino en sólo dos tutoriales, ¡pero ahora eres el orgulloso poseedor de una muy prolija y concisa grilla! En el próximo tutorial exploraremos las áreas grid, abordando la palabra reservada span y algunos otros maquetados prácticos.

Recurso Útiles

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.