Grid CSS: el futuro del diseño web ya está aquí

El año pasado tuve la oportunidad de participar en SmashingConf Barcelona, ​​una conferencia centrada en el diseño web. Como ya mencioné en mi publicación anterior sobre la conferencia, me sorprendió la notable calidad tanto del montaje como de las discusiones. La discusión que más me gustó fue Jen Simons, quien presentó algunas cosas interesantes que veremos pronto (o debería decir “Vemos ahora”) en el desarrollo web. Jen presentó funciones de EE. UU., Como cortar imágenes, eliminar letras iniciales, hojas de cubierta, múltiples columnas … Quiero que sepa mejor cómo funcionan estas (y otras) demostraciones, vea su lista de 2016, prestando atención especial. Su código fuente.

Ejemplo sobre cómo componer un póster publicitario utilizando HTML y cuadrícula simples: una nueva función CSS que (finalmente) es aceptada por todos los principales navegadores web. ¡Odio! ? La característica que más me gustó era CSS Grid. En ese momento, CSS Grid todavía estaba en desarrollo y ningún navegador lo acepta por defecto. Sin embargo, Jen le dijo al público que “hasta el próximo verano [este verano], todos los navegadores principales ya aceptarán redes CSS, por lo que debe aprender a usarlas” y bueno, tenía perfecta justicia. Entonces, creo que es hora de hablar sobre esta increíble característica y cómo puede usarla en sus propios desarrollos.
No hay “cuadrícula” CSS “sin” cuadrícula “antes de sumergirse en la cuadrícula CSS, probablemente deberíamos pasar unos minutos hablando sobre el diseño gris en general. Esencialmente, una cuadrícula define la estructura básica de su sitio. Uso de un conjunto de líneas invisibles (filas y columnas, de hecho) que genera la apariencia. Debido a que una imagen vale hasta mil palabras, aquí tiene esta definición abstracta descrita: cuadrícula con 12 columnas que se muestran en el sitio web de la BBC. (Fuente). Como puede ver, la web tiene dos secciones claras: bienvenida y noticias. Ambas secciones tienen una estructura subyacente de 12 columnas, incluso si estos dos bloques los usan de manera diferente. Por lo tanto, el primer bloque se divide en dos mitades: en el lado izquierdo, hay una noticia recomendada; En el lado derecho, hay cuatro noticias más pequeñas. El segundo bloque, por otro lado, divide el contenido en tres columnas distribuidas uniformemente.

Si está familiarizado con cuadros como Bootstrap o Foundation Twitter, ya conoce esta estructura de 12 columnas. Si alguna vez se ha preguntado por qué uso 12 columnas (en lugar de, por ejemplo, 10), la respuesta consiste en la flexibilidad que ofrece. 12 ofrece muchas más combinaciones que 10, porque 12 tiene más factores, es decir, se puede dividir en más números, que 10. y eso es todo lo que necesita saber sobre el diseño gris, un conjunto de columnas y líneas invisibles definen áreas en ¿Cuál colocará el contenido? Si desea profundizar el tema, eche un vistazo a la introducción de Ed Wassermann en las redes. Y, por favor, no dude en compartir nuestra propia experiencia en la sección de comentarios si siente que hemos omitido algo importante, ¿estoy seguro de que nuestros lectores lo apreciarán?
¿Cómo usamos para implementar el diseño de la red? Las cuadrículas no son nuevas, han estado con nosotros durante mucho tiempo. Si hablamos sobre el diseño web, todo comenzó con tablas, seguido de los hermosos y receptivos marcos que acabamos de mencionar (bootstrap, etc.). Ambas soluciones requerían una gran cantidad de marcado HTML para definir explícitamente la apariencia de la cuadrícula básica. Por ejemplo, intentemos recrear el sitio web de la BBC usando Bootstrap. El código fuente HTML probablemente se vería similar a él: lo que resulta en:
La apariencia de BBC implementada usando Bootstrap. Como puede ver, el código HTML resultante contiene claramente un aspecto de cuadrícula. Por ejemplo, si nos enfocamos en el primer bloque, verá que tenemos una “fila” dividida en tres columnas. El ancho de cada columna se especifica en las clases de atributo de clase (usando Bootstrap predefinido), pero aún debemos cambiar las alturas utilizando reglas CSS específicas. Es bastante feo, ¿no? ¡Todo se ve bastante similar a las tablas HTML! ?
Cómo crear una red CSS CSS Grid lo ayudará a separar el contenido de su presentación. Diría que CSS Grid es el sistema de diseño más fuerte que tiene ahora. Recreamos el ejemplo que acabamos de ver, pero usando la cuadrícula CSS en su lugar:

