El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Propiedades del Contenedor Grid

Siguiente ►
►

En este tema, aprenderemos sobre las propiedades del contenedor Grid en CSS. CSS Grid Layout es un sistema de diseño bidimensional que permite crear diseños complejos de manera sencilla y eficiente. El contenedor Grid es el elemento que contiene los elementos hijos que se organizan en una cuadrícula.

  1. Definiendo un Contenedor Grid

Para convertir un elemento en un contenedor Grid, utilizamos la propiedad display con el valor grid.

.container {
  display: grid;
}

  1. Propiedades del Contenedor Grid

2.1. grid-template-columns

Define el número de columnas y su tamaño.

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
}

En este ejemplo, el contenedor Grid tendrá tres columnas con anchos de 100px, 200px y 100px respectivamente.

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Template Columns</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 100px 200px 100px;
      gap: 10px;
    }
    .item {
      background-color: lightblue;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

2.2. grid-template-rows

Define el número de filas y su tamaño.

.container {
  display: grid;
  grid-template-rows: 50px 100px 50px;
}

En este ejemplo, el contenedor Grid tendrá tres filas con alturas de 50px, 100px y 50px respectivamente.

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Template Rows</title>
  <style>
    .container {
      display: grid;
      grid-template-rows: 50px 100px 50px;
      gap: 10px;
    }
    .item {
      background-color: lightcoral;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

2.3. gap

Define el espacio entre las filas y columnas de la cuadrícula.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

En este ejemplo, el contenedor Grid tendrá un espacio de 20px entre cada fila y columna.

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Gap</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;
    }
    .item {
      background-color: lightgreen;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

2.4. grid-auto-rows y grid-auto-columns

Define el tamaño de las filas y columnas generadas automáticamente.

.container {
  display: grid;
  grid-auto-rows: 100px;
  grid-auto-columns: 100px;
}

En este ejemplo, cualquier fila o columna generada automáticamente tendrá un tamaño de 100px.

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Auto Rows and Columns</title>
  <style>
    .container {
      display: grid;
      grid-auto-rows: 100px;
      grid-auto-columns: 100px;
      gap: 10px;
    }
    .item {
      background-color: lightyellow;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</body>
</html>

2.5. grid-template-areas

Define áreas dentro de la cuadrícula que pueden ser referenciadas por los elementos hijos.

.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

En este ejemplo, se definen áreas llamadas header, sidebar, content y footer.

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Template Areas</title>
  <style>
    .container {
      display: grid;
      grid-template-areas: 
        "header header header"
        "sidebar content content"
        "footer footer footer";
      gap: 10px;
    }
    .header {
      grid-area: header;
      background-color: lightblue;
    }
    .sidebar {
      grid-area: sidebar;
      background-color: lightcoral;
    }
    .content {
      grid-area: content;
      background-color: lightgreen;
    }
    .footer {
      grid-area: footer;
      background-color: lightyellow;
    }
    .item {
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header item">Header</div>
    <div class="sidebar item">Sidebar</div>
    <div class="content item">Content</div>
    <div class="footer item">Footer</div>
  </div>
</body>
</html>

Ejercicio Práctico

Ejercicio

Crea un contenedor Grid con las siguientes especificaciones:

  • Tres columnas con tamaños 1fr, 2fr y 1fr.
  • Dos filas con tamaños 100px y 200px.
  • Un espacio de 15px entre las filas y columnas.
  • Define áreas para header, main, sidebar y footer.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejercicio Grid</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-rows: 100px 200px;
      gap: 15px;
      grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    }
    .header {
      grid-area: header;
      background-color: lightblue;
    }
    .sidebar {
      grid-area: sidebar;
      background-color: lightcoral;
    }
    .main {
      grid-area: main;
      background-color: lightgreen;
    }
    .footer {
      grid-area: footer;
      background-color: lightyellow;
    }
    .item {
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header item">Header</div>
    <div class="sidebar item">Sidebar</div>
    <div class="main item">Main</div>
    <div class="footer item">Footer</div>
  </div>
</body>
</html>

Conclusión

En esta lección, hemos aprendido sobre las propiedades del contenedor Grid en CSS. Estas propiedades nos permiten definir la estructura de nuestra cuadrícula, incluyendo el número y tamaño de filas y columnas, el espacio entre ellas, y la definición de áreas específicas dentro de la cuadrícula. Con esta base, estamos listos para explorar las propiedades de los ítems Grid en la siguiente lección.

◄ Anterior
◄
Siguiente ►
►

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados