La propiedad grid-column-gap en CSS se usa para establecer el tamaño del espacio entre las columnas en un diseño de cuadrícula.
Sintaxis:
grid-column-gap: none|length|initial|inherit;
Valores de propiedad:
- none: se utiliza para establecer la propiedad grid-column-gap en su valor predeterminado. El valor predeterminado de grid-column-gap es 0.
- longitud: El tamaño del espacio entre las columnas se da en términos de longitud. El valor de la longitud puede tener la forma pf px, em, etc. El valor no debe ser negativo.
- initial: se utiliza para establecer la propiedad grid-column-gap en su valor predeterminado.
- heredar: esta propiedad se hereda de su padre.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-column-gap Property
</title>
<style>
.main {
display: grid;
grid-template-columns: auto auto auto;
/* CSS property used here */
grid-column-gap: 20px;
grid-row-gap: 20px;
background-color: green;
padding: 30px;
}
.main > div {
background-color: white;
text-align: center;
padding: 15px;
font-size: 25px;
}
</style>
</head>
<body>
<div class="main">
<div>G</div>
<div>E</div>
<div>E</div>
<div>K</div>
<div>S</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo describe la propiedad grid-column-gap predeterminada.
<!DOCTYPE html>
<html>
<head>
<title>
CSS grid-column-gap Property
</title>
<style>
.main {
display: grid;
grid-template-columns: auto auto auto;
/* CSS property used here */
grid-column-gap: initial;
grid-row-gap: 20px;
background-color: green;
padding: 30px;
}
.main > div {
background-color: white;
text-align: center;
padding: 15px;
font-size: 25px;
}
</style>
</head>
<body>
<div class="main">
<div>G</div>
<div>E</div>
<div>E</div>
<div>K</div>
<div>S</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad CSS grid-column-gap se enumeran a continuación:
- Google Chrome 57.0
- Safari 10.0
- Ópera 44.0
- Firefox 52.0
- Internet Explorer 16.0
Publicación traducida automáticamente
Artículo escrito por apeksharustagi1998 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA