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;
}
.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: minmax(
      min(var(--sidebar-min), 100%),
      var(--sidebar-max)
    ) 1fr;
}

/** Pancake Stack */
.pancake-stack {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/** 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, 1fr);
}
.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, minmax(min(var(--min), 100%), 1fr));
}

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