Cómo crear un diseño simple con diseños de cuadrícula CSS

Si alguna vez ha incursionado en el diseño de impresión, sabe de dónde se originó la idea de los diseños de cuadrícula. Una cuadrícula es una herramienta de medición precisa que se utiliza para colocar elementos de diseño en una página. Esta idea se usa a menudo en la web para organizar y uniformar el contenido, lo que mejora la experiencia de visualización de los usuarios.

Cuando la práctica del diseño web era nueva, los diseños eran bastante simples. Encabezado, barra lateral, área de contenido y pie de página. Ahora, a medida que la web ha evolucionado, nuestros diseños se han vuelto más complejos y tenemos mucho más con lo que lidiar como diseñadores web. A menudo necesitamos numerosas regiones de contenido, diseño receptivo, diseños de plantillas de diseño de múltiples páginas, entre muchas otras cosas. Y para implementar el diseño y hacer que se muestre correctamente, se requieren flotadores y posicionamiento. Los flotadores suenan simples, pero a veces puede ser complicado trabajar con ellos.

Afortunadamente, la cuadrícula proporciona una forma más fácil de diseñar y mostrar contenido web. Es un momento increíble para ser diseñador porque los diseños de cuadrícula CSS están ganando terreno rápidamente. Puede parecer que las cuadrículas han sido una idea nueva en el diseño web en los últimos años, pero créalo o no, los diseños de cuadrícula CSS han estado en proceso durante muchos años. El soporte del navegador para ellos sucedió muy rápidamente, por lo que ahora pueden ayudar a aliviar parte de la frustración en torno al posicionamiento que los diseñadores han tenido que enfrentar durante muchos años.

¡Finalmente es hora de entrar en la red y explorar las nuevas posibilidades de diseño!

Soporte de cuadrícula CSS

Todo depende de los navegadores que necesite admitir, pero es muy probable que no tenga que preocuparse por el "modo de bandera" al usar CSS Grids. Siempre puede visitar la documentación ¿Puedo usar para verificar dos veces, pero el soporte para CSS Grids ha aumentado dramáticamente y muchos diseñadores pueden usarlo en producción, lo cual es motivo de celebración!

Conceptos básicos del diseño de cuadrícula CSS

Al utilizar CSS, los diseños de cuadrícula ayudarán a definir las áreas de contenido en su página web. Hay un conjunto relativamente nuevo de propiedades definidas en las Especificaciones de diseño de cuadrícula CSS. Este es un gran recurso de referencia cuando se aprende más sobre esta nueva forma de diseño de diseño. Los diseños de cuadrícula CSS ayudan a simplificar las cosas y facilitan la creación de diseños. Piense en la cuadrícula como una estructura donde se pueden definir las medidas.

Partes de la cuadrícula

Líneas

En este caso, hay cinco líneas verticales y tres líneas horizontales. A las líneas se les asignan números a partir del uno. Las líneas verticales se muestran de izquierda a derecha en este ejemplo, pero esto depende de la dirección de escritura. Debido a que esto muestra la lectura de izquierda a derecha, si es de derecha a izquierda, las cosas se invertirán. Las líneas pueden recibir nombres (opcional), lo que ayuda a hacer referencia a ellas en CSS.

Pistas

Una pista es el espacio entre dos líneas paralelas. En el diagrama, hay cuatro pistas verticales y dos pistas horizontales. Hay un gran esfuerzo dual entre líneas y pistas. Las líneas son una excelente manera de hacer referencia a dónde comienza y termina el contenido. Las pistas son donde realmente va el contenido.

Células

Las celdas se encuentran donde se encuentran una pista horizontal y una vertical. Hay ocho celdas en el diagrama.

Áreas

Las celdas entran en juego al especificar áreas. Un área es una forma rectangular que puede abarcar varias celdas. Al igual que las líneas, las áreas se pueden nombrar opcionalmente. Hay algunas etiquetas incluidas en el diagrama: "A", "B" y "C".

Creación de un diseño de cuadrícula

Puede ser útil hacer un bosquejo de las cosas antes de comenzar con el diseño. No hay sustituto para el buen papel cuadriculado.

HTML para la grilla

 [html] <div class="container"> <div class="grid header">Header</div> <div class="grid sidebar">Sidebar</div> <div class="grid content">Main Content</div> <div class="grid extra">Extra Content</div> <div class="grid footer">Footer</div> </div> [/html]

El contenedor es muy importante. Dentro del contenedor se encuentran los diferentes bloques de contenido para el sitio web. El orden de los elementos de la cuadrícula dentro del contenedor no importa. A continuación, usaremos CSS para colocarlos en nuestro diseño.

estilos CSS

Una vez que haya terminado con el marcado HTML, la declaración más importante se realiza en el CSS. Dentro del contenedor, debe aplicar display:grid o display:inline-grid . Use display:grid si desea una cuadrícula a nivel de bloque. Use display:inline-grid para cuadrículas de nivel en línea.

 [css] .container { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 10px; grid-row-gap: 15px; } .grid { background-color: #444; color: #fff; padding: 25px; font-size: 3rem; } [/css]

Las propiedades grid-template-columns y grid-template-rows se utilizan para especificar el ancho de las filas y columnas. Las grid-template-columns se han establecido como 1fr y 3fr. Aquí es donde la cuadrícula está tomando forma con las unidades fraccionarias. Con estos valores, es evidente que hay dos columnas y no tienen el mismo ancho. La columna establecida en 3fr es tres veces más ancha que la otra. Esto explica cómo la barra lateral parece más estrecha que el área de contenido.

Se pueden realizar personalizaciones receptivas, pero usar las unidades fraccionarias es un excelente primer paso. El espacio entre áreas se puede controlar con grid-column-gamp y grid-row-gap .

Las cosas se ven bastante ajustadas, pero con algunas especificaciones más, las cosas tomarán forma.

Este ejemplo comienza colocando el encabezado, pero los elementos se pueden colocar en el orden que mejor le convenga. Si desea comenzar con el pie de página, eso también funcionará.

Comencemos con el encabezado, que va de la línea de columna 1 a la línea de columna 4 y de la línea de fila 1 a la línea de fila 2. El CSS se verá así:

 [css] .header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } [/css]

Puede notar que la barra lateral está aplastada y no podemos verla mucho. Tendremos que hacer un pequeño reordenamiento. En este diseño, hacer referencia a las líneas para obtener la ubicación ayudará con el arreglo. Las líneas actúan como guías. El encabezado se encuentra entre la línea de la fila uno y la línea de la fila dos. Para la barra lateral, comenzará en la fila tres y terminará en la línea seis. La fila del encabezado terminó en dos, por lo que se colocará justo debajo. Para ver el ejemplo, vea el proyecto en Codepen.

Usamos grid-column-start para especificar la línea vertical inicial de un elemento. En este caso, se establecería en tres. El grid-column-end indica la línea vertical final de un elemento. En este caso, esta propiedad sería igual a cuatro. Otros valores de fila también se establecerán de la misma manera. La ubicación de la barra lateral está ahí, solo está cubierta por el área de contenido.

 [css] .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; background: #a0c263; } [/css]

El contenido principal comienza en la columna tres y termina en la columna cuatro. La parte superior de la barra lateral y el área de contenido son uniformes, por lo que ambos tienen un grid-row-start de tres. Quizás se pregunte cómo el contenido y la barra lateral son mucho más altos. Al ponerle una altura al contenedor, en este caso 400px, este ahora es más alto que los otros elementos.

 [css] .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #f5c531; height: 400px; } [/css]

Las dos últimas áreas de contenido son el área de contenido adicional y el pie de página.

 [css] .extra { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #898989; } .footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #FFA500; } [/css]

Las declaraciones de inicio y fin se pueden escribir de manera más eficiente. Puede ver grid-column-start: 1; y grid-column-end: 3; escrito en taquigrafía. Esto se vería como grid-column: 1 / 3; . Esta misma idea se puede utilizar para declarar información de fila de columna.

Ventajas receptivas

Ahora que se ha creado un diseño, parece muy "de escritorio". ¿Qué pasa con las tabletas y los dispositivos móviles? Los diseños de cuadrícula CSS funcionan bien con las consultas de medios, por lo que el diseño puede adaptarse a diferentes tamaños de pantalla. Lo que es realmente genial es que puede cambiar las áreas de contenido en estos diferentes puntos de interrupción de consulta de medios. Como diseñador, esto significa que elige lo que es mejor para su diseño en diferentes puntos de interrupción. Por ejemplo, si desea que el "contenido adicional" se coloque sobre el área de "contenido", puede especificar las columnas y filas correctas.

 [css] /* For mobile phones: */ .header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .extra { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .content { grid-column-start: 1; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; background: #f5c531; height: 400px; } [/css]

Al hacer que las columnas comiencen en uno y terminen en cuatro, hemos creado áreas de contenido de ancho completo. Las filas de la cuadrícula se colocan de modo que el "contenido adicional" ahora esté encima del "contenido".

Herramienta de navegador para diseño de cuadrícula CSS

Mientras diseña diseños o inspecciona otros sitios web, Firefox ofrece una gran herramienta para trabajar con diseños de cuadrícula CSS. Se llama CSS Grid Playground y hace que examinar la cuadrícula sea muy intuitivo. Al ir al inspector, hay una opción en la pestaña de diseño para ver visualmente cómo se construye la cuadrícula. Hará que el proceso de diseño sea más fácil tener esta herramienta para explorar cómo las diferentes propiedades de la cuadrícula afectan el diseño y la disposición general de la cuadrícula.

Los diseños de cuadrícula CSS son una forma nueva y emocionante de crear diseños web. Como puede ver, es bastante fácil estar en funcionamiento cuando se crea un diseño de página simple. Este ejemplo simple es una buena base para hacer diseños más complejos. A medida que esto gane popularidad, habrá una ventaja para esta tecnología cuando se diseñe para varios dispositivos y puntos de interrupción con las personalizaciones de diseño que se pueden realizar.