Primeros pasos con el diseño CSS

En los últimos años, el diseño CSS ha cambiado drásticamente, así como la forma en que desarrollamos el front-end de nuestros sitios. Ahora tenemos una opción real en términos de los métodos de diseño que usamos en CSS para desarrollar nuestros sitios, lo que significa que a menudo tenemos que elegir qué enfoque tomar. En este artículo, repasaré los diversos métodos de diseño que tiene disponibles para explicar los conceptos básicos de cómo se usan y para qué se usan.

Esta guía es para usted si es bastante nuevo en CSS y se pregunta cuál es la mejor manera de abordar el diseño, pero también si es un desarrollador experimentado de otra parte de la pila que quiere asegurarse de que su comprensión actual del diseño esté actualizada. . No he tratado de documentar completamente cada método de diseño aquí, ya que eso habría creado un libro y no un artículo. En su lugar, estoy dando una descripción general de lo que está disponible para usted, con muchos enlaces para obtener más información.

Flujo Normal

Si toma una página web HTML que no tiene CSS aplicado para cambiar el diseño, los elementos se mostrarán en el flujo normal . En el flujo normal, los cuadros se muestran uno tras otro según el modo de escritura del documento. Esto significa que si tiene un modo de escritura horizontal, uno en el que las oraciones se ejecutan de izquierda a derecha o de derecha a izquierda, el flujo normal mostrará los cuadros de elementos de nivel de bloque uno tras otro verticalmente hacia abajo en la página.

Si está en un modo de escritura vertical, las oraciones se ejecutan verticalmente, por lo que el flujo normal colocaría los bloques horizontalmente.

El flujo normal es donde comienza con cualquier diseño: cuando crea un diseño CSS, está tomando los bloques y haciendo que hagan algo diferente al flujo normal.

Estructure su documento para aprovechar el flujo normal

Puede aprovechar el flujo normal asegurándose de que su documento comience de una manera bien estructurada. Imagínese si, en lugar de este concepto de flujo normal, el navegador apilara todos sus cuadros en la esquina uno encima del otro hasta que creara un diseño. Eso significaría que tendrías que colocar cada cosa en la página. En cambio, el navegador muestra nuestro contenido de una manera inmediatamente legible.

Si su CSS no se carga, el usuario aún puede leer el contenido, y los usuarios que no obtienen CSS en absoluto (por ejemplo, alguien que usa un lector de pantalla) recibirán el contenido en el orden en que está en el documento. Esto hace que sea importante desde el punto de vista de la accesibilidad que su documento HTML empiece a funcionar en un buen orden; sin embargo, también hará tu vida más fácil como desarrollador web. Si su contenido está en el orden en que un usuario esperaría leerlo, no necesitará realizar cambios masivos en el diseño para colocarlo en el lugar correcto. Con los métodos de diseño más nuevos, se sorprenderá de lo poco que tiene que hacer.

Por lo tanto, antes de pensar en el diseño, piense en la estructura del documento y el orden en el que le gustaría que se leyera su contenido desde la parte superior del documento hasta la parte inferior.

Alejarse del flujo normal

Una vez que tenemos un documento bien estructurado, debemos decidir cómo tomarlo y convertirlo en nuestro diseño deseado. Esto implicará alejarse del flujo normal, para partes de nuestro documento. Tenemos un conjunto completo de métodos de diseño para usar. El primer método que veremos es float , ya que los floats son una excelente demostración de lo que es sacar un elemento del flujo normal.

flotadores

Los flotantes se utilizan para desplazar un cuadro hacia la izquierda o hacia la derecha, lo que permite que el contenido se muestre envuelto alrededor de él.

Para hacer flotar un elemento, use la propiedad float de CSS y un valor de izquierda o derecha. El valor predeterminado de float es ninguno.

 .item { float: left; }

Vale la pena señalar que cuando flota un elemento y el texto lo envuelve, lo que sucede es que los cuadros de línea de ese contenido se acortan. Si hace flotar un elemento y el siguiente cuadro que contiene su texto tiene un color de fondo aplicado, puede ver que este color de fondo se ejecutará debajo del elemento flotante.

Como está acortando los cuadros de línea para dejar espacio entre el flotante y el texto envolvente, debe establecer un margen en el elemento flotante. Un margen en el texto simplemente movería el texto desde el borde del contenedor. Para una imagen flotada a la izquierda, agregaría un margen a la derecha y la parte inferior, suponiendo que desea que la imagen quede al ras con la parte superior e izquierda del contenedor.

Limpieza de flotadores

Una vez que haya hecho flotar un elemento, todos los siguientes elementos se envolverán alrededor de ese elemento flotante hasta que se envuelvan debajo y continúe el flujo normal. Si desea evitar eso, debe borrar el flotador.

En el elemento que desea comenzar a mostrar después del flotante, agregue la propiedad clear con un valor de left para indicar que se borre un elemento flotante a la izquierda, right para borrar un elemento flotante a la derecha o ambos para borrar cualquier flotante.

 .clear { clear: both; }

El método anterior funciona si desea que un elemento comience después de un flotador. No ayudará si se encuentra en una situación en la que tiene un elemento flotante dentro de un cuadro, con texto al lado. Si el texto es más corto que el elemento flotante, el cuadro se dibujará debajo del contenido e ignorará el flotante. Como ya hemos aprendido, los flotadores acortan los cuadros de línea, el resto del diseño continúa con el flujo normal.

Para evitar esta situación, debemos despejar algo dentro de la caja. Podríamos agregar un elemento vacío y configurarlo para borrar todo. Esto implica pegar divs vacíos en nuestro documento, lo que no es ideal y puede que no sea posible si su página es generada por un CMS. Entonces, en cambio, el método típico de compensación de flotadores es lo que se conoce como un truco de solución clara. Este método funciona agregando contenido generado CSS y configurando eso para borrar ambos.

El contexto de formato de bloque

Otra forma de borrar los flotadores dentro de un cuadro es invocar un contexto de formato de bloque (BFC) en el contenedor. Un contexto de formato de bloque contiene todo lo que contiene, lo que incluiría elementos flotantes que ya no pueden sobresalir por la parte inferior de la caja. Hay algunas formas de forzar un BFC, la más común cuando se borran los flotantes es establecer la propiedad de desbordamiento para que tenga un valor que no sea visible por defecto.

 .container { overflow: auto; }

Usar el desbordamiento de esta manera generalmente funcionará, sin embargo, en ciertas situaciones podría terminar con sombras recortadas o barras de desplazamiento no deseadas en el elemento. También puede parecer un poco confuso en su hoja de estilo: ¿Configuró el desbordamiento porque quería barras de desplazamiento o simplemente para obtener esta capacidad de limpieza?

Para aclarar la intención y evitar que la creación de un BFC cause efectos secundarios no deseados, puede usar flow-root como un valor de la propiedad de display . Lo único que hace display: flow-root es crear un BFC, limpiando así sus flotadores sin que se produzcan otros problemas.

 .container { display: flow-root; }

Uso heredado de flotadores

Hasta la llegada de los métodos de diseño más nuevos, los flotadores se usaban para crear diseños de columnas, esta técnica funcionaba dando un ancho a un conjunto de elementos y configurándolos para que flotaran uno al lado del otro. La gestión cuidadosa del tamaño porcentual de estas cajas flotantes podría crear un efecto de cuadrícula.

No sugeriría comenzar un nuevo diseño ahora y usar este método. Sin embargo, permanecerá en los sitios existentes durante muchos años. Por lo tanto, si te encuentras con un diseño en el que casi todo parece flotar, esta es la técnica en uso.

Recursos y lecturas adicionales sobre flotadores y flotadores de compensación

• "The Clearfix: forzar un elemento para que autolimpie a sus hijos", Chris Coyier, CSS-Tricks
• “ float ”, CSS: hojas de estilo en cascada, documentos web de MDN
• “ clear ”, CSS: hojas de estilo en cascada, documentos web de MDN
• "Comprender el diseño CSS y el contexto de formato de bloque", Rachel Andrew, Smashing Magazine

Posicionamiento

Para eliminar un elemento del flujo normal o moverlo de su lugar en el flujo normal, puede usar la propiedad de position en CSS. Cuando están en flujo normal, los elementos tienen una position static . Los elementos se muestran uno tras otro en la dimensión Bloque y, si se desplaza por la página, se desplazan con ella.

Al cambiar el valor de la posición, normalmente también utilizará valores de compensación para mover el cuadro desde un punto de referencia particular. El punto de referencia utilizado depende del valor de posición que esté utilizando.

Posicionamiento relativo

Si un elemento tiene position: relative , entonces el punto de referencia es el lugar en el que normalmente estaría en el flujo normal. Luego puede usar valores de desplazamiento para las propiedades top , left , bottom y right para mover el cuadro desde donde normalmente se mostraría.

 .item { position: relative; bottom: 50px; }

Tenga en cuenta que otros elementos de la página no responden a la nueva posición de su elemento. El lugar en el que se colocó en el flujo normal está reservado, por lo tanto, debe administrar cualquier superposición usted mismo.

Posicionamiento absoluto

Establezca position: absolute en un elemento y se eliminará por completo del flujo normal. El espacio que quedó para ello será eliminado. Luego, el elemento se colocará en relación con su bloque contenedor que, a menos que esté anidado dentro de otro elemento posicionado, será la ventana gráfica.

Por lo tanto, lo primero que sucederá si establece la position: absolute en un elemento es que normalmente termina pegado en la parte superior e izquierda de la ventana gráfica. Luego puede usar valores de desplazamiento para las propiedades top , left , bottom y right para mover el cuadro desde esa posición hasta donde desea que esté.

 .item { position: absolute; top: 20px; right: 20px; }

A menudo, no desea colocar el cuadro de acuerdo con la ventana gráfica, pero en referencia a un elemento contenedor, está dentro. En cuyo caso, debe otorgarle a ese elemento contenedor un valor de posición que no sea el estático predeterminado.

Como position: relative no elimina el elemento del flujo normal, esta es la elección habitual. Proporcione el elemento principal en el que desea establecer sus compensaciones desde la position: relative y luego desplace el bloque absolutamente posicionado desde los límites de ese elemento.

Posicionamiento fijo

Algo con position: fixed se colocará en la mayoría de los casos en relación con la ventana gráfica y se eliminará del flujo del documento para que no se reserve espacio para ello. Cuando se desplaza la página, el elemento fijo permanece en posición relativa a la ventana gráfica mientras el resto del contenido en el flujo normal se desplaza como de costumbre.

 .item { position: fixed; top: 20px; left: 100px; }

Esto puede ser útil para habilitar un panel de navegación fijo que permanece en la pantalla, por ejemplo, mientras se desplaza el contenido. Al igual que con otros valores de posicionamiento, puede causar superposiciones al hacer esto, por lo que debe tener cuidado de que todo el contenido se pueda leer y no termine detrás de un elemento fijo.

Para posicionar un elemento fijo que no sea relativo a la ventana gráfica, debe tener un elemento contenedor con una de las propiedades de transform , perspective o filter establecida en un valor diferente al valor predeterminado de none . En este caso, ese elemento se convertirá en el bloque contenedor y sus compensaciones se relacionarán con ese bloque en lugar de la ventana gráfica.

Posicionamiento pegajoso

Establecer position: sticky en un elemento hará que el elemento se desplace con el documento tal como lo haría en el flujo normal, sin embargo, una vez que alcanza un cierto punto en relación con la ventana gráfica (usando los desplazamientos habituales) se "pega" y comienza a actuar como position: fixed . Este es un valor más nuevo y es menos compatible con los navegadores que otros métodos, sin embargo, se reduce a simplemente desplazarse con la página os es un valor muy bien utilizado como una mejora sin causar problemas si no es compatible.

 .item { position: sticky; top: 0; }

Así es como se crea el efecto popular de una barra de navegación que se desplaza con el contenido y luego se detiene en la parte superior de la ventana gráfica para permanecer en la pantalla mientras se desplaza por el contenido.

Recursos y lecturas adicionales sobre posicionamiento

• "Posicionamiento", Área de aprendizaje de MDN, documentos web de MDN, Mozilla
• “ position: sticky; ”, Chris Coyier, Trucos CSS
• "CSS position:sticky", información de soporte del navegador para posicionamiento fijo, caniuse

Diseño flexible

El diseño de caja flexible (Flexbox) es un método de diseño diseñado para el diseño unidimensional. Unidimensional significa que desea diseñar su contenido en una fila o como una columna. Para convertir su elemento en un diseño flexible, use la propiedad de display con un valor de flex .

 .container { display: flex; }

Los elementos secundarios directos de ese elemento se convierten en elementos flexibles, se colocarán como una fila, alineados con el borde de inicio en la dirección en línea.

Los ejes de Flexbox

