Layout and grids

Layout is intentionally not part of EldanCSS. CSS Grid and Flexbox already express one- and two-dimensional layouts well, and a classless stylesheet should not force a page into a grid it does not need.

Use the patterns below as starting points. Keep layout on a parent element, and let articles, figures, forms, and navigation stay semantic.

Choosing a tool

• Use Flexbox when items flow along one axis: a toolbar, a row of actions, or a header.
• Use Grid when rows and columns both matter: a card collection, a page shell, or a sidebar layout.
• Use gap instead of margins between items. It keeps spacing out of the child elements.
• Use minmax(0, 1fr) for content columns so long code or tables cannot force the layout wider than its container.

Card grid

repeat(auto-fit, minmax(...)) creates as many columns as fit and collapses to one on narrow screens. The class lives in your own stylesheet; EldanCSS does not ship a grid.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-4);
}

.card-grid > * {
  min-width: 0;
  margin: 0;
}

<div class="card-grid">
  <article>...</article>
  <article>...</article>
  <article>...</article>
</div>

Sidebar layout

This is the same idea used by the documentation shell: a fixed-ish sidebar and a fluid content column. Collapse it in a media query when space runs out.

.sidebar-layout {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
  gap: clamp(var(--space-4), 4vw, var(--space-6));
  align-items: start;
}

.sidebar-layout ul {
  display: grid;
  gap: var(--space-1);
}

@media (max-width: 36rem) {
  .sidebar-layout {
    grid-template-columns: 1fr;
  }
}

<div class="sidebar-layout">
  <nav aria-label="Example sidebar">
    <ul>
      <li><a href="#" aria-current="page">Overview</a></li>
      <li><a href="#">Install</a></li>
      <li><a href="#">Tokens</a></li>
    </ul>
  </nav>
  <div>...</div>
</div>

Flex row

Use Flexbox for a single row that wraps. justify-content: space-between pushes the two ends apart without extra markup.

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.toolbar > * {
  margin: 0;
}

<div class="toolbar">
  <p>Three files changed.</p>
  <button type="button">Review changes</button>
</div>

What stays out of EldanCSS

There are no row, column, grid, or span classes to learn. Add layout rules to your own stylesheet when the document needs them, and keep EldanCSS focused on the elements themselves.