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

Propiedades del Ítem Grid

Siguiente ►
►

En este tema, exploraremos las propiedades específicas de los ítems dentro de un contenedor CSS Grid. Estas propiedades nos permiten controlar cómo se posicionan y dimensionan los elementos hijos dentro de la cuadrícula. A continuación, desglosaremos cada una de estas propiedades con ejemplos prácticos y ejercicios para reforzar el aprendizaje.

  1. grid-column-start y grid-column-end

Estas propiedades definen en qué línea de la cuadrícula comienza y termina un ítem en el eje de las columnas.

Sintaxis

.item {
  grid-column-start: <line>;
  grid-column-end: <line>;
}

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Propiedades del Ítem Grid</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .item {
      background-color: lightblue;
      padding: 20px;
      text-align: center;
    }
    .item1 {
      grid-column-start: 1;
      grid-column-end: 3;
    }
    .item2 {
      grid-column-start: 3;
      grid-column-end: 5;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>
</body>
</html>

Explicación

  • grid-column-start: 1; y grid-column-end: 3; en .item1 hacen que el ítem ocupe desde la primera hasta la tercera línea de columna.
  • grid-column-start: 3; y grid-column-end: 5; en .item2 hacen que el ítem ocupe desde la tercera hasta la quinta línea de columna.

  1. grid-row-start y grid-row-end

Estas propiedades definen en qué línea de la cuadrícula comienza y termina un ítem en el eje de las filas.

Sintaxis

.item {
  grid-row-start: <line>;
  grid-row-end: <line>;
}

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Propiedades del Ítem Grid</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-rows: repeat(4, 100px);
      gap: 10px;
    }
    .item {
      background-color: lightcoral;
      padding: 20px;
      text-align: center;
    }
    .item1 {
      grid-row-start: 1;
      grid-row-end: 3;
    }
    .item2 {
      grid-row-start: 3;
      grid-row-end: 5;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>
</body>
</html>

Explicación

  • grid-row-start: 1; y grid-row-end: 3; en .item1 hacen que el ítem ocupe desde la primera hasta la tercera línea de fila.
  • grid-row-start: 3; y grid-row-end: 5; en .item2 hacen que el ítem ocupe desde la tercera hasta la quinta línea de fila.

  1. grid-area

Esta propiedad es una forma abreviada de definir grid-row-start, grid-column-start, grid-row-end y grid-column-end.

Sintaxis

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Propiedades del Ítem Grid</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 100px);
      gap: 10px;
    }
    .item {
      background-color: lightgreen;
      padding: 20px;
      text-align: center;
    }
    .item1 {
      grid-area: 1 / 1 / 3 / 3;
    }
    .item2 {
      grid-area: 3 / 3 / 5 / 5;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>
</body>
</html>

Explicación

  • grid-area: 1 / 1 / 3 / 3; en .item1 hace que el ítem ocupe desde la primera hasta la tercera línea de fila y desde la primera hasta la tercera línea de columna.
  • grid-area: 3 / 3 / 5 / 5; en .item2 hace que el ítem ocupe desde la tercera hasta la quinta línea de fila y desde la tercera hasta la quinta línea de columna.

  1. justify-self y align-self

Estas propiedades permiten alinear individualmente los ítems dentro de su área asignada en la cuadrícula.

Sintaxis

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Propiedades del Ítem Grid</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 100px);
      gap: 10px;
    }
    .item {
      background-color: lightyellow;
      padding: 20px;
      text-align: center;
    }
    .item1 {
      justify-self: start;
      align-self: start;
    }
    .item2 {
      justify-self: end;
      align-self: end;
    }
    .item3 {
      justify-self: center;
      align-self: center;
    }
    .item4 {
      justify-self: stretch;
      align-self: stretch;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
    <div class="item item4">Item 4</div>
  </div>
</body>
</html>

Explicación

  • justify-self: start; y align-self: start; en .item1 alinean el ítem al inicio de su área asignada.
  • justify-self: end; y align-self: end; en .item2 alinean el ítem al final de su área asignada.
  • justify-self: center; y align-self: center; en .item3 centran el ítem en su área asignada.
  • justify-self: stretch; y align-self: stretch; en .item4 estiran el ítem para llenar completamente su área asignada.

Ejercicio Práctico

Instrucciones

  1. Crea una cuadrícula con 3 columnas y 3 filas.
  2. Coloca 5 ítems en la cuadrícula.
  3. Usa las propiedades grid-column-start, grid-column-end, grid-row-start, grid-row-end, justify-self y align-self para posicionar y alinear los ítems de manera creativa.

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 Práctico de Grid</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 100px);
      gap: 10px;
    }
    .item {
      background-color: lightgray;
      padding: 20px;
      text-align: center;
    }
    .item1 {
      grid-column: 1 / 3;
      grid-row: 1 / 2;
      justify-self: center;
      align-self: center;
    }
    .item2 {
      grid-column: 3 / 4;
      grid-row: 1 / 3;
      justify-self: end;
      align-self: start;
    }
    .item3 {
      grid-column: 1 / 2;
      grid-row: 2 / 4;
      justify-self: start;
      align-self: end;
    }
    .item4 {
      grid-column: 2 / 4;
      grid-row: 3 / 4;
      justify-self: stretch;
      align-self: stretch;
    }
    .item5 {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
      justify-self: center;
      align-self: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
    <div class="item item4">Item 4</div>
    <div class="item item5">Item 5</div>
  </div>
</body>
</html>

Explicación

  • item1 ocupa las columnas 1 y 2, y la fila 1, centrado en su área.
  • item2 ocupa la columna 3 y las filas 1 y 2, alineado al final y al inicio.
  • item3 ocupa la columna 1 y las filas 2 y 3, alineado al inicio y al final.
  • item4 ocupa las columnas 2 y 3, y la fila 3, estirado en su área.
  • item5 ocupa la columna 2 y la fila 2, centrado en su área.

Conclusión

En esta lección, hemos aprendido cómo usar las propiedades del ítem Grid para controlar la posición y alineación de los elementos dentro de una cuadrícula. Estas propiedades son esenciales para crear diseños complejos y responsivos con CSS Grid. En el siguiente tema, exploraremos cómo crear diseños completos utilizando CSS Grid.

◄ 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