UD02 | Plantillas en la construcción de páginas Web

CSS | Grid

Se presentan diversas formas de declarar columnas y filas en CSS Grid:

Propiedad grid-template-columns y grid-template-rows con valores en píxeles.
Ejemplo:

.grid{
/* Declaramos el contenedor como un contenedor
   tipo Grid */
    display:grid;

/* Añadimos espaciados entre las cajas Grid */
    gap:0.5em;

/* Explicitamos 3 columnas */
    grid-template-columns: 100px 100px 100px;

/* Explicitamos 2 filas */
    grid-template-rows: 100px 200px;
}

Propiedad grid-template-columns y grid-template-rows con valores en %.
Ejemplo:

.grid{
    display:grid;
    gap:0.5em;
    
/* Explicitamos 3 columnas */
    grid-template-columns: 20% 20% 20%;
    /* Las columnas ocupan el 60% del
       contenedor Grid. El resto (40%)
       estará desocupado. */
}

Propiedad grid-template-columns y grid-template-rows con valores fraccionarios.
Ejemplo:

.grid{
    display:grid;
    gap:0.5em;
    
/* Explicitamos 3 columnas */
    grid-template-columns:  1fr 2fr 1fr;

/* Explicitamos 3 filas */
    grid-template-rows: 1fr 2fr 3fr;
}

Propiedad grid-template-columns y grid-template-rows con valores combinados.
Ejemplo:

.grid{
    display:grid;
    gap:0.5em;
    
/* Explicitamos 3 columnas */
    grid-template-columns:  200px 1fr 1fr;

/* Explicitamos 3 filas */
    grid-template-rows: 300px 1fr 1fr 300px;
}
Se presentan la propiedad minmax();:

Propiedad minmax(); en filas
Ejemplo:

.grid{
/* Declaramos el contenedor como un contenedor
   tipo Grid */
    display:grid;

/* Añadimos espaciados entre las cajas Grid */
    gap:0.5em;

/* Explicitamos 2 columnas */
    grid-template-rows: minmax(150px, 200px) 400px;
    /* La columna 1 mide entre 150px y 200px y la
    columna 2 mide exactamente 400px */
}

Propiedad minmax(); en columnas
Ejemplo:

.grid{
    display:grid;
    gap:0.5em;

/* Explicitamos 2 columnas */
    grid-template-columns: minmax(300px, 1fr) 1fr;
    /* La columna 1 mide entre 300px y 1 de dos
    fraccciones (la mitad del contenedor).
    La columna 2 mide el resto de espacio
    disponible */
}
Se presenta la propiedad repeat();:

Ejemplo sin la propiedad minmax();
Ejemplo:

.grid{
/* Declaramos el contenedor como un contenedor
   tipo Grid */
    display:grid;

/* Añadimos espaciados entre las cajas Grid */
    gap:0.5em;

/* Explicitamos 6 columnas iguales */
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    /* Este método no es eficiente */
}

Propiedad minmax();
Ejemplo:

.grid{
        display:grid;
        gap:0.5em;
    
    /* Explicitamos 6 columnas iguales */
        grid-template-columns: repeat(6, 1fr);
        /* Este método es más eficiente */
    }

Propiedad minmax(); combinada con otros valores
Ejemplo:

.grid{
    display:grid;
    gap:0.5em;

/* Explicitamos 6 columnas iguales */
    ggrid-template-columns: 150px repeat(2, 1fr) 150px;
    /* Dos columnas centrales iguales con dos
    columnas de 150px a cada lado  */
}
Se presentan las propiedades de posicionamiento:

Propiedades grid-column-start y grid-column-end
Ejemplo:

.grid{
    display:grid;
    gap:0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);

/* La primera celda ocupa 1 fila y 4 columnas */
    grid-column-start: 1;
    grid-column-end: 5; /* Contando de izquierda
                           a derecha */
}

Propiedades grid-row-start y grid-row-end
Ejemplo:

.grid{
    display:grid;
    gap:0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);

/* La primera celda ocupa 4 filas y 1 columna */
    grid-row-start: 1;
    grid-row-end: 5; /* Contando de izquierda
                        a derecha */
}

Propiedades grid-column-end contando de derecha a izquierda
Ejemplo:

.grid{
    display:grid;
    gap:0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);

/* La primera celda ocupa 1 fila y 4 columnas */
    grid-column-start: 1;
    grid-column-end: -1; /* Contando de derecha
                            a izquierda */
}

Propiedades grid-row-end contando de abajo a arriba
Ejemplo:

.grid{
    display:grid;
    gap:0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);

/* La primera celda ocupa 4 filas y 1 columna */
    grid-row-start: 1;
    grid-row-end: -1; /* Contando de abajo
                         a arriba */
}
Se presenta la palabra clave span:

Expandir columnas
Ejemplo:


<div class="grid">
    <div class="item">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

.grid{
    display:grid;
    gap:0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.grid div.item{
    /* La celda ocupa 3 columnas desde la columna 1 */
    grid-column: 1 / span 3; /* Se puede abreviar como
                                grid-column: span 3; */
}

Expandir filas
Ejemplo:


<div class="grid">
    <div class="item">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

.grid{
    display:grid;
    gap:0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.grid div.item{
    /* La celda ocupa 3 filas desde la fila 2 */
    grid-row: 2 / span 3;
}

Expandir filas y columnas
Ejemplo:


<div class="grid">
    <div class="item">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

.grid{
    display:grid;
    gap:0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.grid div.item{
    /* La celda ocupa 2 columnas desde la columna 2 */
    grid-column: 2 / span 2;

    /* La celda ocupa 2 filas desde la fila 2 */
    grid-row: 2 / span 2;
}
Se presenta la palabra técnica de Grid Template:

Maquetación mediante Grid Template
Ejemplo:

<div class="contenedor-grid">
    <div class="encabezado">1</div>
    <div class="sidebar-1">2</div>
    <div class="principal">3</div>
    <div class="sidebar-2">4</div>
    <div class="widget">5</div>
    <div class="pie">6</div>
</div>
.contenedor-grid{
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "encabezado encabezado encabezado"
        "sidebar-1  principal  sidebar-2"
        "sidebar-1  widget     sidebar-2"
        "pie        pie        pie";
}

.contenedor-grid div.encabezado{
    grid-area: encabezado;
}

.contenedor-grid div.sidebar-1{
    grid-area: sidebar-1;
}

.contenedor-grid div.principal{
    grid-area: principal;
}

.contenedor-grid div.sidebar-2{
    grid-area: sidebar-2;
}

.contenedor-grid div.widget{
    grid-area: widget;
}

.contenedor-grid div.pie{
    grid-area: pie;
}