CSS | propiedad grid-column-start

La propiedad grid-column-start define en qué línea de columna comenzará. Hay diferentes valores para la propiedad grid-column-start, con el valor diferente que el usuario puede comenzar desde cualquier lugar. Hay un valor específico que también se efectúa en el mismo bloque de nombres.

Sintaxis: 
 

grid-column-start: auto|span n|column-line;

Valor por defecto: 

  • auto

Valores de propiedad: 
 

auto: una palabra clave que especifica que la propiedad no contribuye en nada a la ubicación del elemento de cuadrícula. El valor predeterminado, el elemento se colocará siguiendo el flujo

  • Sintaxis: 
     
grid-column-start: auto; 
  • Ejemplo: 
     

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | grid-column-start Property
    </title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 10px;
            background-color: lightgreen;
            padding: 10px;
        }
         
        .grid-container div {
            background-color: green;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
            color: white;
        }
         
        .item1 {
            <!-- grid-column-start property
                               with auto value -->
            grid-column-start: auto;
        }
    </style>
</head>
 
<body>
 
    <center>
        <h1>
         The grid-column-start Property
        </h1>
        <h3>auto value</h3>
        <strong>the item will be placed
               following the initial flow</strong>
   </center>
 
    <div class="grid-container">
        <div class="item1">G</div>
        <div class="item2">e</div>
        <div class="item2">e</div>
        <div class="item3">k</div>
        <div class="item4">s</div>
        <div class="item5">f</div>
        <div class="item6">o</div>
        <div class="item6">r</div>
        <div class="item1">G</div>
        <div class="item2">e</div>
        <div class="item2">e</div>
        <div class="item3">k</div>
        <div class="item4">s</div>
    </div>
 
</body>
 
</html>
  • Producción:
     

span n: una palabra clave especifica el número de columnas que abarcará el elemento y, si el nombre se proporciona como a, solo se cuentan las líneas con ese nombre

  • Sintaxis: 
     
grid-column-start: span n; 
  • Ejemplo: 
     

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | grid-column-start Property
    </title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 10px;
            background-color: lightgreen;
            padding: 10px;
        }
         
        .grid-container div {
            background-color: green;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
            color: white;
        }
         
        .item1 {
            <!-- grid-column-start property
                                with span value -->
            grid-column-start: span 4;
        }
    </style>
</head>
 
<body>
 
     <center>
        <h1>
         The grid-column-start Property
        </h1>
        <h3>auto value</h3>
        <strong>the item will be placed following
                           the initial flow</strong>
    </center>
    <div class="grid-container">
        <div class="item1">G</div>
        <div class="item2">e</div>
        <div class="item2">e</div>
        <div class="item3">k</div>
        <div class="item4">s</div>
        <div class="item5">f</div>
        <div class="item6">o</div>
        <div class="item6">r</div>
        <div class="item1">G</div>
        <div class="item2">e</div>
        <div class="item2">e</div>
        <div class="item3">k</div>
        <div class="item4">s</div>
    </div>
 
</body>
 
</html>
  • Producción:
     

columna-línea: una palabra clave especifica en qué columna comenzar la visualización del elemento, el usuario puede establecer la columna de inicio.

  • Sintaxis: 
     
grid-column-start: column-line; 
  • Ejemplo: 
     

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | grid-column-start Property
    </title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 10px;
            background-color: lightgreen;
            padding: 10px;
        }
         
        .grid-container div {
            background-color: green;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
            color: white;
        }
         
        .item1 {
            <!-- grid-column-start property
                            with column-line value --!>
          grid-column-start: 2;
        }
           
    </style>
</head>
 
<body>
 
    <center>
        <h1>
         The grid-column-start Property
        </h1>
        <h3>auto value</h3>
        <strong>the item will be placed following
                            the initial flow</strong>
    </center>
    <div class="grid-container">
        <div class="item1">G</div>
        <div class="item2">e</div>
        <div class="item2">e</div>
        <div class="item3">k</div>
        <div class="item4">s</div>
        <div class="item5">f</div>
        <div class="item6">o</div>
        <div class="item6">r</div>
        <div class="item1">G</div>
        <div class="item2">e</div>
        <div class="item2">e</div>
        <div class="item3">k</div>
        <div class="item4">s</div>
    </div>
 
</body>
 
</html>
  • Producción: 
     

Navegador compatible: los navegadores compatibles con la propiedad grid-column-start se enumeran a continuación: 

  • Google Chrome 57.0
  • Borde 16.0
  • MozillaFirefox 52.0
  • Safari 10.1
  • Ópera 44.0

Publicación traducida automáticamente

Artículo escrito por Sabya_Samadder 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 *