Cómo crear un diseño de tarjeta usando el diseño de cuadrícula CSS

Nota del editor: esta publicación invitada fue escrita por Abbey Fitzgerald, ingeniera de software UX y diseñadora web que ama el arte de crear código.

Los diseños de cuadrícula CSS están cambiando la forma en que trabajan los diseñadores web, lo que permite una forma más eficiente de diseñar el contenido del sitio web.

Ha sido esperado durante mucho tiempo, pero finalmente este enfoque realmente ha despegado y, en muchos casos, está en producción. Ha revolucionado la forma en que se diseñan los sitios web y una vez que los diseñadores lo dominen, dará más flexibilidad a los diseños web.

Si ha intentado diseñar con CSS Grid y ha consultado tutoriales en la web, es posible que haya encontrado información relacionada con un enfoque de diseño general. Cosas como: encabezado, contenido, pie de página, etc.

Sin embargo, CSS Grid también puede ser útil para otros detalles del sitio web, como las tarjetas. Los diseños de tarjetas son una forma común de mostrar contenido y se pueden crear de manera eficiente con CSS Grid. Al usar este método, las áreas de contenido de la tarjeta se pueden repetir fácilmente, se pueden ver en muchos tipos de dispositivos diferentes y el tamaño se controla fácilmente.

Herramientas de diseño de cuadrícula CSS

A medida que avanza, querrá inspeccionar las cosas en la página. Firefox tiene excelentes herramientas de desarrollo para ver áreas de cuadrícula. Con las herramientas de desarrollo de Firefox, puede ver una superposición que delinea la cuadrícula. Firefox Developer Edition también tiene esta capacidad.

Seleccione la cuadrícula de superposición que desea mostrar (dependiendo de su diseño, puede haber más de una). La configuración de visualización de la cuadrícula le permite observar más de cerca al mostrar el número de línea, los nombres de las áreas y cómo desea que se extiendan las líneas. Esto será útil a medida que diseñe.

Tarjetas simples con diseño de cuadrícula CSS

Si es nuevo en CSS Grid, querrá repasar los conceptos básicos y crear un diseño de cuadrícula CSS simple. Las tarjetas son una excelente manera de mostrar contenido, así como un elemento de interfaz de usuario interesante que es intuitivo de usar. También brindan un excelente formato para que los usuarios escaneen rápidamente el contenido y se involucren con lo que más les interesa. Las tarjetas también permiten a los diseñadores formatear el contenido de una manera visualmente atractiva, con excelentes imágenes, contenido de introducción, enlaces y más.

Tarjetas y diseño de página general

Aparte, es importante saber que CSS Grid no tiene que usarse en un diseño de página completo. Las cuadrículas se pueden usar en ciertas áreas de la página si es necesario. Dado que este es un tutorial sobre diseños de tarjetas, aquí se puede usar exclusivamente un enfoque de cuadrícula, incluso si el resto de la página no utiliza CSS Grid. Siempre que el área de la cuadrícula esté definida y display: grid; se declara en el contenedor, se puede utilizar este enfoque.

Trabajar con un número determinado de tarjetas

En algunos casos, es fácil planificar una cantidad determinada de tarjetas. Con una cantidad determinada de contenido, la cantidad de tarjetas seguirá siendo la misma. Por ejemplo, puede haber cuatro tarjetas que expliquen las ofertas comerciales, con cada oferta en su propia tarjeta.

Para este ejemplo (y los demás), todos los elementos .card están dentro de un elemento contenedor .cards . Para lograr esto, es bastante simple.

 [css] .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-gap: 1rem; }   .card { border: 2px solid #e7e7e7; border-radius: 4px; padding: .5rem; } [/css]

Es importante mostrar el valor de .cards en la cuadrícula. Sin esto, no se pueden crear áreas de cuadrícula. El siguiente paso es definir las grid-template-columns y elegir el estilo. El estilo de la tarjeta real se declarará con una clase de .card .

En este ejemplo, verá varias etiquetas de artículos con la clase .card . Véalo en Codepen.

Repita para establecer el número de tarjetas

Aquí es donde las cartas comienzan a tomar forma. Para crear una cantidad fluida de columnas por fila, se usa repetición con la función repeat() . Esta función toma dos argumentos: número de veces a repetir y el valor a repetir.

Por ejemplo, grid-template-columns: repeat(3, 200px); computa a grid-template-columns: 200px 200px 200px; .

Unidad fraccionaria

Verá que el código de ejemplo usa un "fr". ¿Qué es eso exactamente? Esta unidad de medida se hizo popular con CSS Grid. Fr significa "unidad fraccionaria" y 1fr ocupa 1 parte del espacio disponible. Ayuda a simplificar los cálculos de espacio.

Las unidades fraccionarias se pueden usar solas o le permiten especificar un ancho de 1fr y también puede agregar elementos secundarios. Múltiples fr se compartirán por igual entre todos los elementos secundarios.

Se pueden especificar diferentes unidades fraccionarias. Por ejemplo, cuando las columnas de la cuadrícula son 1fr 2fr 1fr , dos unidades fraccionarias ocupan el doble de espacio que una unidad fraccionaria.

Repita para un número dinámico de tarjetas

En algunos casos, es posible que no sepa la cantidad de tarjetas necesarias, por lo que la planificación de un número fijo no funcionará. Se tomará el mismo enfoque que con la repetición, pero existe la opción de ajustar tantos como sea necesario con autocompletar.

 [css] grid-template-columns: repeat(auto-fill, 250px); [/css]

Se necesitan declaraciones de ancho además del auto-fill . Tenga en cuenta que, con un valor de px, puede haber espacio a la derecha cuando no hay suficiente para que quepa la tarjeta, pero este no tiene por qué ser el caso, como verá un poco más adelante.

Minmax para un mayor control sobre el ancho de la tarjeta

Minmax es la solución perfecta, ya que una unidad fraccionaria por sí sola haría las tarjetas de ancho completo. Agregar repetición y minmax a la declaración de estilo eliminará el posible espacio vacío y las tarjetas aparecerán más fluidas.

 [css] grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); [/css]

Las columnas siempre se ajustarán a la cuadrícula y las tarjetas tendrán al menos 200 px. Cuando el espacio mínimo no se ajusta perfectamente al espacio, aquí es donde entra en juego el ancho máximo. Cuando otra tarjeta de 200 px de ancho no quepa, las otras tarjetas serán más grandes que 200 px, por lo que se estiran para llenar la fila con más espacio y se distribuirán por igual. [id del artículo=”21612″ align=”right”]

Móvil

Ya que se han planeado las tarjetas más pequeñas y más grandes, este es un buen momento para hablar de móvil. Las tarjetas funcionan bien en dispositivos más grandes y más pequeños porque el contenido está en fragmentos digeribles y las tarjetas se pueden escalar hacia arriba y hacia abajo fácilmente. CSS Grid ayuda a crear una excelente experiencia móvil y, en algunos casos, es mucho más fácil que tener una consulta de medios por separado.

En este ejemplo, es necesario reducir el tamaño de las tarjetas para que quepan en el dispositivo móvil y aumentar el tamaño para que ocupen una fracción del espacio disponible, de modo que aparezcan de ancho completo en un dispositivo más pequeño, sin necesidad de una consulta de medios por separado:

 [css] grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); [/css]

El ancho mínimo de la tarjeta es de 300px. En la fila aparecerán tantas tarjetas de 300 px que quepan. Cuando el dispositivo es muy pequeño, es muy probable que no haya espacio disponible para dos tarjetas seguidas. Ahí es cuando entra en juego el 1fr . La unidad fraccionaria es excelente para diseños receptivos. Cuando dos de las tarjetas de 300 px no caben, aquí es donde la vista móvil se vuelve muy evidente. Cuando se ha declarado 1fr como el ancho máximo, una sola tarjeta ocupará todo el espacio disponible y se apilarán una encima de la otra.

Brecha de rejilla

Ahora que se ha establecido el ancho de las tarjetas, se debe tomar la decisión de dejar espacio entre ellas. Esta propiedad está disponible en contenedores de rejilla y facilita la creación de canales en el diseño. Grid-column-gap crea el espacio entre cada tarjeta. Cuando ves grid-gap , se refiere a la forma abreviada de grid-row-gap y grid-column-gap . Grid-row-gap es el espacio en la parte superior e inferior de la tarjeta, grid-column-gap es el espacio a la izquierda y a la derecha de la tarjeta.

Recursos de diseño de cuadrícula CSS

Cuando se trata de diseños de cuadrícula CSS, hay mucho que aprender y hay muchas posibilidades. La mejor manera de aprender sobre CSS Grid Layout es leyendo y experimentando un poco más. Existen muchos recursos excelentes, pero aquí hay algunos para que pueda comenzar:

• Cuadrícula por ejemplo
• Curso de diseño de cuadrícula CSS de Wes Bos
• Mozilla Introducción a CSS Grid