En el ejemplo anterior, describí los elementos como alineados con el borde inicial de nuestra fila en la dirección en línea, en lugar de describirlos como alineados a la izquierda. Nuestros elementos se disponen en una fila porque el valor predeterminado de la propiedad flex-direction es row , esto crea una fila en la dirección en línea, la dirección a lo largo de la cual se ejecutan las oraciones. Como estamos trabajando en inglés, un idioma que se escribe de izquierda a derecha, el comienzo de una fila está a la izquierda, por lo que nuestros elementos comienzan allí. El valor de flex-direction define así el eje principal de Flexbox.

El eje transversal, por lo tanto, cruza el eje principal en ángulo recto. Si su dirección flexible es row y sus elementos se muestran en la dirección en línea, su eje transversal se ejecuta en la dirección del Bloque. Si su flex-direction es la column por lo que los elementos se ejecutan en la dirección del bloque, entonces su eje transversal está a lo largo de la fila.

Si te acostumbras a pensar en términos de eje principal y eje transversal cuando trabajas con Flexbox, te facilitará muchas cosas.

dirección y orden

Flexbox le brinda la capacidad de cambiar la dirección de los elementos en el eje principal mediante el uso de un valor de flex-direction de row-reverse o column-reverse .

También puede cambiar el orden de los elementos flexibles individuales con la propiedad order . Sin embargo, debe tener mucho cuidado al hacerlo, ya que esto puede causar un problema para cualquier usuario que navegue usando el teclado en lugar de un mouse o una pantalla táctil, ya que el orden de tabulación del documento seguirá el orden en que el contenido está en la fuente. Consulte la sección a continuación sobre Orden visual y de documentos para obtener más detalles.

Las propiedades flexibles

Las propiedades flexibles son cómo controlar las proporciones de los elementos flexibles a lo largo del eje principal. Las tres propiedades son:

• flex-grow
• flex-shrink
• flex-basis

Estos se usan generalmente en su forma abreviada de la propiedad flex , siendo el primer valor flex-grow , el segundo flex-shrink y el tercero flex-basis .

 .item { flex: 1 1 200px; }

El valor de flex-basis da un tamaño que tendrá el artículo antes de que se produzca cualquier crecimiento o reducción. En el ejemplo anterior, ese tamaño es de 200 píxeles, por lo que le daríamos a cada elemento 200 píxeles de espacio. Es poco probable que nuestro contenedor se divida claramente por 200 píxeles, por lo que habrá espacio sobrante o espacio insuficiente para todos los elementos si cada uno tiene 200 píxeles. Las propiedades flex-grow y flex-shrink nos permiten controlar lo que sucede con los elementos si hay demasiado o no hay suficiente espacio para ellos.

Si flex-grow se establece en cualquier valor positivo, entonces se permite que el elemento crezca para ocupar espacio. Por lo tanto, en nuestro ejemplo anterior, después de dar a cada elemento 200 píxeles, cualquier espacio adicional se repartirá entre los elementos.

Si flex-shrink se establece en un valor positivo, entonces el elemento puede reducirse en la situación en la que ocurriría un desbordamiento si todos los elementos tuvieran su flex-basis . Si no hubiera suficiente espacio en el contenedor en nuestro ejemplo, cada elemento se reduciría en la misma cantidad para reducir hasta que todos los elementos quepan en el contenedor.

Los valores flex-grow flex-shrink y reducción flexible pueden ser cualquier valor positivo. A un elemento con un mayor valor flex-grow se le dará más espacio disponible en proporción al crecer, y con un mayor valor flex-shrink se eliminará más al reducirse.

Comprender la forma en que funcionan estas propiedades flexibles es realmente la clave para comprender Flexbox, y los recursos que se enumeran a continuación le brindarán todos los detalles. Sin embargo, considere usar Flexbox cuando tenga un montón de cosas que quiera estirar y aplastar en un contenedor en una dimensión. Si se encuentra tratando de alinear las cosas en filas y columnas, quiere una cuadrícula y, en ese caso, Flexbox probablemente no sea la herramienta para el trabajo.

Recursos y lecturas adicionales para Flex Layout

• "Diseño de cuadro flexible CSS", una guía completa para la especificación, documentos web de MDN, Mozilla
• "Una guía completa de Flexbox", Chris Coyier, CSS-Tricks
• “Flexbox Froggy,” Un juego para aprender Flexbox
• "Flexbugs", una lista seleccionada por la comunidad de errores del navegador relacionados con Flexbox

Diseño de cuadrícula

CSS Grid Layout fue diseñado como un método de diseño bidimensional. Bidimensional significa que desea distribuir su contenido en filas y columnas. Al igual que con Flexbox, Grid Layout es un valor de display y, por lo tanto, para comenzar a usar Grid, debe comenzar con display: grid en su contenedor y luego configurar algunas columnas y/o filas usando grid-template-columns y grid-template-rows propiedades de las grid-template-rows .

 .container { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 200px 200px; }

El CSS anterior crearía una cuadrícula de tamaño fijo, con pistas de columna y fila completamente fijas. Probablemente esto no sea lo que desea en la web, y Grid lo tiene bien cubierto. El valor predeterminado para cualquier pista es auto , que generalmente se puede considerar como "lo suficientemente grande para el contenido". Si no creamos ninguna pista de fila, se crearían filas para que tomemos cualquier contenido agregado, y estas se dimensionarían auto . Un patrón común es especificar pistas de columna pero permitir que Grid cree filas según sea necesario.

Si bien puede configurar sus pistas de columna y fila usando cualquier unidad de longitud o un porcentaje, también puede usar la nueva unidad fr , una unidad creada para Grid Layout. La unidad fr es una unidad flexible y denota una parte del espacio disponible en el contenedor de cuadrícula.

Grid puede distribuir el espacio por usted; no necesita calcular porcentajes para asegurarse de que las cosas quepan en un contenedor. En el siguiente ejemplo, estamos creando columnas usando la unidad fr y permitiendo que las pistas se creen automáticamente. También estamos usando grid-gap para espaciar nuestras pistas (consulte la sección sobre Alineación de cajas para obtener más detalles sobre los espacios y el diseño de la cuadrícula).

Al igual que con Flexbox y flex-grow o flex-shrink , la unidad fr se ocupa de compartir el espacio disponible. Un valor de fr más alto para una pista significa que obtiene más espacio disponible en proporción. También puede mezclar unidades fr y longitudes absolutas. El espacio necesario para las longitudes se restará del espacio disponible antes de calcular las unidades fr .

Terminología de cuadrícula

Una cuadrícula siempre tiene dos ejes: el eje en línea corre en la dirección en que se colocan las palabras en la página y el eje de bloque en la dirección en que se colocan los bloques.

El Grid Container es el elemento en el que ha configurado display: grid . Luego tiene Líneas de cuadrícula, creadas por las pistas de columna y fila que especificó al usar grid-template-columns y grid-template-rows . La unidad más pequeña de la cuadrícula (entre cuatro líneas que se cruzan) se conoce como celda de cuadrícula, mientras que una colección de celdas de cuadrícula que forman un rectángulo completo se denomina área de cuadrícula.

Colocación automática de cuadrícula

Tan pronto como crea una cuadrícula, los elementos secundarios directos de su contenedor de cuadrícula comienzan a diseñarse, uno en cada celda de la cuadrícula. Lo hacen de acuerdo con las reglas de colocación automática de cuadrícula. Estas reglas aseguran que cada elemento se coloque en una celda vacía evitando la superposición de elementos.

Cualquier hijo directo del contenedor de cuadrícula al que no le hayas dado una posición se colocará de acuerdo con las reglas de colocación automática. En el siguiente ejemplo, he hecho que uno de cada tres elementos abarque pistas de dos filas, sin dejar de colocarse automáticamente en términos de la línea de inicio.

Posicionamiento básico basado en líneas

La forma más sencilla de colocar elementos en la cuadrícula es con el posicionamiento basado en líneas, lo que le da reglas al elemento para indicarle que se extienda de una línea de la cuadrícula a otra. Por ejemplo, si tengo una cuadrícula con tres pistas de columna y dos filas, puedo colocar un elemento de la línea de columna 1 a la línea de columna 3, y de la línea de fila 1 a la línea de fila 3. Entonces cubrirá cuatro celdas de cuadrícula en total , que abarca dos pistas de columna y dos filas de columna.

 .item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }

Estas propiedades se pueden representar de forma abreviada, grid-column y grid-row siendo el primer valor start y el segundo end .

 .item { grid-column: 1 / 3; grid-row: 1 / 3; }

Los elementos de cuadrícula pueden ocupar las mismas celdas, lo que permite la creación de diseños con contenido superpuesto. Los elementos se apilan de la forma habitual en que se apila el contenido en la Web, con elementos que bajan de la fuente y aparecen encima de otros elementos. Aún así, puede usar z-index para controlar esto.

