Aprendamos sobre lo más emocionante que ha llegado al diseño web front-end en mucho tiempo. Esa es la tecnología de CSS Grid. CSS Grid es un nuevo conjunto de tecnologías que permite a los diseñadores y desarrolladores web incorporar potentes técnicas de diseño de páginas en la web. Tradicionalmente, el diseño de páginas de la web ha sido una práctica extremadamente desafiante. En el pasado, es posible que hayamos usado tablas, divs, capas, todo tipo de trucos CSS y, en última instancia, marcos CSS como Foundation, Bootstrap y otros. Ahora tenemos CSS Grid, una herramienta de diseño bidimensional muy poderosa para colocar elementos en páginas web. Puede crear casi cualquier diseño que se le ocurra con CSS Grid. Echemos un vistazo a algunos ejemplos de cómo funciona CSS Grid ahora.

Contenedor de rejilla

Lo primero que queremos hacer es configurar un contenedor de cuadrícula. Hacemos esto estableciendo la displaypropiedad en grid. Cualquier hijo directo de un contenedor de cuadrícula definido ahora es automáticamente elementos de cuadrícula.

pantalla: cuadrícula;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
 
<head>
    <style>
        .grid-container {
            display: grid;
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <img src="1.png">
        <img src="2.png">
        <img src="3.png">
        <img src="4.png">
        <img src="5.png">
        <img src="6.png">
    </div>
</body>
 
</html>

Observe que cuando establecemos displayen grid, los elementos aparecen como filas apiladas que abarcan todo el ancho del contenedor. Aquí tenemos algunas imágenes con números como ejemplo. Puede ver las líneas de la cuadrícula ya que las hemos activado en Firefox para una fácil visualización.
cuadrícula de visualización

pantalla: cuadrícula en línea;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
 
<head>
    <style>
        .grid-container {
            display: inline-grid;
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <img src="1.png">
        <img src="2.png">
        <img src="3.png">
        <img src="4.png">
        <img src="5.png">
        <img src="6.png">
    </div>
</body>
 
</html>

En el caso de que displayse establezca en inline-grid, observe que los elementos de la cuadrícula solo abarcan el ancho del contenido.
mostrar cuadrícula en línea

Cuadrícula explícita

Una vez que tenemos el contenedor configurado, las columnas y filas se pueden definir explícitamente usando las propiedades grid-template-rowsy grid-template-columns.

rejilla-plantilla-filas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
 
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: 50px 75px;
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <img src="1.png">
        <img src="2.png">
        <img src="3.png">
        <img src="4.png">
        <img src="5.png">
        <img src="6.png">
    </div>
</body>
 
</html>

Aquí, la primera fila tiene explícitamente una altura de 50 píxeles y la segunda fila tiene una altura de 75 píxeles. Todas las demás filas simplemente usan la altura del contenido que contienen. En nuestro caso, son imágenes de 100 px por 100 px.
rejilla-plantilla-filas

columnas-plantilla-cuadrícula

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
 
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: 100px 100px;
            grid-template-columns: 100px 100px 100px;
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <img src="1.png">
        <img src="2.png">
        <img src="3.png">
        <img src="4.png">
        <img src="5.png">
        <img src="6.png">
    </div>
</body>
 
</html>

Ahora tenemos 2 filas y 3 columnas, todas con una altura y un ancho exactos de 100 píxeles.
columnas-plantilla-cuadrícula

fr en filas de plantilla de cuadrícula y columnas de plantilla de cuadrícula

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
 
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <img src="1.png">
        <img src="2.png">
        <img src="3.png">
        <img src="4.png">
        <img src="5.png">
        <img src="6.png">
    </div>
</body>
 
</html>

Las unidades fraccionarias son una excelente manera de permitir que el navegador divida automáticamente el espacio libre en partes iguales. Este ejemplo muestra dos filas de partes iguales y tres columnas de dimensiones iguales. Las imágenes tienen solo 100 px por 100 px, por lo que comienzan a la izquierda en cada celda de la cuadrícula por defecto.
fr en filas de plantilla de cuadrícula y columnas de plantilla de cuadrícula

Tamaño de pista de cuadrícula mínimo y máximo

Puede usar la función minmax () para crear pistas de cuadrícula que usan el espacio disponible, pero que no se reducen más que un tamaño definido ni crecen más allá de un tamaño definido.

La función minmax ()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
 
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: minmax(100px,150px) 1fr;
            grid-template-columns: 1fr 1fr 1fr;
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <img src="200x200.png">
        <img src="2.png">
        <img src="3.png">
        <img src="4.png">
        <img src="5.png">
        <img src="200x200.png">
    </div>
</body>
 
</html>

ejemplo de grid-template-rows minmax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
 
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows:  1fr 1fr;
            grid-template-columns: minmax(100px,auto) 1fr minmax(100px,auto);
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <img src="200x200.png">
        <img src="2.png">
        <img src="3.png">
        <img src="4.png">
        <img src="5.png">
        <img src="200x200.png">
    </div>
</body>
 
</html>

cuadrícula-plantilla-columnas minmax

Al combinar las unidades minmax () y fr, uno puede crear todo tipo de diseños receptivos que ya no necesitan hacer uso de múltiples consultas de medios en el navegador.

Repetición de pistas de cuadrícula

En lugar de tener que definir explícitamente cada fila o columna, puede usar la función repeat () para decir cuántas filas o columnas le gustaría.

La función repeat ()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
 
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <img src="1.png">
        <img src="2.png">
        <img src="3.png">
        <img src="4.png">
        <img src="5.png">
        <img src="6.png">
        <img src="7.png">
        <img src="8.png">
        <img src="9.png">
    </div>
</body>
 
</html>

ejemplo de función de repetición

Canaletas con brecha de rejilla

De forma predeterminada, no hay ningún espacio entre filas y columnas. Puede definir espacios en blanco entre filas y columnas usando grid-gap. Tenga en cuenta que no puede aplicar ningún estilo a las canaletas. Estos son solo para espacios en blanco.

brecha de red

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
 
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <img src="1.png">
        <img src="2.png">
        <img src="3.png">
        <img src="4.png">
        <img src="5.png">
        <img src="6.png">
        <img src="7.png">
        <img src="8.png">
        <img src="9.png">
    </div>
</body>
 
</html>

brecha de cuadrícula css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
 
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);
            grid-row-gap: 5px;
            grid-column-gap: 20px;
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <img src="1.png">
        <img src="2.png">
        <img src="3.png">
        <img src="4.png">
        <img src="5.png">
        <img src="6.png">
        <img src="7.png">
        <img src="8.png">
        <img src="9.png">
    </div>
</body>
 
</html>

cuadrícula-fila-brecha cuadrícula-columna-brecha

Colocación de elementos mediante números de línea de cuadrícula

Lo que hace que CSS Grid sea muy poderoso es la capacidad de colocar contenido exactamente donde lo desea. A continuación, se muestran algunos ejemplos de cómo colocar imágenes en ubicaciones precisas en la cuadrícula.

grid-row-start (end) grid-column-start (end)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
 
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: repeat(2, 1fr);
            grid-template-columns: repeat(3, 1fr);
        }
 
        .a {
            grid-row-start: 2;
            grid-row-end: 3;
            grid-column-start: 3;
            grid-column-end: 4;
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <img class="a" src="1.png">
        <img class="b" src="2.png">
        <img class="c" src="3.png">
        <img class="d" src="4.png">
        <img class="e" src="5.png">
        <img class="f" src="6.png">
    </div>
</body>

grid-row-start grid-row-end grid-column-start grid-column-end

Cómo distribuir elementos en filas y columnas

En estos ejemplos, agregaremos algunos elementos div con algunos colores de fondo para mostrar cómo los elementos de la cuadrícula se pueden hacer para abarcar múltiples filas o columnas como desee.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
 
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: repeat(2, 1fr);
            grid-template-columns: repeat(3, 1fr);
        }
 
        .a {
            grid-column-start: 1;
            grid-column-end: 4;
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <div class="a"><img class="a" src="1.png"></div>
        <div class="b"><img class="b" src="2.png"></div>
        <div class="c"><img class="c" src="3.png"></div>
        <div class="d"><img class="d" src="4.png"></div>
    </div>
</body>
 
</html>

grid-column-start grid-column-end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
 
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: repeat(2, 1fr);
            grid-template-columns: repeat(3, 1fr);
        }
 
        .a {
            grid-row-start: 1;
            grid-row-end: 3;
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <div class="a"><img class="a" src="1.png"></div>
        <div class="b"><img class="b" src="2.png"></div>
        <div class="c"><img class="c" src="3.png"></div>
        <div class="d"><img class="d" src="4.png"></div>
        <div class="e"><img class="e" src="5.png"></div>
    </div>
</body>
 
</html>

grid-row-start grid-row-end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
 
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);
        }
 
        .a {
            grid-row: 2 / 4;
            grid-column: 2 / 4;
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <div class="a"><img class="a" src="1.png"></div>
        <div class="b"><img class="b" src="2.png"></div>
        <div class="c"><img class="c" src="3.png"></div>
        <div class="d"><img class="d" src="4.png"></div>
        <div class="e"><img class="e" src="5.png"></div>
        <div class="f"><img class="f" src="6.png"></div>
    </div>
</body>
 
</html>

rejilla-fila rejilla-columna

Líneas de cuadrícula con nombre

Es posible asignar nombres a las líneas de la cuadrícula cuando se definen utilizando columnas de plantilla de cuadrícula y filas de plantilla de cuadrícula. Una vez que una línea tiene un nombre, se puede hacer referencia a ella al intentar colocar un elemento en la cuadrícula. Aquí configuramos algunos nombres para las líneas de fila y columna. Una vez en su lugar, colocamos un elemento de la cuadrícula haciendo referencia a los nombres que proporcionamos y no a los números de línea reales.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
 
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
            grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];
        }
 
        .a {
            grid-row-start: row-2-start;
            grid-row-end: row-end;
            grid-column-start: col-1-start;
            grid-column-end: col-end;
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <div class="a"><img class="a" src="1.png"></div>
        <div class="b"><img class="b" src="2.png"></div>
        <div class="c"><img class="c" src="3.png"></div>
        <div class="d"><img class="d" src="4.png"></div>
    </div>
</body>
 
</html>

colocar el elemento de la cuadrícula usando líneas con nombre

Cómo nombrar y colocar áreas de cuadrícula

Un método alternativo que puede utilizar para colocar elementos en la cuadrícula implica colocar elementos utilizando las denominadas áreas de plantilla con nombre. Este enfoque es realmente genial por la forma en que funciona y, a menudo, se lo conoce como un tipo de diseño de cuadrícula de método ascii-art.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
 
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-areas: "header header"
                                           "content sidebar"
                                           "footer footer";
            grid-template-rows: 150px 300px 100px;
            grid-template-columns: 1fr 200px;
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
 
</html>

ejemplo de áreas de plantilla de cuadrícula
¡Ok, eso es realmente genial !

Podemos revertir fácilmente el diseño anterior con un par de ajustes simples.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
 
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-areas: "header header"
                                           "sidebar content"
                                           "footer footer";
            grid-template-rows: 150px 300px 100px;
            grid-template-columns: 200px 1fr;
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
 
</html>

demostración de áreas de plantilla de cuadrícula

También puede colocar elementos utilizando nombres de área de cuadrícula. En este ejemplo, el primer div tiene el color. Sin embargo, en realidad se coloca en el área del pie de página debido a la configuración de grid-row-start, grid-row-end, grid-column-start y grid-column-end en el pie de página nombrado.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
 
<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-areas: "header header"
                                           "sidebar content"
                                           "footer footer";
            grid-template-rows: 150px 300px 100px;
            grid-template-columns: 200px 1fr;
        }
 
        .a {
            grid-row-start:    footer;
            grid-row-end:      footer;
            grid-column-start: footer;
            grid-column-end:   footer;
        }
    </style>
</head>
 
<body>
    <div class="grid-container">
        <div class="a"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
 
</html>

Colocación de elementos por área de cuadrícula

Cuadrícula implícita

¿Qué sucede cuando solo tiene, digamos, 3 celdas de cuadrícula definidas en el CSS, pero tiene 9 elementos de cuadrícula en el marcado html? En este escenario, comienza a encontrarse con el concepto de la cuadrícula implícita . Cualquier elemento adicional más allá del espacio especificado se coloca automáticamente en la cuadrícula implícita. Una cuadrícula implícita se puede definir utilizando las propiedades grid-auto-rows, grid-auto-columnas y grid-auto-flow.

Este primer ejemplo muestra solo 3 celdas definidas explícitamente. Sin embargo, tenemos 9 elementos de la cuadrícula para tratar. En este caso, usamos

Header Ads Widget

Ticker

Tutorial de cuadrícula CSS