Enlaces rápidos
CSS proporciona muchas formas de diseñar elementos en sus páginas web, desde posicionamiento absoluto hasta diseño basado en cuadrículas. Los espacios alrededor y entre los elementos son igualmente importantes y, nuevamente, hay muchas opciones. La función Gap es una forma útil y versátil de introducir espacios en blanco y funciona con muchos diseños web diferentes.
Usar la propiedad gap en CSS es una forma conveniente de mejorar el diseño de sitios web. La función Gap le permite agregar espacio entre elementos de una manera elegante, lo que mejora la navegabilidad y la experiencia del usuario. En esta guía, veremos cómo utilizar eficazmente la propiedad Gap en CSS para mejorar sus diseños en la web. Verificar Los mejores proyectos HTML y CSS para principiantes.
¿Qué es la propiedad Gap?
Gap en CSS es una propiedad de estilo simple pero esencial para ayudar a definir el espacio entre los diseños. Proporcionar el espacio adecuado entre tus elementos es una de las reglas de oro de composición que debes aplicar para un diseño gráfico interesante y refinado. La propiedad Gap determina los espacios verticales y horizontales entre elementos y les da espacio. Por lo tanto, utilizar Gap facilita lograr un diseño adecuado y una mejor organización de los elementos, sin la necesidad de utilizar códigos adicionales para agregar separadores entre elementos.
Puede utilizar esta propiedad para especificar el tamaño de los espacios entre elementos en tres formatos de diseño:
- Diseño de caja flexible (“Flexbox”).
- Diseño de cuadrícula.
- Diseño de varias columnas().
Todos los navegadores modernos admiten la propiedad de espacio, que complementa las propiedades del formulario de cuadro, como el margen y el relleno.
Cómo escribir la propiedad de espacio en CSS
La sintaxis básica de la propiedad Gap es:
gap: <row-gap> <column-gap>;
Cada valor puede tener una longitud o un porcentaje, y los espacios entre columnas son opcionales; Sin él, se aplicará un único valor tanto a las filas como a las columnas. Entonces:
gap: 10em;
...significa que tanto las filas como las columnas tendrán un espacio 10 veces el tamaño de fuente actual, mientras que:
gap: 20px 10%;
...producirá un espacio entre filas de 20 píxeles y un espacio entre columnas de una décima parte del ancho del elemento contenedor.
Debe utilizar la propiedad Gap con elementos del contenedor que definen el diseño, en lugar de elementos dentro del contenedor. La propiedad tiene como objetivo crear una distancia uniforme entre elementos en lugar de distancias variables más complejas.
Usando la función Gap con Flexbox
Puede utilizar la propiedad Gap para controlar el espacio entre filas y columnas que crea un diseño flexible. La orientación flexible que utilice su diseño determinará si se aplica el espacio entre elementos en una fila o el espacio entre elementos en una columna.
De forma predeterminada, en la orientación de fila normal, los elementos dentro del contenedor flexible aparecerán uno al lado del otro. Aquí está el código CSS simple:
.flex-layout {
display: flex;
}
.flex-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Este diseño produce:
Tenga en cuenta que cada elemento dentro del contenedor utiliza las propiedades del modelo de caja clásico para el espaciado: relleno y margen. Agregando algo de espacio entre los elementos:
.flex-layout { gap: 20px; }
Aumentará el espacio entre los elementos flexibles, pero no alrededor de ellos:
Si su diseño flexible muestra elementos en columnas y filas, envolviéndolos, por ejemplo:
.flex-layout {
gap: 20px 40px;
flex-wrap: wrap;
}
Verás el efecto de ambas vulnerabilidades:
Tenga siempre en cuenta que otras propiedades, como el margen y la justificación del contenido, pueden afectar el espacio entre elementos. Piense en Gap como un valor mínimo a menos que controle explícitamente todas las demás propiedades que pueden afectar la brecha. Verificar Juegos divertidos para ayudarte a aprender programación CSS fácilmente.
Uso de la función Gap con la red
También puedes usar Gap con diseño de cuadrícula. La principal diferencia es que normalmente necesitarás especificar un espacio entre elementos en filas y columnas, ya que la cuadrícula es más adecuada para diseños 2D.
Al igual que en el diseño fluido, la cuadrícula mostrará los elementos uno al lado del otro de forma predeterminada, aunque puedes controlar el espacio alrededor de cada elemento usando el relleno y el margen:
.grid-layout {
display: grid;
grid-template-columns: 100px 80px 100px;
}
.grid-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
El resultado es un diseño de red típico:
Al agregar Brecha:
.grid-layout {
gap: 80px 40px;
}
Se insertará un espacio entre cada elemento:
Observe cómo se aplican aquí los valores de espacio de filas y columnas individuales, creando un espacio entre elementos en filas que es el doble del tamaño (80 píxeles) del espacio entre columnas (40 píxeles). Recuerda que si usas un solo valor, especificarás la misma distancia entre filas y columnas.
Utilice la propiedad Gap con diseños de varias columnas
También puede utilizar la propiedad Gap con diseños de columnas, pero en este caso sólo un valor es relevante; No hay filas. Los diseños de varias columnas tienen un espacio predeterminado:
.column-layout {
column-count: 3;
}
Pero es muy pequeño con un tamaño de 1em:
Esto se nota especialmente al cambiar la fuente, y especialmente si estás alineando el texto:
.column-layout {
font-size: 14pt;
line-height: 1.4;
text-align: justify;
}
Las líneas de texto resultantes chocan entre sí y resultan incómodas de leer:
Al especificar un espacio entre elementos, puede aumentar la distancia entre columnas, dándoles más espacio.
.column-layout {
gap: 2em;
}
Es posible que encuentres que 2em o incluso 3em dan un resultado más legible, dependiendo de otros factores como el ancho de las columnas:
Recuerde que puede utilizar un complemento del navegador como Herramientas de desarrollo de Google Chrome Para comprobar sus diseños y ver cómo propiedades como el espacio y el margen afectan sus diseños.
Cuando utilice dos valores para la propiedad Gap, asegúrese de que estén configurados correctamente. El orden de “filas y columnas” puede resultar contradictorio, pero coincide con el orden de otras propiedades de acceso directo, como el relleno y el margen.
La forma exacta en que utilizará la función Gap variará según el diseño al que la esté aplicando. Sin embargo, en general, debes acceder a la propiedad Gap cuando necesites una distancia uniforme entre elementos, pero no alrededor de ellos. Ahora puedes ver Alternativas avanzadas de ChatGPT que proporcionan secuencias de comandos de aplicaciones automatizadas.
