CSS | Propiedad grid-row-gap

La propiedad grid-row-gap en CSS se usa para definir el tamaño del espacio entre los elementos de la cuadrícula. El usuario puede especificar el ancho del espacio que separa las filas proporcionando valor a grid-row-gap.

Sintaxis:

grid-row-gap: length | percentage | global-values;

Valores de propiedad:

longitud: el usuario puede configurar el valor de espacio entre filas de cuadrícula para que tenga una longitud fija medida en px, cm, etc.

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS grid-row-gap Property
        </title>
          
        <style>
            .main {
                display: grid;
                grid-template-columns: auto auto auto;
                grid-row-gap: 20px;
                grid-column-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:

porcentaje (%): esta propiedad se utiliza para establecer el valor de la brecha entre filas de cuadrícula en forma de porcentaje, donde los valores porcentuales son relativos a la dimensión del elemento.

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS grid-row-gap Property
        </title>
          
        <style>
            .main {
                display: grid;
                grid-template-columns: auto auto auto;
                grid-row-gap: 20%;
                grid-column-gap: 2%;
                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:

valor global: esta propiedad se usa para establecer el valor de la brecha de filas de cuadrícula en forma de algunos términos fijos que incluyen heredar, inicial.

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS grid-row-gap Property
        </title>
          
        <style>
            .main {
                display: grid;
                grid-template-columns: auto auto auto;
                grid-row-gap: initial;
                grid-column-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-row-gap se enumeran a continuación:

Google Chrome 57.0
Internet Explorer 16.0
Firefox 52.0
Safari 10.0
Ópera 44.0

Publicación traducida automáticamente

Artículo escrito por piyushpilaniya98 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta