Cómo CSS Grid Areas reorganiza tu contenido

Curso de Responsive Design: Maquetación Mobile First

Contenido del curso

Fundamentos de Mobile First

Estructura Mobile First

Optimización de Performance y Accesibilidad

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0017:29

Cómo CSS Grid Areas reorganiza tu contenido

Curso de Responsive Design: Maquetación Mobile First

Clase 7 de 17

Clase 7 / 17

iecgerman .

Hace 8 meses•editado

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

Fundamentos de Mobile First

Por qué diseñar webs primero para móvil

¿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

Cómo CSS Grid Areas reorganiza tu contenido

Progreso del curso

Fundamentos de Mobile First

Estructura Mobile First

Optimización de Performance y Accesibilidad

Recursos

Recursos