typestar

dashboard_layout.css in CSS

A full app shell: grid areas, sticky header, scrolling panes, responsive fallback.

/* App shell: 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;
  }
}

How it works

  1. Named areas describe the shell in one readable block.
  2. Each pane scrolls on its own instead of the whole page.
  3. Below the breakpoint the grid collapses to a single column.

Keywords and builtins used here

The run, in numbers

Lines
78
Characters to type
1350
Tokens
299
Three-star pace
90 tpm

At the three-star pace of 90 tokens a minute, this run takes about 199 seconds.

Type this snippet

Step 1 of 1 in Encore, step 24 of 24 in Flexbox & grid.

← Previous