Cambio de paradigma de los estándares Viewport a componentes independientes

El diseño web responsivo tradicional se basa en el ancho total de la pantalla (ventana gráfica). Sin embargo, en el mundo actual de diseño orientado a componentes, el ancho disponible de las partes de la interfaz de usuario difiere según el elemento principal (barra lateral o columna principal) en el que se colocan.

Con la llegada de “Subgrid” y “Consultas de contenedor” de CSS Grid, la flexibilidad del diseño y la capacidad de mantenimiento han mejorado drásticamente.

Receta 1: subcuadrícula para sincronizar las posiciones de los botones mientras se alinean las alturas de las tarjetas

Incluso si la cantidad de caracteres en el título es impar en una interfaz de usuario de tarjeta de varias columnas, las alturas de “imágenes, títulos, texto y botones” en cada tarjeta se pueden alinear perfectamente en una línea horizontal.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4; /* 画像・タイトル・本文・フッターの4行を親グリッドに同期 */
}

No es necesario ningún JavaScript para calcular la altura de cada tarjeta.

Receta 2: @container cuyo diseño se adapta según su ancho

El componente de la tarjeta cambia automáticamente entre alineación horizontal y vertical dependiendo del ancho del contenedor en el que se coloca.

.card-wrapper {
  container-type: inline-size;
  container-name: card-container;
}

@container card-container (min-width: 450px) {
  .card-content {
    flex-direction: row; /* 横幅に余裕があれば横並びへ自動変形 */
  }
}

Puede reutilizar los mismos componentes tanto para el área amplia de la página de inicio como para el área estrecha de la barra lateral.

Concepto de implementación práctica.

Las subcuadrículas y las consultas de contenedores ya han alcanzado el soporte total en los principales navegadores modernos. Deshágase de la ruina causada por los puntos de interrupción en toda la pantalla y pase a un diseño CSS donde cada componente pueda valerse por sí solo.