Como puede ver, el código HTML es mucho más fácil. No hay información sobre el código de resultados: cada sección contiene una lista simple de noticias. Si jugué esta página, se ve así (mantuve los colores para ayudarlo a ver el resultado):

El sitio web de la BBC está bloqueado sin ningún aspecto específico. Ahora, ¿cómo creamos la cuadrícula básica? ¡Usando reglas CSS simples y simples, por supuesto! En primer lugar, debemos aplicar algunas reglas para los contenedores parentales. Estas reglas especificarán la cuadrícula en sí (columnas, filas, espaciamiento, etc.): lo que resulta en:
La aparición del sitio BBC creado con la cuadrícula CSS. Desafortunadamente, aún no es perfecto: la primera noticia debería tomar 2 celdas. ¡Guau! Bastante genial, ¿verdad? Con solo unas pocas líneas CSS, ahora tenemos una hermosa cuadrícula tocada por nuestro navegador. Cada bloque se colocó automáticamente en una celda sin hacer nada más. Pero la página resultante no es exactamente lo que queríamos, ¿verdad? ¿Qué sucedió? Dividí el bloque de bienvenida en tres columnas y dos filas (es decir, 6 celdas). Sin embargo, este bloque tiene solo 5 noticias, lo que significa que el posicionamiento automático de los elementos dejará una celda vacía. Para remediar esto, necesitamos agregar una regla CSS adicional para el primer niño: debemos decirle al navegador que las primeras y más importantes noticias en la sección del encabezado tienen dos celdas:

resultando en la página que queríamos:
La aparición del sitio BBC creado exclusivamente utilizando la cuadrícula CSS. Solución simple y elegante, ¡que se ve increíble! ¡Tu lo quieres! ¡Eso es todo! Ahora tenemos el mismo resultado que tuvimos al principio, pero con un código fuente más simple y elegante. Logramos separar el contenido HTML del aspecto CSS de una vez por todas? Recursos para aprender la red CSS Para comenzar con CSS Grid, recomiendo CSS Grid Garden de Thomas H. Park. A lo largo de los 28 niveles, aprenderá todas las cosas básicas que necesita saber sobre las redes CSS:

Aprenda a usar la cuadrícula CSS con este hermoso juego. Otros recursos son: una guía completa de la red CSS en los trucos de CSS. No creo que este sitio necesite ninguna introducción … Aquí encontrará todas las propiedades de la cuadrícula CSS, junto con explicaciones y ejemplos detallados sobre cómo usarlas. El sitio web se divide en dos columnas de propiedades que se aplican al elemento contenedor (que definen la cuadrícula en sí) y las propiedades que se aplican a los niños.
Apariencia de la cuadrícula CSS en Mozilla. Probablemente menos detallado que el recurso anterior, este sitio web también contiene información útil sobre las redes CSS.

Ejemplos de cuadrículas. Algunos ejemplos de cuadrículas creadas usando la cuadrícula CSS. ¿Te preguntas cómo empezar? ¿Estos ejemplos le darán los modelos de apariencia perfectos?

Conclusión Finalmente podemos definir la apariencia de nuestros sitios web independientemente de nuestro contenido. CSS Grid definitivamente revolucionará el diseño web: es fuerte y elegante. ¡Aprenda esta nueva tecnología y aplíquela a sus nuevos proyectos!
El diseño web futuro es hoy. Imagen presentada por Dmitri Popov.