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;


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.


<article class="[ article ] [ split-child ]">
<div class="article__body"></div>
<div class="article__sidebar"></div>
.article {
--split-child-space: 2rem;
--split-child-align: center;