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)

1. display: grid

• Define un elemento como contenedor de grid.
• Ejemplo:

   .grid-container {
    display: grid;
}

1. grid-template-columns

• Define las columnas del grid.
• Ejemplo:

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

1. 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 */
}

1. gap

• Define el espacio entre las filas y columnas.
• Ejemplo:

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

1. grid-template-areas

• Define áreas del grid.
• Ejemplo:

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

1. 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 */
}

1. 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 */
}

1. 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 */
}

1. 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 */
}

1. 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 */
}

1. 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 */
}

1. 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)

1. 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 */
}

1. 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 */
}

1. 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;
}

1. 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 */
}

1. 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 */
}

1. 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 */
}

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 */
}

1. 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 */
}

1. 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>