Curso IT Fundamentos CSS 031_Diseño de cuadrícula Grid

Diseño de cuadrícula Grid

Una cuadrícula consiste en una serie de líneas horizontales y verticales que forman un patrón de diseño. Basándonos en la cuadrícula, podemos organizar elementos de diseño, ayudándonos a diseñar una serie de páginas con elementos de posición y ancho fijos, haciendo nuestras páginas web más uniformes.

Una cuadrícula generalmente tiene muchas columnas (columns) y filas (rows), así como espacios entre filas y columnas, este espacio generalmente se denomina canal (gutter).

Efecto del ejemplo

Conceptos básicos

El diseño Grid está compuesto por los siguientes conceptos básicos:

Contenedor de cuadrícula (grid container): El diseño de cuadrícula está compuesto por contenedores de cuadrícula e ítems de cuadrícula. El contenedor de cuadrícula es el contenedor que coloca los ítems de cuadrícula en la cuadrícula. El contenedor de cuadrícula puede ser cualquier elemento, pero generalmente se usa el elemento div.
Ítem de cuadrícula (grid item): Los ítems de cuadrícula son elementos colocados en el contenedor de cuadrícula. Los ítems de cuadrícula pueden ser cualquier elemento, pero generalmente se usan elementos div.
Línea de cuadrícula (grid line): Las líneas de cuadrícula son las líneas que dividen el contenedor de cuadrícula en filas y columnas. Las líneas de cuadrícula pueden ser horizontales o verticales.
Columna de cuadrícula (grid column): Las columnas de cuadrícula son líneas verticales en el contenedor de cuadrícula.
Fila de cuadrícula (grid row): Las filas de cuadrícula son líneas horizontales en el contenedor de cuadrícula.

Propiedades comunes

Propiedades del contenedor de cuadrícula

El contenedor de cuadrícula tiene las siguientes propiedades para controlar el diseño de cuadrícula:

display: Establece el modo de visualización del contenedor de cuadrícula. El contenedor de cuadrícula debe establecerse como display: grid o display: inline-grid para usar el diseño de cuadrícula.
grid-template-columns: Establece el número de columnas y anchos de columna del contenedor de cuadrícula (usando unidades como fr, px, em, etc.).
grid-template-rows: Establece el número de filas y alturas de fila del contenedor de cuadrícula (usando unidades como fr, px, em, etc.).
grid-template: Establece simultáneamente grid-template-columns y grid-template-rows.
grid-auto-columns: Establece los anchos de columna del contenedor de cuadrícula.
grid-auto-rows: Establece las alturas de fila del contenedor de cuadrícula.

Propiedades del ítem de cuadrícula

Los ítems de cuadrícula tienen las siguientes propiedades para controlar el diseño de ítems de cuadrícula en la cuadrícula:

grid-column: Establece la columna en la que se encuentra el ítem de cuadrícula.
grid-row: Establece la fila en la que se encuentra el ítem de cuadrícula.
grid-column-start: Establece la posición inicial del ítem de cuadrícula en la columna.
grid-column-end: Establece la posición final del ítem de cuadrícula en la columna.
grid-row-start: Establece la posición inicial del ítem de cuadrícula en la fila.
grid-row-end: Establece la posición final del ítem de cuadrícula en la fila.
grid-area: Establece el área en la que se encuentra el ítem de cuadrícula.
grid-gap: Establece el espaciado entre líneas de cuadrícula.

Diseño de cuadrícula

Definir anchos de columna y alturas de fila fijos y adaptativos

Ejemplo:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 100px 200px auto;
4
    /* Primera columna 100px, segunda columna 200px, espacio restante asignado a columna adaptativa */
5
    grid-template-rows: 100px 200px auto;
6
    /* Primera fila 100px, segunda fila 200px, espacio restante asignado a fila adaptativa */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Demostración Grid</div>
3
        <div class="item">Demostración Grid</div>
4
        <div class="item">Demostración Grid</div>
5
        <div class="item">Demostración Grid</div>
6
        <div class="item">Demostración Grid</div>
7
        <div class="item">Demostración Grid</div>
8
        <div class="item">Demostración Grid</div>
9
        <div class="item">Demostración Grid</div>
10
        <div class="item">Demostración Grid</div>
11
    </div>

Efecto:

Efecto del ejemplo Uso de porcentajes para definir anchos de columna y alturas de fila

Ejemplo:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 2fr 1fr;
4
    /* Primera columna ocupa 30%, segunda columna ocupa dos partes del espacio restante, tercera columna ocupa una parte del espacio restante */
5
    grid-template-rows: 30% 2fr 1fr;
6
    /* Primera fila ocupa 30%, segunda fila ocupa dos partes del espacio restante, tercera fila ocupa una parte del espacio restante */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Demostración Grid</div>
3
        <div class="item">Demostración Grid</div>
4
        <div class="item">Demostración Grid</div>
5
        <div class="item">Demostración Grid</div>
6
        <div class="item">Demostración Grid</div>
7
        <div class="item">Demostración Grid</div>
8
        <div class="item">Demostración Grid</div>
9
        <div class="item">Demostración Grid</div>
10
        <div class="item">Demostración Grid</div>
11
    </div>

Efecto:

Efecto del ejemplo División equitativa (asignación promedio) de anchos de columna y alturas de fila

Ejemplo:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* Tres columnas iguales, cada columna ocupa una parte del espacio restante */
5
    grid-template-rows: repeat(3, 1fr);
6
    /* Tres filas iguales, cada fila ocupa una parte del espacio restante */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Demostración Grid</div>
3
        <div class="item">Demostración Grid</div>
4
        <div class="item">Demostración Grid</div>
5
        <div class="item">Demostración Grid</div>
6
        <div class="item">Demostración Grid</div>
7
        <div class="item">Demostración Grid</div>
8
        <div class="item">Demostración Grid</div>
9
        <div class="item">Demostración Grid</div>
10
        <div class="item">Demostración Grid</div>
11
    </div>

Efecto:

Efecto del ejemplo Uso de minmax para definir el ancho y altura mínimos y máximos de columnas y filas

Ejemplo:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);
4
    /* Primera columna ancho mínimo 100px, ocupa una parte del espacio restante; segunda columna ancho mínimo 200px, ocupa dos partes del espacio restante */
5
    grid-template-rows: minmax(100px, 1fr) minmax(200px, 2fr);
6
    /* Primera fila altura mínima 100px, ocupa una parte del espacio restante; segunda fila altura mínima 200px, ocupa dos partes del espacio restante */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Demostración Grid</div>
3
        <div class="item">Demostración Grid</div>
4
        <div class="item">Demostración Grid</div>
5
        <div class="item">Demostración Grid</div>
6
    </div>

Efecto:

Efecto del ejemplo

Espaciado de cuadrícula

El espaciado de cuadrícula está controlado por las dos propiedades grid-row-gap y grid-column-gap. Además, en CSS Grid Level 2 se introdujo la propiedad gap, que puede controlar simultáneamente grid-row-gap y grid-column-gap.

Ejemplo:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 30% 30%;
4
    grid-template-rows: 200px 200px;
5
    grid-row-gap: 50px; /* Espacio entre filas de 50px */
6
    grid-column-gap: 30px; /* Espacio entre columnas de 30px */
7
    /* gap: 50px 30px; Espacio entre filas de 50px, espacio entre columnas de 30px */
8
}
9
.item{
10
    margin: 10px;
11
    background-color: rgb(100, 150, 200);
12
}

1
    <div class="grid-example">
2
        <div class="item">Demostración Grid</div>
3
        <div class="item">Demostración Grid</div>
4
        <div class="item">Demostración Grid</div>
5
        <div class="item">Demostración Grid</div>
6
        <div class="item">Demostración Grid</div>
7
        <div class="item">Demostración Grid</div>
8
    </div>

Efecto:

Efecto del ejemplo

Posicionamiento de cuadrícula

El posicionamiento de cuadrícula generalmente se refiere al uso de propiedades como grid-column, grid-row y grid-area para posicionar ítems en el diseño de cuadrícula. Estas propiedades se utilizan para especificar las columnas y filas que ocupa un ítem en la cuadrícula, o para especificar directamente el área en la que se encuentra el ítem.

grid-column es una propiedad para establecer las columnas que abarca un ítem de cuadrícula. Es una abreviatura de grid-column-start y grid-column-end. Con grid-column, puede definir más convenientemente la posición y el número de columnas que abarca un ítem de cuadrícula en dirección horizontal.
grid-row es una propiedad para establecer las filas que abarca un ítem de cuadrícula. Es una abreviatura de grid-row-start y grid-row-end. Con grid-row, puede definir más convenientemente la posición y el número de filas que abarca un ítem de cuadrícula en dirección vertical.
La propiedad grid-area es una propiedad abreviada para establecer simultáneamente las propiedades grid-row-start, grid-column-start, grid-row-end y grid-column-end. Con grid-area, puede definir más intuitivamente la posición y el tamaño de un ítem de cuadrícula en el diseño de cuadrícula.

Ejemplo:

1
.example {
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* Define 3 columnas, cada columna ocupa 1 parte de espacio */
5
    grid-template-rows: repeat(2, 150px);
6
    /* Define 2 filas, cada fila tiene una altura de 150px */
7
    gap: 10px;
8
    padding: 20px;
9
}
10
.item {
11
    background-color: #f2f2f2;
12
    padding: 20px;
13
    border: 1px solid #ddd;
14
    text-align: center;
15
}
16
/* Posicionamiento con grid-column y grid-row */
17
.item1 {
18
    grid-column: 1 / 3; /* Desde columna 1 hasta columna 3 (1+2 columnas) */
19
    grid-row: 1 / 2;    /* Desde fila 1 hasta fila 2 (1 fila) */
20
}
21
/* Posicionamiento con grid-area */
22
.item2 {
23
    grid-area: 2 / 2 / 3 / 4; /* Desde fila 2, columna 2 hasta fila 3, columna 4 (2 filas) (2+3 columnas) */
24
}

1
<div class="example">
2
    <div class="item item1">Item 1</div>
3
    <div class="item item2">Item 2</div>
4
    <div class="item">Item 3</div>
5
    <div class="item">Item 4</div>
6
    <div class="item">Item 5</div>
7
    <div class="item">Item 6</div>
8
</div>

Efecto:

Efecto del ejemplo

Ejemplo:

1
body {
2
    margin: 0;
3
    padding: 0;
4
}
5

6
.container {
7
    display: grid;
8
    grid-template-columns: 1fr 2fr;
9
    /* Define dos columnas, primera columna ocupa una parte, segunda columna ocupa dos partes */
10
    grid-template-rows: auto;
11
    /* Define altura de fila, primera y tercera fila altura determinada por contenido, segunda fila ocupa espacio restante */
12
    grid-template-areas:
13
    "header header"
14
    "sidebar main"
15
    "footer footer";
16
    /* Define diseño de áreas, cada área representada por una cadena, espacios separan celdas, salto de línea representa nueva fila */
17
    min-height: 100vh;
18
    /* Establece altura mínima, asegura que el footer sea visible incluso cuando la altura del contenido es menor que el viewport */
19
}
20

21
.header {
22
    grid-area: header;
23
    /* Coloca .header en el área llamada "header" */
24
    background-color: #333;
25
    color: #fff;
26
    padding: 10px;
27
}
28

29
.sidebar {
30
    grid-area: sidebar;
31
    /* Coloca .sidebar en el área llamada "sidebar" */
32
    background-color: #f2f2f2;
33
    padding: 10px;
34
}
35

36
.main {
37
    grid-area: main;
38
    /* Coloca .main en el área llamada "main" */
39
    padding: 10px;
40
}
41

42
.footer {
43
    grid-area: footer;
44
    /* Coloca .footer en el área llamada "footer" */
45
    background-color: #333;
46
    color: #fff;
47
    padding: 10px;
48
}

1
    <div class="container">
2
        <div class="header">Header</div>
3
        <div class="sidebar">Sidebar</div>
4
        <div class="main">
5
          <h1>Main Content</h1>
6
          <p>This is the main content area.</p>
7
        </div>
8
        <div class="footer">Footer</div>
9
    </div>

Efecto:

Efecto del ejemplo

Diseño de cuadrícula Grid

Conceptos básicos

Propiedades comunes

Diseño de cuadrícula

Espaciado de cuadrícula

Posicionamiento de cuadrícula

Comentarios