Grid CSS

El Grid Layout de CSS es una poderosa herramienta para crear diseños bidimensionales en la web. A continuación, se presentan las propiedades correspondientes al contenedor y los elementos hijos, junto con ejemplos.

Propiedades del Contenedor (Grid Container)

display: grid

Define un elemento como contenedor de grid.
Ejemplo:

   .grid-container {
    display: grid;
}

grid-template-columns

Define las columnas del grid.
Ejemplo:


.grid-container {
    grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales */
}

grid-template-rows

Define las filas del grid.
Ejemplo:


.grid-container {
    grid-template-rows: 100px 200px; /* Dos filas, la primera de 100px y la segunda de 200px */
}

gap

Define el espacio entre las filas y columnas.
Ejemplo:


.grid-container {
    gap: 10px; /* Espacio de 10px entre filas y columnas */
}

grid-template-areas

Define áreas del grid.
Ejemplo:


.grid-container {
    grid-template-areas:
      'header header header'
      'main main sidebar'
      'footer footer footer';
}

grid-auto-rows

Define el tamaño de las filas implícitas (aquellas no definidas explícitamente en grid-template-rows).
Ejemplo:

.grid-container {
    grid-auto-rows: 150px; /* Todas las filas implícitas tendrán una altura de 150px */
}

grid-auto-columns

Define el tamaño de las columnas implícitas.
Ejemplo:


.grid-container {
    grid-auto-columns: 150px; /* Todas las columnas implícitas tendrán un ancho de 150px */
}

grid-auto-flow

Controla cómo se colocan automáticamente los elementos en el grid.
- Valores posibles: row, column, row dense, column dense.
Ejemplo:


.grid-container {
    grid-auto-flow: row; /* Los elementos se colocarán en filas */
}

justify-items

Alinea el contenido de los elementos hijos a lo largo del eje horizontal.
Valores posibles: start, end, center, stretch.
Ejemplo:


.grid-container {
    justify-items: center; /* Alinea el contenido de los elementos hijos en el centro horizontalmente */
}

align-items

Alinea el contenido de los elementos hijos a lo largo del eje vertical.
Valores posibles: start, end, center, stretch.
Ejemplo:

.grid-container {
    align-items: center; /* Alinea el contenido de los elementos hijos en el centro verticalmente */
}

justify-content

Alinea la totalidad del grid a lo largo del eje horizontal.
Valores posibles: start, end, center, space-between, space-around, space-evenly.
Ejemplo:

.grid-container {
    justify-content: space-between; /* Distribuye el espacio entre los elementos del grid */
}

align-content

Alinea la totalidad del grid a lo largo del eje vertical.
Valores posibles: start, end, center, space-between, space-around space-evenly, stretch.
Ejemplo:


.grid-container {
    align-content: center; /* Alinea el contenido del grid en el centro verticalmente */
}

Propiedades de los Hijos (Grid Ítems)

grid-column

Define el inicio y el fin de una columna.
Ejemplo:


.grid-item {
    grid-column: 1 / 3; /* Ocupa desde la columna 1 hasta la 3 */
}

grid-row

Define el inicio y el fin de una fila.
Ejemplo:


.grid-item {
    grid-row: 1 / 2; /* Ocupa desde la fila 1 hasta la 2 */
}

grid-area

Asigna el área definida en grid-template-areas.
Ejemplo:

.header {
    grid-area: header;
}
.main {
    grid-area: main;
}
.sidebar {
    grid-area: sidebar;
}
.footer {
    grid-area: footer;
}

grid-column-start

Define la línea de inicio de una columna.
Ejemplo:

.grid-item {
    grid-column-start: 2; /* El elemento comenzará en la columna 2 */
}

grid-column-end

Define la línea de fin de una columna.
Ejemplo:

.grid-item {
    grid-column-end: 4; /* El elemento terminará en la columna 4 */
}

grid-row-start

Define la línea de inicio de una fila.
Ejemplo:


.grid-item {
    grid-row-start: 1; /* El elemento comenzará en la fila 1 */
}

grid-row-end

Define la línea de fin de una fila.
Ejemplo:


.grid-item {
    grid-row-end: 3; /* El elemento terminará en la fila 3 */
}

justify-self

Alinea el contenido de un solo elemento a lo largo del eje horizontal.
Valores posibles: start, end, center, stretch.
Ejemplo:


.grid-item {
    justify-self: end; /* Alinea el contenido del elemento al final horizontalmente */
}

align-self

Alinea el contenido de un solo elemento a lo largo del eje vertical.
Valores posibles: start, end, center, stretch.
Ejemplo:


.grid-item {
    align-self: center; /* Alinea el contenido del elemento en el centro verticalmente */
}

Ejemplo Completo con Más Propiedades de Grid Layout

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Layout Example</title>

</head>
<body>
    <div class="grid-container">
        <div class="header">Header</div>
        <div class="main">Main Content</div>
        <div class="sidebar">Sidebar</div>
        <div class="footer">Footer</div>
        <div class="grid-item1">Item 1</div>
        <div class="grid-item2">Item 2</div>
    </div>
</body>
</html>

CSS

<style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 100px 200px 100px;
            gap: 10px;
            grid-auto-rows: 150px;
            grid-auto-columns: 150px;
            grid-auto-flow: row dense;
            justify-items: center;
            align-items: center;
            justify-content: space-between;
            align-content: center;
            grid-template-areas:
              'header header header'
              'main main sidebar'
              'footer footer footer';
        }

        .header {
            grid-area: header;
            background-color: #f1c40f;
        }
        .main {
            grid-area: main;
            background-color: #1abc9c;
        }
        .sidebar {
            grid-area: sidebar;
            background-color: #e74c3c;
        }
        .footer {
            grid-area: footer;
            background-color: #3498db;
        }

        .grid-item1 {
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 2;
            justify-self: center;
            align-self: center;
        }

        .grid-item2 {
            grid-area: 2 / 2 / 4 / 4;
            justify-self: start;
            align-self: end;
        }
    </style>

Blog

Fernando

Propiedades del Contenedor (Grid Container)

Propiedades de los Hijos (Grid Ítems)

Ejemplo Completo con Más Propiedades de Grid Layout

Join Our Newsletter. No Spam, Only the good stuff.

Related