Compositions

Grid #

Grid comes in three flavours: Two-column, Three-column and Masonry layout.

Two-column layout #

The two-column layout positions grid items side-by-side when space permits, so that items proportionately share the available space.

Use the layout by adding data-layout="50-50" to any element with the .grid class applied.

/* Two column when space permits */
.grid[data-layout='50-50'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 50vw, 26rem);
}

Three-column layout #

The three-column layout positions grid items in three columns when space permits, so that items proportionately share the available space.

Use the layout by adding data-layout="33x3" to any element with the .grid class applied.

/* Three column when space permits */
.grid[data-layout='33x3'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 33vw, 18rem);
}

Masonry layout #

The masonry layout removes the extra gap often left between rows by grid items of varying size. Use the layout by applying data-rows="masonry" to any element with the .grid class applied.

/* Masonry layout (will work one day in all browsers) */
.grid[data-rows='masonry'] {
  grid-template-rows: masonry;
  align-items: start;
}

Cluster #

Cluster creates flex items which cluster inline, until space no longer permits. At this point, items begin to wrap and display in block. The width of an item is determined by its content.

This layout is handy for grouping elements like navigation links, breadcrumbs, tags, etc. Use it by adding the .cluster class to an element with nested children.

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-size-1));
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}

Repel #

Repel adds as much inline space as possibe between two grid items, so that 100% of the inline space has been filled. When space doesn’t permit, items will wrap, appearing as block elements.

Add the .repel class to site headers, site footers or anywhere you want to push two items away from each other.

Use data-nowrap to prevent items from wrapping when space no longer permits.

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
  gap: var(--gutter, var(--space-s-l));
}

.repel[data-nowrap] {
  flex-wrap: nowrap;
}

Sidebar #

Sidebar creates a classic sidebar layout, where two elements appear side-by-side, when space permits. The first of the two adjacent elements has a fixed width – the sidebar, itself – and the second takes up the rest of the available space.

To use Sidebar, add the .sidebar class to a parent element containing two child elements.

You can learn more about this composition in Every Layout.

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
}

.sidebar:not([data-direction]) > :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar:not([data-direction]) > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

Use the data-direction="rtl" exception to flip the orientation of the sidebar.

<div class="sidebar" data-direction="rtl">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

Use the data-variant="sticky" exception to create a sticky sidebar when space permits.

<div class="sidebar" data-variant="sticky">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

A good example of sidebar in use, and indeed the sticky exception, is here in navigation and content of the cu.css docs.

Reel #

Real creates a carousel-like layout, where items that exceed the available horizontal space become horizontally scrollable.

This is a useful pattern for browsing lots of similar content in a limited amount of vertical space. For example, when creating sausage links or image galleries.

To create a Reel, add the .reel class to a parent element containing any number of child elements.

<div class="reel">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
  </div>

Use the data-scroll="snap" attribute to apply CSS scroll snap to your reel items.

<div class="reel" data-scroll="snap">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
    <div>Item 11</div>
    <div>Item 12</div>
  </div>

Use the data-variant="img" attribute when creating a reel containing images. This ensures all images maintain their original aspect ratio. By default, the reel height is set to 50vh, however you can control the height of your reel by setting a custom value for --reel-height.

<div class="reel" data-variant="img" style="--reel-height: 60vh;">
  <img src="/img/josue-as-_nprTIIwSk4-unsplash.jpg" alt="" />
  <img src="/img/brian-mcgowan-HiftPDiIVTY-unsplash.jpg" alt="" />
  <img src="/img/christian-crocker-ShY6Jn6n9jQ-unsplash.jpeg" alt="" />
  <img src="/img/brian-mcgowan-3bETLGHcAUU-unsplash.jpg" alt="" />
  <img src="/img/chuck-givens-02AQdLh4gP4-unsplash.jpg" alt="" />
</div>

In the interest of keeping cu.css lightweight, Reel uses the native scrollbar. Should you wish to create a custom scrollbar, refer to Every Layout to learn more about what’s possible.

Switcher #

Switcher can be used to switch directly between a horizontal and vertical layout.

Useful where each item should be considered equal to one another. For example, when displaying content in a number list of steps or showing product benefits.

To create a Switcher, add the .switcher class to a parent element containing any number of child elements.

Switcher will display up to 4 items next to each other while horizontal space permits.

With more than 4 items, switcher will stack all items vertically.

Use --switcher-target-container-width to define how wide the container needs to be for items to sit inline.

Control the space between each item by setting a value for --gutter.

Set how items should align vertically using --switcher-vertical-alignment with any flexbox alignment value.

Frame #

Frame allows you to control the aspect ratio of a child element. Frame is mostly useful for cropping media (videos and images) to a desired aspect ratio.

By default, Frame uses an aspect ratio of 16/9, however you can change this by setting a value for --n, (the numerator, or n), which represents the width, and --d (the denominator, or d), which represents the height.

<div class="frame">
  <img src="/img/chuck-givens-02AQdLh4gP4-unsplash.jpg" alt="" />
</div>

<div class="frame" style="--n: 1; --d:1;">
  <img src="/img/chuck-givens-02AQdLh4gP4-unsplash.jpg" alt="" />
</div>