Gettin 'Griddy With It: construya su propia cuadrícula CSS y elimine los marcos

Casi todos los viajes de los desarrolladores de aplicaciones para el usuario comienzan con la ruta básica de HTML, CSS y JavaScript. Empiezas con la estructura, la haces lucir decente y luego haces algo. Sin embargo, en algún punto del viaje es fácil quedar atrapado en el mundo de los frameworks CSS y pasar por alto algunos de los detalles más finos.

Bootstrap viene con su bonita cuadrícula, usando solo unas pocas clases y un CDN para hacer esa bonita cuadrícula con capacidad de respuesta móvil. Y antes de que te des cuenta, comienzas a buscar ese marco cada vez que construyes un proyecto que necesita un diseño de cuadrícula. A menudo hacía lo mismo, eso es hasta que comencé "Gettin 'Griddy With It".

Lo que me envió por el camino de aprender CSS Grid fue cuando estaba tratando de construir un sitio usando Semantic UI React (el Bootstrap más bonito y menos vago). Sin embargo, al construir una cuadrícula, no podía hacer que dos columnas quedaran alineadas entre sí, y terminé jugando con cada margen y regla de relleno bajo el sol, para anular los estilos que el marco había incorporado. Fue una experiencia frustrante, y pasé más tiempo jugando con reglas de especificidad que codificando.

Ahí es donde entra en juego CSS Grid. CSS Grid es una adición relativamente nueva a CSS3 y es una maravilla. Tener que ir a un marco de red importado conduce a algunos problemas:

  1. Aumento del tamaño de los archivos. Cuanto más importe, más grande será su aplicación. En un punto en el que la velocidad es clave, reducir el tamaño del archivo de su aplicación es una idea increíblemente importante a considerar. En lugar de importar un marco o depender de un CDN lento, puede crear el suyo propio.
  2. Código menos legible. Aquellos de ustedes que han usado un marco conocen los nombres de clases cada vez más complejos y vagos que lo acompañan. ¿Quién no reconoce inmediatamente lo que class="col-6 col-md-4 col-sm-12"significa? ¿O quién quiere terminar escribiendo div.ui.segment.inverted.stackable.desktop.twelve.mobile.sixteenen su CSS?
  3. Menos personalización. Las reglas integradas de un marco pueden ser difíciles de anular. Puede terminar con nombres de clase largos para llegar a la especificidad correcta o terminar con una línea tras otra de !importantetiquetas para crear estilos personalizados que anulen el marco. La magia de CSS Grid es que puedes crear el tuyo propio y personalizarlo según tus necesidades, en lugar de depender de otros que no tenían en mente los detalles de tu proyecto.

Una cuadrícula CSS receptiva

CSS Grid es esencialmente un grupo de cuadros que puede caber en una página. Puede usar unidades numéricas para aumentar el tamaño de las cajas o tamaños relativos para que respondan mejor. Con la gran variedad de tamaños de pantalla que existen, esta es una gran ventaja. Digamos que desea crear un diseño de seis divs y desea que respondan con más columnas para diferentes tamaños de pantalla.

Esto es lo que parece sin formato como seis divsen un contenedor.

En lugar de tener que agregar clases para cada uno de los puntos de interrupción, puede establecer el tamaño mínimo del div en una cuadrícula y luego autocompletar con cuadros de respuesta más grandes utilizando la frpropiedad de tamaño. Solo tiene que agregar propiedades CSS Grid para el padre, y luego los small-boxdivs se completarán automáticamente.

El CSS para el contenedor es el siguiente:

Como puede ver, puede crear una cuadrícula receptiva simple a partir de solo cuatro líneas de código. No podría ser más fácil, y todo su contenido se puede mover y reproducir aleatoriamente según sea necesario. En este caso, ni siquiera son necesarias consultas de medios. Desde aquí, puede personalizar las casillas individuales en la cuadrícula. Es bastante flexible para diseños y tamaños receptivos. Juega con él y observa cómo las cajas se mueven mágicamente.

Áreas de cuadrícula

La otra razón por la que tendería a buscar una cuadrícula de marco era usarla para varios diseños en diferentes dispositivos. Es posible que desee que los componentes se muevan, según el tamaño de la pantalla en la que se encuentre.

A continuación, se muestra un ejemplo de diseños de sitios que puede que desee en el escritorio y la tableta. Cambiar esto es bastante simple. Aunque a algunos no les gusta la estructura, usted y usa una estructura de plantillas similar a ASCII para las áreas de la cuadrícula.

Digamos que tiene un diseño de página básico que tiene un encabezado, barras laterales, contenido y pie de página.

El diseño de la página sin formato se vería así con una cuadrícula básica de tres columnas configurada en 1fr 4fr 1fr. Los cuadros se llenarán para ajustarse al espacio asignado dentro de la cuadrícula. Sin embargo, si desea que el diseño de su página sea más fluido y dinámico como a continuación, puede usar template-areas.

Para obtener este diseño deseado, debe crear áreas de plantilla. Puede considerarlo como un mapa ASCII en miniatura que muestra dónde desea que vayan los cuadros en una página.

Para obtener el diseño del escritorio, haga su mapa en miniatura como en la grid-template-areaspropiedad. Cada línea contiene una fila y los nombres de las columnas correspondientes del diseño. Puede ver que las secciones de encabezado y pie de página se extenderán a lo largo de todas las columnas en las que están ubicadas. Además, las barras laterales y el contenido se extienden a lo largo de varias filas, como puede ver en el área de "mapa". Esto luego se puede convertir en cualquier diseño que necesite agregando la grid-areapropiedad a los divs correspondientes, como en la imagen de la derecha. Puede nombrarlos como corresponda a su proyecto.

Para que funcione en la vista de tableta, simplemente necesita realizar una consulta de medios y cambiar el orden en las áreas de su plantilla. Mueva fácilmente el contenido para obtener la vista deseada. (Tenga en cuenta que esto puede ocasionar problemas en los lectores de pantalla si tiene el contenido desordenado, así que asegúrese de que su contenido se lea de manera lógica).

Conclusión

Esta simple publicación definitivamente solo rasca la superficie de lo que puede hacer con CSS Grid. Pero creo que lo principal que hay que sacar de esto es que no debes tener miedo de usar CSS Grid. Realmente es bastante simple, poderoso y liviano una vez que se acostumbre a la nueva sintaxis. Adelante, disfruta de "Gettin 'Griddy With It".

Para obtener más información sobre CSS Grid, recomiendo encarecidamente verificar //cssgrid.io enseñado por Wes Bos. Es un fantástico tutorial CSS Grid.

Además, si tiene preguntas, asegúrese de visitar el sitio CSS Tricks en //css-tricks.com/snippets/css/complete-guide-grid/ para obtener más información sobre la cuadrícula.

Para ver más de mi trabajo, visite //theran.co y aprenda más sobre mí.