SmolCSS

Create an intrinsically responsive grid layout, optionally using a CSS custom property to extend to variable contexts. Each column will resize at the same rate, and items will begin to break to a new row if the width reaches the --min value.

.smol-css-grid {
  --min: 15ch;
  --gap: 1rem;

  display: grid;
  grid-gap: var(--gap);
  /* min() with 100% prevents overflow
  in extra narrow spaces */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}

Create an intrinsically responsive grid layout, optionally using a CSS custom property to extend to variable contexts. Each column will resize at the same rate until reaching the --min width. At that point, the last item will break to a new row and fill any available space.

.smol-flexbox-grid {
  --min: 10ch;
  --gap: 1rem;

  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.smol-flexbox-grid > * {
  flex: 1 1 var(--min);
}

Put down the CSS centering jokes! This modern update is often the solution you're looking for to solve your centering woes.

.smol-centering {
  display: grid;
  place-content: center;
}

This modern CSS container recipe has three delicious ingredients: the min() function, the logical property margin-inline, and a custom property - --container-max - to make it flexible across infinite contexts.

Logical properties are writing mode-aware properties that can also serve as shorthand in some cases. Here, margin-inline is a shorthand for setting both margin-left and margin-right, and margin-inline has fairly good support. A PostCSS plugin is available if you're unable to upgrade quite yet for your audience.

Review the "Smol Flexible Unbreakable Boxes" for an explanation of min(),

.smol-container {
  width: min(100% - 3rem, var(--container-max, 60ch));
  margin-inline: auto;
}

Setup a flexible grid layout with collapsing outer columns for easy placement of "breakout" elements.

The first feature is the use of the [x-start]/[x-end] syntax to create named grid areas that span more than one column (also works for rows!). In this example, we create three columns where the grid area spans all three, and the content area is the center column.

Next, we've set the outer column widths to 1fr and those columns will collapse first to give the minmax() definition for the center column priority, meaning they will eventually compute to a width of 0. Important to note is that we're only setting row gap, otherwise any column gap would keep space propped open between the middle and outer columns. The minmax() definition is explained in the demo for the Smol Responsive Grid.

Finally, we assign everything that doesn't have the special .breakout class to the content named area, and the .breakout to the grid named area. Be sure to resize the demo to see the outer columns collapse to contain the breakout!

.smol-breakout-grid {
  --max-content-width: 50ch;
  --breakout-difference: 0.2;

  /*  Compute total allowed grid width to `--breakout-difference` 
      larger than content area  */
  --breakout-grid-width: calc(
      var(--max-content-width) +
      (var(--max-content-width) * var(--breakout-difference))
    );

  display: grid;
  grid-template-columns:
    [grid-start] 1fr 
    [content-start] minmax(
      min(100%, var(--max-content-width)),
      1fr
    )
    [content-end] 1fr 
    [grid-end];
  width: min(100% - 2rem, var(--breakout-grid-width));
  row-gap: 1rem;
  margin: 5vb auto;
}

.smol-breakout-grid > *:not(.breakout) {
  grid-column: content;
}

.smol-breakout-grid > .breakout {
  grid-column: grid;
}

This smol stacked layout is a grid feature that can often replace older techniques that relied on absolute positioning. It works by defining a single grid-template-area and then assigning all direct children to that grid-area. The children are then "stacked" and can take advantage of grid positioning, such as the centering technique in the demo.

At first glance you might not notice, but that's a video background in the demo. And all we had to do was set width: 100% to ensure it filled the grid area. Then, we make use of place-self on the h3 to center it. The rest is completely optional design styling!

Bonus features in this demo include defining the h3 size using clamp() for viewport relative sizing, and also using aspect-ratio to size the container to help reduce cumulative layout shift.

.smol-stack-layout {
  display: grid;
  grid-template-areas: "stack";
  /* Set within the HTML for the demo */
  aspect-ratio: var(--stack-aspect-ratio);
  background-color: #200070;
}

.smol-stack-layout > * {
  grid-area: stack;
}

.smol-stack-layout video {
  width: 100%;
}

.smol-stack-layout h3 {
  place-self: center;
  font-size: clamp(2.5rem, 5vw, 5rem);
  text-align: center;
  line-height: 1;
  font-style: italic;
  padding: 5vh 2vw;
}

.smol-stack-layout--video small {
  align-self: end;
  justify-self: start;
  padding: 0 0 0.25em 0.5em;
  opacity: 0.8;
  font-size: 0.8rem;
}

.smol-stack-layout h3,
.smol-stack-layout small {
  position: relative;
  color: #fff;
}