CSS | Propiedad de plantilla de cuadrícula

La propiedad grid-template en CSS es una propiedad abreviada para definir columnas, filas y áreas de cuadrícula. El usuario puede establecer los valores para las siguientes propiedades abreviadas:

Sintaxis:

grid-template: none| grid-template-rows/ grid-template-columns | 
grid-template-areas | initial | inherit

Valores de propiedad:

ninguno: el usuario puede establecer el tamaño de filas y columnas al valor predeterminado utilizando «ninguno».
Ejemplo

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | grid-template Property
    </title>
    <style>
        .main {
            display: grid;
            grid-template: none;
            grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }
         
        .main > div {
            background-color: white;
            text-align: center;
            padding: 15px 0;
            font-size: 30px;
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div class="item1">G</div>
        <div class="item2">E</div>
        <div class="item3">E</div>
        <div class="item4">K</div>
    </div>
</body>
 
</html>

Producción:

grid-template-rows/grid-template-columns: este valor de propiedad se usa para especificar el tamaño de las filas y columnas medidas en px, cm, etc. Si el usuario desea que el tamaño de la fila o columna siga siendo el predeterminado, establezca esa fila o columna en «auto».
Ejemplo:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | grid-template Property
    </title>
    <style>
        .main {
            display: grid;
            grid-template: 50px 100px/150px auto;
            grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }
         
        .main > div {
            background-color: white;
            text-align: center;
            padding: 15px 0;
            font-size: 30px;
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div class="item1">G</div>
        <div class="item2">E</div>
        <div class="item3">E</div>
        <div class="item4">K</div>
    </div>
</body>
 
</html>

Producción:

grid-template-areas: este valor de propiedad especifica áreas dentro del diseño de cuadrícula. La propiedad grid-area se usa para nombrar los elementos de la cuadrícula y luego hacer referencia a ellos usando grid-template-areas.
Ejemplo:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | grid-template Property
    </title>
    <style>
        .item1 {
            grid-area: item1;
        }
         
        .item2 {
            grid-area: item2;
        }
         
        .item3 {
            grid-area: item3;
        }
         
        .item4 {
            grid-area: item4;
        }
         
        .main {
            display: grid;
            grid-template: 'item1 item1 item1'
                           'item2 item3 item4';
            grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }
         
        .main > div {
            background-color: white;
            text-align: center;
            padding: 15px 0;
            font-size: 30px;
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div class="item1">G</div>
        <div class="item2">E</div>
        <div class="item3">E</div>
        <div class="item4">K</div>
    </div>
</body>
 
</html>

Producción:

initial: este valor de propiedad establecerá la propiedad en su valor predeterminado.
Ejemplo:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | grid-template Property
    </title>
    <style>
        .main {
            display: grid;
            grid-template: initial;
            alignnone grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }
         
        .main > div {
            background-color: white;
            text-align: center;
            padding: 15px 0;
            font-size: 30px;
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div class="item1">G</div>
        <div class="item2">E</div>
        <div class="item3">E</div>
        <div class="item4">K</div>
    </div>
</body>
 
</html>

Producción:

heredar: Esto heredará esta propiedad de su elemento padre.
Ejemplo:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS | grid-template Property
    </title>
    <style>
        .main {
            display: grid;
            grid-template: inherit;
            grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }
         
        .main > div {
            background-color: white;
            text-align: center;
            padding: 15px 0;
            font-size: 30px;
        }
         
        alignnone
    </style>
</head>
 
<body>
    <div class="main">
        <div class="item1">G</div>
        <div class="item2">E</div>
        <div class="item3">E</div>
        <div class="item4">K</div>
    </div>
</body>
 
</html>

Producción:

Navegadores compatibles: los navegadores compatibles con CSS grid-template Property se enumeran a continuación:

Google Chrome 57.0
Borde 16
Firefox 52.0
Safari 10.1
Ó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

html

html

html

html

html

Deja una respuesta Cancelar la respuesta