La propiedad grid-gap establece el tamaño del espacio entre las filas y las columnas en un diseño de cuadrícula.
Es una propiedad abreviada para las siguientes propiedades:
- propiedad grid-column-gap
- propiedad grid-row-gap
Sintaxis:
grid-gap: grid-row-gap grid-column-gap;
Valores de propiedad:
- grid-row-gap : establece el tamaño del espacio entre las filas en un diseño de cuadrícula. Su valor por defecto es 0.
- grid-column-gap : establece el tamaño del espacio entre las columnas en un diseño de cuadrícula. Su valor por defecto es 0.
Ejemplo 1:
html
<!DOCTYPE html> <html> <head> <title> CSS | grid-gap Property </title> <style> body { text-align: center; } h1 { color: black; } .grid-container { display: grid; grid-template-columns: auto auto auto; grid-column-gap: 50px; grid-row-gap: 10px; background-color: blue; padding: 10px; } .grid-container > div { background-color: white; text-align: center; padding: 20px 0; font-size: 30px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>Grid-gap property</h2> <p>This grid has a 50px gap between columns and 10px gap between rows. :</p> <div class="grid-container"> <div class="item1">G</div> <div class="item2">E</div> <div class="item3">E</div> <div class="item4">K</div> <div class="item5">S</div> </div> </body> </html>
Producción:
Ejemplo-2:
html
<!DOCTYPE html> <html> <head> <title> CSS | grid-gap Property </title> <style> body { text-align: center; } h1 { color: green; } .grid-container { display: grid; grid-template-columns: auto auto auto; grid-column-gap: 8%; grid-row-gap: 5%; background-color: black; padding: 6%; } .grid-container > div { background-color: yellow; text-align: center; padding: 20px 0; font-size: 30px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>Grid-gap property</h2> <p>This grid has a 8% gap between columns and 5% gap between rows:</p> <div class="grid-container"> <div class="item1">G</div> <div class="item2">E</div> <div class="item3">E</div> <div class="item4">K</div> <div class="item5">S</div> </div> </body> </html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad grid-gap se enumeran a continuación:
- Google Chrome 57.0
- Internet Explorer 16.0
- MozillaFirefox 52.0
- Safari 10.0
- Ópera 44.0
Publicación traducida automáticamente
Artículo escrito por ChinkitManchanda y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA