La propiedad gap de CSS se usa para establecer el espacio entre filas y columnas. Como columna-brecha y fila-brecha usando ambos por separado para que uno pueda usar simplemente la propiedad de brecha que puede dar tanto la columna como la brecha de fila.
Sintaxis:
gap: <row-gap> <column-gap>
Valores de propiedad:
- <longitud>: el espaciado se da en términos de unidad de longitud, es decir, rm, px, etc. Por ejemplo: gap: 10px 20px
- <porcentaje>: El espaciado se da en términos de unidad de porcentaje. Por ejemplo: brecha: 50%
Ejemplo 1: En este ejemplo, el espaciado se establece en términos de longitud.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.row {
display: grid;
width: 500px;
gap: 20px 50px;
}
.col {
background-color: green;
border: 1px solid black;
color: #fff;
width: fit-content;
height: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="row">
<div class="col">
geeksforgeeks
</div>
<div class="col">
geeksforgeeks
</div>
<div class="col">
geeksforgeeks
</div>
</div>
<div class="row">
<div class="col">
geeksforgeeks
</div>
<div class="col">
geeksforgeeks
</div>
<div class="col">
geeksforgeeks
</div>
</div>
</body>
</html>
Producción:
Ejemplo: En este ejemplo, el espaciado se establece en términos de porcentaje.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.row {
display: grid;
width: fit-content;
gap: 20%;
height: 100px;
background-color: greenyellow;
}
.col {
background-color: green;
border: 1px solid black;
color: #fff;
width: fit-content;
font-size: 20px;
}
</style>
</head>
<body>
<p>In terms of percentage</p>
<div class="row">
<div class="col">
geeksforgeeks
</div>
<div class="col">
geeksforgeeks
</div>
<div class="col">
geeksforgeeks
</div>
</div>
<br><br><br>
<div class="row">
<div class="col">
geeksforgeeks
</div>
<div class="col">
geeksforgeeks
</div>
<div class="col">
geeksforgeeks
</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Cromo
- Borde
- Firefox
- Ópera