Posicionamiento con áreas nombradas

También puede colocar elementos en su cuadrícula usando Áreas con nombre. Para usar este método, asigne un nombre a cada elemento y luego describa el diseño como el valor de la propiedad grid-template-areas .

 .item1 { grid-area: a; } .item2 { grid-area: b; } .item3 { grid-area: c; } .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "aabb" "aacc"; }

Hay algunas reglas para recordar al usar este método. Si desea que un elemento abarque varias celdas, debe repetir el nombre. Las áreas deben formar un rectángulo completo, ¡no se permiten piezas en forma de L o Tetris! La cuadrícula debe estar completa: todas las celdas deben estar llenas. Si desea dejar un espacio en blanco, llene esa celda con un . . Por ejemplo, en el CSS a continuación, dejo vacía la esquina inferior derecha.

 .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "aabb" "aac ."; }

Esta es una buena manera de trabajar, ya que cualquiera que mire el CSS puede ver exactamente cómo funcionará el diseño.

Recursos y lecturas adicionales para el diseño de cuadrícula

Hay mucho más en CSS Grid Layout de lo que se ha compartido en esta descripción general rápida, y los recursos a continuación lo ayudarán a conocer la especificación. Tanto los componentes como el diseño de página completa pueden ser cuadrículas, elija Diseño de cuadrícula si tiene que crear un diseño bidimensional, sin importar cuán grande o pequeño sea.

• "CSS Grid Layout", tecnología web para desarrolladores, documentos web de MDN, Mozilla
• "Grid by Example", todo lo que necesita para aprender CSS Grid Layout, Rachel Andrew
• "Grid Garden", un divertido juego interactivo para probar y mejorar tus habilidades de CSS
• "Layout Land", Jen Simmons, YouTube

También he escrito una serie de artículos aquí en Smashing Magazine que pueden ayudarlo a profundizar en varios conceptos de Grid:

• "Mejores prácticas con el diseño de cuadrícula CSS"
• “Estilización de celdas vacías con contenido generado y diseño de cuadrícula CSS”
• "Uso de CSS Grid: compatibilidad con navegadores sin Grid"
• "CSS Grid Gotchas y obstáculos"
• "Nombrar cosas en el diseño de cuadrícula CSS"

Orden visual y de documentos

Al comienzo de este artículo, sugerí que comenzara con su documento en un orden que tenga sentido leer de arriba a abajo, ya que esto sería útil tanto para la accesibilidad como para la forma en que funciona el diseño CSS. A partir de nuestra breve introducción a Flexbox y CSS Grid, puede ver que sería posible mover las cosas de manera bastante drástica lejos de ese orden. Esto tiene el potencial de causar un problema.

Los navegadores seguirán la fuente del documento para cualquier uso no visual del documento. Por lo tanto, un lector de pantalla leerá el orden del documento y cualquier persona que use un teclado para navegar pasará por el documento en el orden en que está en la fuente y no en el orden de visualización. Muchos usuarios de lectores de pantalla no son completamente ciegos, por lo que pueden usar el lector de pantalla además de poder ver dónde se encuentran en el documento. Para ambos casos, una pantalla que se confunde en comparación con la fuente podría causar una situación muy confusa.

Tenga mucho cuidado cuando esté moviendo elementos lejos del orden en que están en la fuente. Si se encuentra reorganizando el orden de los elementos en CSS, ¿realmente debería regresar y reorganizar su documento? Pruebe para ver si aún puede tabular alrededor de su documento y si el orden visual tiene sentido.

Recursos y lecturas adicionales para el orden visual y de documentos

• "Disposición y accesibilidad de la cuadrícula CSS", tecnología web para desarrolladores, documentos web de MDN, Mozilla
• “Orden de origen HTML frente a orden de visualización CSS”, Adrian Roselli
• "Flexbox y la desconexión de navegación del teclado", Code Things, Tink
• "El conflicto de orden receptivo para el enfoque del teclado", Alastair Campbell

Generación de cajas

Todo lo que pone en una página web crea un cuadro, y todo en este artículo describe cómo puede usar CSS para diseñar esos cuadros en su diseño; sin embargo, en ciertas circunstancias, es posible que no desee crear un cuadro en absoluto. Hay dos valores de la propiedad de display que se ocupan de situaciones en las que no desea cuadros.

No genere la caja o el contenido ( display: none )

Si desea que el elemento y todo el contenido de ese elemento, incluidos los elementos secundarios, no se generen, puede usar display: none . El elemento ahora no se mostrará y no se reservará ningún espacio para el lugar donde habría estado.

 .item { display: none; }

No genere este elemento, pero genere cualquier elemento secundario ( display: contents )

Un valor más nuevo de display es display: contents . Aplicar display: contents a un elemento y el cuadro para ese elemento no se generará, pero los elementos secundarios se generarán normalmente. Esto puede ser útil si desea que los elementos secundarios indirectos se conviertan en parte de un diseño flexible o de cuadrícula.

En el ejemplo a continuación, el primer elemento flexible contiene dos elementos secundarios anidados, pero como está configurado para display: contents , su caja no se alquila y los elementos secundarios se muestran como si fueran el elemento secundario directo y se convierten en elementos flexibles. Elimine display: contents de ese elemento para ver cómo cambia el diseño.

Recursos y lecturas adicionales para la generación de cajas

• “Cajas que se desvanecen con display: contents ”, Rachel Andrew
• Cómo display: contents; Obras”, Ire Aderinokun,
• display: contents , información de soporte del navegador, caniuse

Alineación

La alineación ha sido un tema complicado en la web hasta hace poco, con formas muy limitadas de alinear correctamente los elementos dentro de las cajas. Esto está cambiando con el módulo de alineación de cajas, que actualmente utilizará para controlar la alineación en contenedores Grid y Flex. En el futuro, otros métodos de diseño también implementarán estas propiedades de alineación. La lista de propiedades de alineación detallada en la especificación de alineación de caja es la siguiente:

• justify-content
• align-content
• place-content
• justify-items
• align-items
• place-items
• justify-self
• align-self
• place-self
• row-gap
• column-gap
• gap

Dado que los modelos de diseño tienen características diferentes, la alineación funciona de forma ligeramente diferente según el modelo de diseño en uso. Echemos un vistazo a cómo funciona la alineación con algunos diseños de cuadrícula y flexibles simples.

Las propiedades align-items y justify-items establecen las propiedades align-self y justify-self como un grupo. Estas propiedades alinean los elementos dentro de su área de cuadrícula.

Las propiedades de alineación align-content y justify-content alinean las pistas de cuadrícula, donde hay más espacio en el contenedor de cuadrícula que el necesario para mostrar las pistas.

En Flexbox, align-items y align-self ocupan de la alineación en el eje transversal, mientras justify-content ocupa de la distribución del espacio en el eje principal.

En el eje transversal, puede usar align-content donde haya envuelto líneas flexibles y espacio adicional en el contenedor flexible.

See the resources for some links that discuss Box Alignment in detail across layout methods. It really is worth spending some time understanding how alignment works, as it will make working with Flexbox, Grid and future layout methods far easier.

Row And Column Gaps

A multiple-column layout has the column-gap property, and the Grid Layout spec had — until recently — the properties grid-column-gap , grid-row-gap , and grid-gap . These have now been removed from the Grid specification and added to Box Alignment. At the same time, the grid- prefixed properties were renamed to column-gap , row-gap , and gap . Browsers will alias the prefixed properties to the new renamed ones so you do not need to worry if you are using the better supported old names in your code right now.

The renaming means that these properties can be also applied to other layout methods, the obvious candidate being Flexbox. While no browser supports gaps in Flexbox at the moment, in future we should be able to use column-gap and row-gap to create space between flex items.

Resources And Further Reading For Alignment

• “CSS Box Alignment,” CSS: Cascading Style Sheets, MDN web docs, Mozilla
• “Box Alignment in Flexbox,” CSS Flexible Box Layout, MDN web docs, Mozilla
• “Box Alignment in CSS Grid Layout,” CSS Grid Layout, MDN web docs, Mozilla
• “The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment,” Rachel Andrew, Smashing Magazine
• “Box Alignment Cheatsheet,” Rachel Andrew

Multi-Column Layout

A multiple-column layout is a layout type that enables the creation of columns, such as you might find in a newspaper. A block is split into columns, and you read down a column in the block direction then return to the top of the next column. While reading content in this way is not always useful in a web context as people don't want to have to scroll up and down to read, it can be a helpful way to display small amounts of content or to collapse down sets of checkboxes or other small UI elements.

A multiple-column layout can also be used to display sets of cards or products which have differing heights.

Setting A Column Width

To set an optimal column width, and instruct the browser to display as many columns as possible at that width use the following CSS:

 .container { column-width: 300px; }

This will create as many as 300 pixel columns as possible, any leftover space is shared between the columns. Therefore, unless your space divides into 300 pixels with no remainder, it is likely that your columns will be slightly wider than 300 pixels.

Setting A Number Of Columns

Instead of setting the width, you could set a number of columns using column-count . In this case, the browser will share the space between the number of columns you have asked for.

 .container { column-count: 3; }

If you add both column-width and column-count , then the column-count property acts as a maximum. In the below code, columns will be added until there are three columns, at which point any extra space will be shared between those three columns even if there was enough space for an additional column.

 .container { column-width: 300px; column-count: 3; }

Gaps And Column Rules

You cannot add margins or padding to individual column boxes, to space out columns use the column-gap property. If you do not specify a column-gap , it will default to 1em to prevent columns bumping up against each other. This is a different behavior to the way column-gap is specified for other layout methods, where it defaults to 0. You can use any length unit for your gap, including 0 if you want no gap at all.

The column-rule property gives you the ability to add a rule between two columns. It is a shorthand for column-rule-width , column-rule-color , and column-rule-style , and acts in the same way as border . Note that a rule does not take up any space of its own. It lays on top of the gap so to increase or decrease space between the rule and the content you need to increase or decrease the column-gap .

Allowing Elements To Span Columns

You can span an element inside the multicol container across all of the columns using the column-span property on that element.

 h3 { column-span: all; }

When a column-span happens, the multicol container essentially stops above the spanning element, therefore, the content forms into columns above the element and then remaining content forms a new set of column boxes below the spanning element.

You can only use column-span: all or column-span: none ; it isn't possible to span some of the columns. At the time of writing, Firefox does not support the column-span property.

Resources And Further Reading For Multiple-Column Layout

• “Using Multi-Column Layouts,” CSS Multi-column Layout, MDN web docs, Mozilla

Fragmentation

Multiple-Column Layout is an example of fragmentation . In this case, the content is broken into columns. It is, however, very similar to the way that content is broken into pages when printing. This process is dealt with by the Fragmentation specification, and this specification contains properties to help control the breaking of content.

For example, if you have laid out a set of cards using multicol and you want to make sure that a card never breaks in half, becoming split between two columns you can use the property break-inside with a value of avoid . Due to browser compatibility reasons, you will also want to use the legacy page-break-inside property as well.

 .card { page-break-inside: avoid; break-inside: avoid; }

If you want to avoid a break directly after a heading, you can use the break-after property.

 .container h2 { page-break-after: avoid; break-after: avoid; }

These properties can be used when preparing a print stylesheet and also in multicol. In the example below, I have three paragraphs in a multicol container that fragments into three columns. I have given break-inside: avoid to the p element meaning that the paragraphs end up one in each column (even if this makes the columns uneven).

Recursos y lecturas adicionales para la fragmentación

• “Una guía sobre el estado de las hojas de estilo impresas en 2018”, Rachel Andrew, Smashing Magazine
• "Saltos de columna", QuirksMode.org

Selección de tipos de diseño: ¿cómo elegir?

La mayoría de las páginas web usarán una combinación de estos tipos de diseño, y cada especificación define exactamente cómo interactúan entre sí. Por ejemplo, puede tener un diseño de cuadrícula en el que algunos elementos de cuadrícula también sean contenedores flexibles. Algunos de esos contenedores flexibles pueden ser un bloque contenedor para un elemento posicionado o tener una imagen flotando en su interior. Las especificaciones están escritas con la expectativa de que mezclaremos modelos de diseño, de acuerdo con lo que sea mejor para el contenido que estamos diseñando. En esta guía, he tratado de brindar una descripción general de la forma básica en que se comporta cada tipo de diseño, para ayudarlo a perfeccionar cuál es probablemente la mejor manera de lograr un efecto particular.

Sin embargo, no tenga miedo de jugar con diferentes formas de crear el diseño que tiene en mente. Hay menos lugares de los que puedas imaginar en los que deberías preocuparte de que tus elecciones causen un problema real. Comience con una buena estructura de documento y tenga cuidado de no desconectar la presentación visual de ese orden. Gran parte del resto es solo un caso de prueba de que las cosas funcionan como espera en sus navegadores de destino.