La propiedad CSS grid-row-gap se usa para establecer el tamaño del espacio entre los elementos de la fila de la cuadrícula. De manera similar, la propiedad CSS grid-column-gap se usa para establecer el tamaño del espacio (gap) entre los elementos de la columna.
Sintaxis:
- Propiedad CSS grid-column-gap
grid-column-gap: none|length|percentage|initial|inherit;
- propiedad CSS grid-row-gap
grid-row-gap: length|percentage|global-values;
Enfoque: Especifica el tamaño de las líneas de la cuadrícula. Puede pensar en ello como establecer el ancho de los canalones entre las columnas/filas.
- Seleccione la clase que incluye el diseño de cuadrícula.
- Especifique los valores para la propiedad grid-gap de esa clase.
- Ejemplo:
.container {grid-column-gap: <line-size>;grid-row-gap: <line-size>;}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
/* Use grid-row-gap and grid-column-gap
to specify the gap between the square
grids the gap between the row is
specified 10px the gap between the
row is specified 100px */
.grid-box {
display: grid;
grid-template-columns: auto auto auto auto;
/* Specify the divider gap measurement in a grid */
grid-row-gap: 10px;
grid-column-gap: 100px;
background-color: yellow;
padding: 5px;
}
.grid-box div {
background-color: pink;
text-align: center;
padding: 15px 0;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Demo to change the divider
gap in Square grid picture
</h1>
<div class="grid-box">
<div class="item1">gfg</div>
<div class="item2">gfg</div>
<div class="item3">gfg</div>
<div class="item4">gfg</div>
<div class="item5">gfg</div>
<div class="item6">gfg</div>
<div class="item7">gfg</div>
<div class="item8">gfg</div>
<div class="item9">gfg</div>
<div class="item10">gfg</div>
<div class="item11">gfg</div>
<div class="item12">gfg</div>
<div class="item13">gfg</div>
<div class="item14">gfg</div>
<div class="item15">gfg</div>
<div class="item16">gfg</div>
<div class="item17">gfg</div>
<div class="item18">gfg</div>
<div class="item19">gfg</div>
<div class="item20">gfg</div>
<div class="item21">gfg</div>
<div class="item22">gfg</div>
<div class="item23">gfg</div>
<div class="item24">gfg</div>
</div>
</body>
</html>
Producción:
Un ejemplo de cuadrícula con un espacio de 50 píxeles entre filas y un espacio de 50 píxeles entre columnas.
Compatibilidad del navegador:
- Soporte en diseño Flex:
- cromo: no
- Firefox: Sí (63.0)
- Borde: No
- Internet Explorer: Sí
- Ópera: No
- Safari: N0
- Soporte en diseño de cuadrícula:
- Cromo: Sí (66.0)
- Firefox: Sí (61.0)
- Borde: Sí (16.0)
- Internet Explorer: Sí
- Ópera: Sí (53.0)
- Safari: Sí (10.1)
Publicación traducida automáticamente
Artículo escrito por SonaliPatel y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA