El módulo CSS Grid Layout se usa para crear un sistema de diseño basado en cuadrículas, con la ayuda de filas y columnas, facilita el diseño de cualquier página web sin usar flotadores ni posicionamiento.
Sintaxis:
.class {
display:grid;
}
Nota: un elemento HTML se convierte en una cuadrícula si ese elemento establece display:grid
- grid-template-columns : Esto especifica el tamaño de las columnas
- grid-template-rows : especifica el tamaño de las filas.
- grid-gap : establece los espacios entre filas y columnas.
Algunos valores de palabras clave de grid-template-columns:
- grid-template-columns: repeat( [ <entero-positivo> | auto-completar | auto-ajuste], <lista-de-pistas>);
- grid-template-rows: repeat( [ <entero-positivo> | auto-completar | auto-ajuste], <lista-de-pistas>);
Representa un fragmento repetido de la lista de pistas, lo que permite
escribir una gran cantidad de columnas que exhiben un patrón recurrente en una forma más compacta. Te permite definir un patrón repetido X veces.
- cuadrícula-plantilla-columnas: auto ;
- cuadrícula-plantilla-filas: automático;
Indica que la colocación automática, un intervalo automático o un intervalo predeterminado de una columna se ajusta al contenido de la columna. La fila se ajusta al contenido de la fila.
- columnas de plantilla de cuadrícula: minmax(min, max);
- cuadrícula-plantilla-filas: minmax(min, max);
Es una notación funcional que define un rango de tamaño mayor o igual al mínimo y menor o igual al máximo
- La unidad Fr: Fr es una unidad fraccionaria.
- La unidad Fr es una entrada que calcula automáticamente las divisiones del diseño al ajustar los espacios dentro de la cuadrícula.
Ejemplo 1. Este ejemplo ilustra el uso de la unidad fr.
html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px;
grid-gap: 10px;
}
.container div {
border: 3px black;
border-radius: 7px;
background-color: yellowgreen;
padding: 1em;
text-align: center;
color: darkgreen;
}
h1 {
color: green;
text-align: center;
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="container">
<div>geeksforgeeks 1</div>
<div>geeksforgeeks 2</div>
<div>geeksforgeeks 3</div>
<div>geeksforgeeks 4</div>
</div>
</body>
</html>
salida 1
Tenemos 4 columnas, cada una ocupa la misma cantidad de espacio. Cada uno tiene un ancho de 1fr. Cada columna es igual. 1fr=25% del espacio disponible.
Ejemplo 2 . Este ejemplo ilustra el uso de la unidad fr con diferentes valores fraccionarios.
html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 2fr 2fr;
grid-template-rows: 100px 150px 200px 200px;
grid-gap: 10px;
}
.container div {
border: 3px black;
border-radius: 7px;
background-color: yellowgreen;
padding: 1em;
text-align: center;
color: darkgreen;
}
h1 {
color: green;
text-align: center;
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="container">
<div>geeksforgeeks 1</div>
<div>geeksforgeeks 2</div>
<div>geeksforgeeks 3</div>
<div>geeksforgeeks 4</div>
<div>geeksforgeeks 5</div>
<div>geeksforgeeks 6</div>
<div>geeksforgeeks 7</div>
<div>geeksforgeeks 8</div>
<div>geeksforgeeks 9</div>
<div>geeksforgeeks 10</div>
<div>geeksforgeeks 11</div>
<div>geeksforgeeks 12</div>
<div>geeksforgeeks 13</div>
<div>geeksforgeeks 14</div>
<div>geeksforgeeks 15</div>
<div>geeksforgeeks 16</div>
</div>
</body>
</html>
salida 2
Tenemos 4 columnas, las dos primeras columnas ocupan la misma cantidad de espacio, es decir, 1fr y las dos últimas columnas ocupan la misma cantidad de espacio, es decir, 2fr.
Ejemplo 2. Este ejemplo ilustra el uso de la unidad fr con repetición() y notación automática.
html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
grid-template-rows: auto;
grid-gap: 10px;
}
.container div {
border: 3px black;
border-radius: 7px;
background-color: yellowgreen;
padding: 1em;
text-align: center;
color: darkgreen;
}
/* Designing h1 element */
h1 {
color: green;
text-align: center;
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="container">
<div>geeksforgeeks 1</div>
<div>geeksforgeeks 2</div>
<div>geeksforgeeks 3</div>
<div>geeksforgeeks 4</div>
<div>geeksforgeeks 5</div>
<div>geeksforgeeks 6</div>
<div>geeksforgeeks 7</div>
<div>geeksforgeeks 8</div>
<div>geeksforgeeks 9</div>
<div>geeksforgeeks 10</div>
<div>geeksforgeeks 11</div>
<div>geeksforgeeks 12</div>
<div>geeksforgeeks 13</div>
<div>geeksforgeeks 14</div>
<div>geeksforgeeks 15</div>
<div>geeksforgeeks 16</div>
</div>
</body>
</html>
repetir (número de columnas/filas, el ancho de columna que queremos);
salida 3
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari