typestar

dashboard_layout.css en CSS

Un cascarón de app completo: áreas de grid, encabezado sticky, paneles con scroll, fallback responsivo.

/* Armazón de la app: header, sidebar, main, inspector. */
.app {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) 20rem;
  grid-template-rows: 3.5rem minmax(0, 1fr) 2rem;
  grid-template-areas:
    "header header    header"
    "side   main      aside"
    "status status    status";
  block-size: 100dvh;
}

.app > .app-header {
  grid-area: header;
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-inline: 1rem;
  border-block-end: 1px solid var(--surface, #14161c);
}

.app > .app-header .account {
  margin-inline-start: auto;
}

.app > .sidebar {
  grid-area: side;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.75rem;
}

.app > .workspace {
  grid-area: main;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.app > .workspace .pane {
  overflow: auto;
  scrollbar-gutter: stable;
  padding: 1rem;
}

.app > .inspector {
  grid-area: aside;
  overflow-y: auto;
  border-inline-start: 1px solid var(--surface, #14161c);
}

.app > .status-bar {
  grid-area: status;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1rem;
  font-variant-numeric: tabular-nums;
}

@media (width < 60rem) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "main"
      "status";
  }

  .app > .sidebar,
  .app > .inspector {
    display: none;
  }
}

Cómo funciona

  1. Las áreas con nombre describen el cascarón en un bloque legible.
  2. Cada panel hace scroll por su cuenta en vez de toda la página.
  3. Bajo el breakpoint, el grid colapsa a una sola columna.

Palabras clave y builtins usados aquí

El intento, en números

Líneas
78
Caracteres a escribir
1358
Tokens
299
Ritmo de tres estrellas
90 tpm

Al ritmo de tres estrellas de 90 tokens por minuto, este intento toma unos 199 segundos.

Escribe este fragmento

Paso 1 de 1 en Bis; paso 24 de 24 en Flexbox y grid.

← Anterior