Lecciones
Comenzar
Empezar a aprender
CodeGym /Cursos Java /Frontend SELF ES /Grid Areas

Grid Areas

Frontend SELF ES
Nivel 28 , Lección 3
Disponible

9.1 Propiedad grid-template-areas

CSS Grid Layout ofrece grandes posibilidades para crear diseños complejos mediante áreas nombradas (grid areas). La propiedad grid-template-areas permite definir áreas de la cuadrícula que se pueden usar para una ubicación simplificada de elementos. Esta propiedad permite a los desarrolladores organizar visualmente el diseño y facilitar su mantenimiento.

Conceptos básicos de grid-template-areas

  1. Definición de áreas:
    • La propiedad grid-template-areas permite asignar nombres a las diferentes áreas de la cuadrícula
    • Cada nombre de área representa un grupo rectangular de celdas
  2. Uso de áreas nombradas:
    • Las áreas definidas se pueden usar para colocar elementos, estableciendo la propiedad grid-area para cada elemento

Sintaxis de grid-template-areas:

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

Sintaxis para elementos de Grid:

    
      .header {
        grid-area: header;
      }

      .sidebar {
        grid-area: sidebar;
      }

      .main {
        grid-area: main;
      }

      .footer {
        grid-area: footer;
      }
Java webinar

Explicación:

  • Cada línea en el valor de grid-template-areas representa una fila en la cuadrícula
  • Cada palabra en la línea representa una celda o grupo de celdas
  • Los puntos (.) se pueden usar para celdas vacías

9.2 Ejemplo de uso de grid-template-areas

Ejemplo de implementación completa:

CSS
    
      .grid-container {
        display: grid;
        grid-template-areas:
          "header header header"
          "sidebar main main"
          "footer footer footer";
        grid-gap: 10px;
      }

      .header {
        grid-area: header;
        background-color: #2ecc71;
        padding: 20px;
        text-align: center;
      }

      .sidebar {
        grid-area: sidebar;
        background-color: #3498db;
        padding: 20px;
        text-align: center;
      }

      .main {
        grid-area: main;
        background-color: #9b59b6;
        padding: 20px;
        text-align: center;
      }

      .footer {
        grid-area: footer;
        background-color: #e74c3c;
        padding: 20px;
        text-align: center;
      }
HTML
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Ejemplo Grid Areas</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="header">Header</div>
            <div class="sidebar">Sidebar</div>
            <div class="main">Main Content</div>
            <div class="footer">Footer</div>
          </div>
        </body>
      </html>

Explicación del código:

  • .grid-container: define el contenedor de la cuadrícula usando display: grid y establece el diseño de la cuadrícula con grid-template-areas. En este caso, el diseño consiste en tres filas: la primera fila es el encabezado, la segunda fila consiste en la barra lateral y el contenido principal, la tercera fila es el pie de página.
  • .header, .sidebar, .main, .footer: definen los estilos para las diferentes áreas de la cuadrícula y las vinculan con los nombres de grid-template-areas usando la propiedad grid-area.

9.3 Gestión de áreas vacías

La propiedad grid-template-areas permite dejar áreas vacías utilizando el símbolo de punto (.) para denotar espacio vacío.

Ejemplo de implementación completa:

CSS
    
      .grid-container {
        display: grid;
        grid-template-areas:
          "header header header"
          ". main ."
          "footer footer footer";
        grid-gap: 10px;
      }

      .header {
        grid-area: header;
        background-color: #2ecc71;
        padding: 20px;
        text-align: center;
      }

      .main {
        grid-area: main;
        background-color: #9b59b6;
        padding: 20px;
        text-align: center;
      }

      .footer {
        grid-area: footer;
        background-color: #e74c3c;
        padding: 20px;
        text-align: center;
      }
HTML
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Áreas Vacías en Grid Areas</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="header">Header</div>
            <div class="main">Main Content</div>
            <div class="footer">Footer</div>
          </div>
        </body>
      </html>

Explicación del código:

  • .grid-container: crea un contenedor de cuadrícula con tres áreas: encabezado, contenido principal y pie de página. La fila del medio contiene áreas vacías a la izquierda y derecha del contenido principal.
  • .header, .main, .footer: definen estilos para las áreas y las vinculan con los nombres de las áreas en grid-template-areas
Comentarios
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION