Reemplaza los diseños de Bootstrap con CSS Grid

20 junio, 2017 4:46 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

En marzo, Mozilla lanzó Firefox 52, que agregó el soporte para diseños con CSS Grid. Si no estás familiarizado con CSS Grid, es un sistema bidimensional para la web que nos permite crear patrones de diseño nativamente en el navegador. Esto significa que podemos recrear fácilmente las cuadrículas familiares con sólo unas cuantas líneas de CSS. Esto también significa que podemos hacer muchas más cosas con CSS y diseños que no eran posibles anteriormente… pero más sobre eso en un momento.

Una nota rápida: Este artículo no pretende ser un tutorial exhaustivo sobre CSS Grid, y se asume una familiaridad básica con CSS Grid. Si aún no la tienes, te recomendamos revisar la fantástica página sobre diseños con CSS Grid en la MDN.

Los diseños en la web han sido difíciles. Cuando la web fue introducida por primera vez, no habían métodos para diseñar. Entonces llegaron las tablas (dentro de tablas, dentro de tablas, etc.). Esto era feo y raro, pero funcionaba. Cuando CSS fue introducido en los 90, los desarrolladores pudieron crear diseños con div y float. Ésto llevó a empezar sistemas de cuadrículas que ayudaban a dar sentido a todas las “trampas” como limpiar divisiones flotantes, márgenes negativos, diseño adaptable y más. Y así han sido las cosas por años hasta ahora. Hay miles de sistemas de cuadrícula, pero todos ellos son más o menos lo mismo.

Ahora que diseñar con CSS Grid es una realidad, queremos ver qué se necesita para reemplazar un framework de cuadrícula existente con CSS Grid. Para este experimento, hemos escogido el popular framework Bootstrap.

Vamos a empezar a crear un sitio básico usando la cuadrícula de Bootstrap:

Página hecha con Bootstrap

Vamos a analizar esto y convertirlo a usar CSS Grid.

En Bootstrap, la clase .container envuelve todo y establece restricciones de ancho. También agrega un padding a los bordes derecho e izquierdo, y centra todo. No hay mucho que cambiar aquí. Al igual que en Bootstrap, la clase .container puede ser útil par usar con CSS Grid. Podemos dejarla de esta forma:

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

También puedes agregar media queries para diseño adaptable agregando lo siguiente:

@media (min-width: 992px) {
    .container {
        width: 970px;
     }
}

Bootstrap usa la clase .row para envolver las columnas, y proporciona un margen negativo a la izquierda y derecha para negar el padding agregado por las columnas individualmente. Hacks como los márgenes negativos ya no son necesarios con CSS Grid, pero si has leído la documentación, sabrás que CSS Grid requiere de un contenedor de cuadrícula. La clase .row es el lugar perfecto para poner esto. Lo que tienes que hacer debe quedar como esto:

.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
}

display: grid crea el contenedor de la cuadrícula.

La propiedad grid-template-columns define las columnas para la cuadrícula. Puedes usar espacios para definir cada columna individualmente, pero aquí utilizamos la notación repeat para definir 12 columnas del mismo tamaño. 1fr hace referencia al ancho individual de una columna. MDN define la unidad fr como una nueva unidad que “representa una fracción del espacio disponible en el contenedor de la cuadrícula”. Puedes leer más sobre las unidades fr en la MDN. También puedes leer más sobre la propiedad grid-template-columns.

Finalmente, la propiedad grid-gap es una propiedad atajo que define a la vez la cantidad de espacio entre las columnas y entre las filas de columnas. Piensa en ella como si fuera un canal. Puedes leer más sobre grid-gap aquí.

Ahora, todo lo que queda son las clases para las columnas. Bootstrap usa clases para las columnas como .col-md-6 o .col-lg-8 para determinar el número de columnas que un div debería abarcar. También hace que el div flote y agrega relleno a la izquierda y derecha para crear canales entre las columnas. Recrear estas clases es increíblemente fácil gracias a la propiedad atajo .grid-column. Por ejemplo, si queremos recrear la clase .col-md-6, podemos usar los siguiente:

@media (min-width: 992px) {
    .col-md-6 {
        grid-column: span 6;
    }
}

Simple, ¿verdad? Sin elementos flotantes. Sin padding. Y funciona. El atajo grid-colum especifica un tamaño y lugar de los elementos. Podemos usar span para indicar que este elemento en particular debe abarcar seis columnas. Los canales son generados automáticamente debido a la propiedad grip-gap de los contenedores. Puedes aprender más sobre la propiedad grid-column aquí.

¿Y qué pasa cuando pones todo esto junto? Bueno, en el sitio web se ve exactamente lo mismo, pero somos capaces de remover completamente la dependencia de Bootstrap y usar las cuadrículas nativas de CSS.

Este tipo de experimento es un divertido ejercicio de aprendizaje, pero también peligroso. Para citar al sabio filósofo Jeff Goldblum:

“Tú.. estuviste tan preocupado por si podías o no, que no te detuviste a pensar si deberías.”

No queremos limitar CSS Grid a convertirlo en una sintaxis que limitará su potencial. Somo capaces de recrear fácilmente las cuadrículas de Bootstrap, pero CSS Grid es más poderoso que cualquier sistema de cuadrícula que ya exista. Eso es porque es una solución web nativa construida desde cero.

Ya no estamos limitados a una cuadrícula de 12 columnas que flotan de derecha a izquierda. ¿Quieres poner los elementos en lugares precisos en la cuadrícula, independientemente de su orden inicial en HTML? Lo puedes hacer. ¿Quieres crear elementos que abarquen múltiples columnas y filas? No hay problema. Mira esta demostración que Craig Cook de Mozilla ha creado para varios de ejemplos con patrones de diseño. Trata de recrear algunos de esos diseños usando Bootstrap (pista: no es posible). Apenas estamos tocando la superficie de lo que se puede hacer con CSS Grid.

Si quieres aprender más sobre CSS Grid, revisa las siguientes fuentes:

The following two tabs change content below.

AngelFQC

Web Developer at BeezNest Latino
Ingeniero de Sistemas y Computación. Desarrollador PHP. Mozilla Peru. Chamilo LMS Developer.

Compartir artículo:

Notable Replies

  1. Muy interesante! La verdad es que me viene muy bien la información. Tengo una página en wordpress y llevo un tiempo queriendo cambiarla por una en html. A ver si no me lío mucho con el CSS Grid y aprendo de una vez por todas. Saludos.

Continue the discussion foro.mozilla-hispano.org

Participants

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa