Cómo CSS Grid Areas reorganiza tu contenido

Clase 7 de 17 • Curso de Responsive Design: Maquetación Mobile First

Alberto Luebbert M.

student•

El curso va muy bien. Sin embargo, en la edición no se ve la continuación para terminar la sección de Skills.

Eduardo Enrique González Presidente

student•

Aqui se lo comparto la carpeta raiz, ahi en esta en el perfil de ella de GitHub

iecgerman .

student•

y si te vas directo al css, ocupas primero meter todas las clases skill-card dentro de un div que le puse de clase "skills__grid"

Valentina Hernández

student•

Con grid-template-areas defines un template visual del layout y con grid-area enlazas cada elemento. Así posicionas header, sidebar, content y footer sin cálculos complejos.

display: grid activa el modelo de cuadrícula.
grid-template-areas dibuja el layout con nombres de áreas.
grid-template-columns define anchos (ej: 200px y 1fr).
gap y margin-bottom mejoran la separación visual.
grid-area enlaza cada bloque con su área del template.

Con grid-template-areas defines un template visual del layout y con grid-area enlazas cada elemento. Así posicionas header, sidebar, content y footer sin cálculos complejos.

display: grid activa el modelo de cuadrícula.
grid-template-areas dibuja el layout con nombres de áreas.
grid-template-columns define anchos (ej: 200px y 1fr).
gap y margin-bottom mejoran la separación visual.
grid-area enlaza cada bloque con su área del template.

header { grid-area: header; 
  background: #2ECC71; }
.sidebar { 
grid-area: sidebar; 
background: #E74C3C; }
.content { 
grid-area: content; 
background: #3498DB; }
footer { 
grid-area: footer; 
background: purple; }

header ocupa el 100% del ancho al repetirse en la fila: "header header".
sidebar queda a la izquierda y content a la derecha.
footer también ocupa el 100% con "footer footer".
Verifica que los nombres de clases coincidan (ej: .sidebar y no .bar).

Cuando quieres que un ítem se extienda a través de varias columnas o filas consecutivas sin recalcular fracciones, usa span. Es directo y legible.

.grid-span {
display: grid;  
grid-template-columns: repeat(3, 1fr);  
gap: 10px;  
margin-bottom: 20px;}
/* Extender un elemento por 2 columnas *
/.item--span-2 { grid-column: span 2; }

Raul Aguilar

Team Platzi••

Por qué usar CSS Grid en vez de flexbox?

CSS Grid es ideal para diseños bidimensionales, es decir, para organizar elementos tanto en filas como en columnas. Flexbox, por otro lado, es más adecuado para diseños unidimensionales, ya sea en filas o en columnas.

La clase "Cómo CSS Grid Areas reorganiza tu contenido" demuestra cómo Grid Areas permite reestructurar el contenido de forma compleja, lo cual es muy útil para tarjetas, dashboards o secciones con mucha información que necesita reorganizarse según el tamaño de la pantalla.

iecgerman .

student••

para que pongan rapido el div.skills__grid, primero seleccionan todas las skill-card y despues presionan ctrl+shift+p y teclean "wrap"

dan enter y ahora si teclean "div.skills__grid" y todo se pondrá dentro de ese nuevo Bloque__Elemento

/*****************************************/

Aquí les dejo el código de como quedan las cards

<div class="skills__grid">
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/ts.svg"
                                                alt="TypeScript"
                                          />
                                    </div>
                                    <p class="skill-card__label">TypeScript</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/next.svg"
                                                alt="Next"
                                          />
                                    </div>
                                    <p class="skill-card__label">Next</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/js.svg"
                                                alt="JavaScript"
                                          />
                                    </div>
                                    <p class="skill-card__label">JavaScript</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/react.svg"
                                                alt="React"
                                          />
                                    </div>
                                    <p class="skill-card__label">React</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img src="assets/git.svg" alt="Git" />
                                    </div>
                                    <p class="skill-card__label">Git</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/node.svg"
                                                alt="Node.js"
                                          />
                                    </div>
                                    <p class="skill-card__label">Node.js</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/sass.svg"
                                                alt="Sass/Scss"
                                          />
                                    </div>
                                    <p class="skill-card__label">Sass/Scss</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/nest.svg"
                                                alt="Nest.Js"
                                          />
                                    </div>
                                    <p class="skill-card__label">Nest.Js</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/stroybook.svg"
                                                alt="Storybook"
                                          />
                                    </div>
                                    <p class="skill-card__label">Storybook</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/socket.svg"
                                                alt="Socket.io"
                                          />
                                    </div>
                                    <p class="skill-card__label">Socket.Io</p>
                              </div>
                        </div>

/* Grid auto-fit */

.skills__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: var(--spacing-20);
}

.skill-card:nth-child(n + 7) {
      display: none;
}

@media (width >= 768px) {
      .skills__grid {
            gap: var(--spacing-32);
      }
      .skill-card:nth-child(n + 7) {
            display: flex;
      }
      .skill-card:nth-child(n + 9) {
            display: none;
      }
}

@media (width >= 1024px) {
      .skills__grid {
            grid-template-columns: repeat(5, 1fr);
      }
      .skill-card:nth-child(n + 9) {
            display: flex;
      }
}

header { grid-area: header; 
  background: #2ECC71; }
.sidebar { 
grid-area: sidebar; 
background: #E74C3C; }
.content { 
grid-area: content; 
background: #3498DB; }
footer { 
grid-area: footer; 
background: purple; }

<div class="skills__grid">
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/ts.svg"
                                                alt="TypeScript"
                                          />
                                    </div>
                                    <p class="skill-card__label">TypeScript</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/next.svg"
                                                alt="Next"
                                          />
                                    </div>
                                    <p class="skill-card__label">Next</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/js.svg"
                                                alt="JavaScript"
                                          />
                                    </div>
                                    <p class="skill-card__label">JavaScript</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/react.svg"
                                                alt="React"
                                          />
                                    </div>
                                    <p class="skill-card__label">React</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img src="assets/git.svg" alt="Git" />
                                    </div>
                                    <p class="skill-card__label">Git</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/node.svg"
                                                alt="Node.js"
                                          />
                                    </div>
                                    <p class="skill-card__label">Node.js</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/sass.svg"
                                                alt="Sass/Scss"
                                          />
                                    </div>
                                    <p class="skill-card__label">Sass/Scss</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/nest.svg"
                                                alt="Nest.Js"
                                          />
                                    </div>
                                    <p class="skill-card__label">Nest.Js</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/stroybook.svg"
                                                alt="Storybook"
                                          />
                                    </div>
                                    <p class="skill-card__label">Storybook</p>
                              </div>
                              <div class="skill-card">
                                    <div class="skill-card__icon">
                                          <img
                                                src="assets/socket.svg"
                                                alt="Socket.io"
                                          />
                                    </div>
                                    <p class="skill-card__label">Socket.Io</p>
                              </div>
                        </div>

/* Grid auto-fit */

.skills__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: var(--spacing-20);
}

.skill-card:nth-child(n + 7) {
      display: none;
}

@media (width >= 768px) {
      .skills__grid {
            gap: var(--spacing-32);
      }
      .skill-card:nth-child(n + 7) {
            display: flex;
      }
      .skill-card:nth-child(n + 9) {
            display: none;
      }
}

@media (width >= 1024px) {
      .skills__grid {
            grid-template-columns: repeat(5, 1fr);
      }
      .skill-card:nth-child(n + 9) {
            display: flex;
      }
}

Cómo CSS Grid Areas reorganiza tu contenido

Fundamentos de Mobile First

¿Por qué tu web debe ser Mobile First?

¿Qué es Mobile First y cómo empezar?

Prepara tu proyecto Mobile First

Estructura Mobile First

Construye un header responsive con HTML semántico

Flexbox y Clamp para crear un Hero responsive

Build mobile-first skill cards with CSS

Cómo CSS Grid Areas reorganiza tu contenido

Patrones responsive con CSS Grid y auto-fit

Optimización de Performance y Accesibilidad

Cambia el layout con Flexbox según la pantalla

Optimiza imágenes con picture y srcset

Fallbacks de Cloudinary en picture elements

Prueba tu web en el teléfono con Live Server

Debug en iOS Safari

inputmode y autocomplete en HTML

Pruebas de rendimiento Mobile First con Lighthouse

Container Queries vs Media Queries en CSS

Code review Mobile First con AI