CSS | Propiedad grid-gap

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: 
 

  1. propiedad grid-column-gap
  2. 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *