One Line Layouts

One Line Layouts

Check out the video: One Line Layouts

one-line-layouts.css

/** 10 Single line CSS layouts
 * https://web.dev/articles/one-line-layouts
 * by Una Kravets
 * https://1linelayouts.glitch.me
 */

/** Super Centered */
.super-centered {
  display: grid;
  place-items: center;
}

/** Deconstructed Pancake */
.container {
  display: flex;
  flex-wrap: wrap;
}

.child {
  --width: 150px;

  /* Children will not stretch */
  flex: 0 1 var(--width, 150px);

  /* Children will stretch */

  /* flex: 1 1 var(--width, 150px); */
}

/** Sidebar Says */
.sidebar {
  --sidebar-min: 25ch;
  --sidebar-max: 25%;

  display: grid;
  grid-template-columns:
    [sidebar-start] minmax(min(var(--sidebar-min), 100%), var(--sidebar-max))
    [sidebar-end content-start] 1fr
    [content-end];
}

/** Pancake Stack */
.pancake-stack {
  display: grid;
  grid-template-rows: [header-start] auto [header-end main-start] 1fr [main-end footer-start] auto [footer-end];
}

/** Classic Holy Grail Layout */
.holy-grail {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

/** 12-Span Grid */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr [col-end]);
}

.child-full-with {
  grid-column: 1 / -1;
}

/** RAM (Repeat, Auto, MinMax) */
.ram {
  --min: 30ch;
  --gap: 1rem;

  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(
    auto-fit,
    [col-start] minmax(min(var(--min), 100%), 1fr) [col-end]
  );
}

/** Line Up */
.line-up {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/** Clamping My Style */
.clamp-my-style {
  inline-size: clamp(20ch, 60%, 60ch);
}

/** Respect for Aspect */
.video {
  aspect-ratio: 16 / 9;
}