Split Child Utility

Our split-child utility is constructed as follows:

.split-child {
  display: flex;
  align-items: var(--split-child-align, stretch);
  gap: var(--split-child-space, 1rem);
  flex-wrap: wrap;
}

.split-child > * {
  min-width: var(--split-child-min-width, 18rem);
  flex: 1;
}

Purpose

The split child utility is a small utility to create a side-by-side layout that stacks at a specific breakpoint. Similar to our auto-grid utility, it allows us to control columns within a horizontal access. It uses flex instead of grid to give us various size of columns, for example one column that's 25% and one that fills the rest of the space. It also creates a gap that remains consistent both horizontally and vertically as the layout stacks.

Example

<article class="[ article ] [ split-child ]">
  <div class="article__body"></div>
  <div class="article__sidebar"></div>
</article>

.article {
  --split-child-space: 2rem;
  --split-child-align: center;
}