Grid cell
The grid cell component defines how an item behaves across a 12-column grid, including responsive breakpoint variations.
The grid cell component (flix-grid__cell) is used inside flix-grid.
It supports:
col-spanvalues for all breakpoints;col-startvalues for all breakpoints;
The default column spans 1 column and starts at the first available column.
Modifiers
flix-grid__cell--col-span-{n}- Sets how many columns the item spans by default where `n` values are from `1` to `12`.
flix-grid__cell--col-start-{n}- Sets the starting column where `n` values are from `1` to `12`.
flix-grid__cell--col-span-{n}-{bp}- Sets responsive span values per breakpoint (`xs`, `sm`, `md`, `lg`, `xl`).
flix-grid__cell--col-start-{n}-{bp}- Sets responsive start values per breakpoint (`xs`, `sm`, `md`, `lg`, `xl`).
flix-grid__cell--align-self-startflix-grid__cell--align-self-centerflix-grid__cell--align-self-end- Aligns this single column on the cross axis: top/start, center, or bottom/end.
flix-grid__cell--justify-self-startflix-grid__cell--justify-self-centerflix-grid__cell--justify-self-end- Aligns this single column on the main axis: left/start, center, or right/end.
Column span
Use the --col-span-{n} modifier to control how many columns the item should span. Aka: the column width.
12
1
11
2
10
3
9
4
8
5
7
6
6
<div class="flix-grid flix-grid--with-row-gap">
<div class="flix-grid__cell flix-grid__cell--col-span-12" >
<div class="flix-box flix-box--small">
12
</div>
</div>
<div class="flix-grid__cell" >
<div class="flix-box flix-box--small">
1
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-11" >
<div class="flix-box flix-box--small">
11
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-2" >
<div class="flix-box flix-box--small">
2
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-10" >
<div class="flix-box flix-box--small">
10
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-3" >
<div class="flix-box flix-box--small">
3
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-9" >
<div class="flix-box flix-box--small">
9
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-4" >
<div class="flix-box flix-box--small">
4
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-8" >
<div class="flix-box flix-box--small">
8
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-5" >
<div class="flix-box flix-box--small">
5
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-7" >
<div class="flix-box flix-box--small">
7
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-6" >
<div class="flix-box flix-box--small">
6
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-6" >
<div class="flix-box flix-box--small">
6
</div>
</div>
</div>Note: col-span-1 is the CSS default and does not need a class.
Responsive column span
To make column span respond to different breakpoints, this modifier can also be used with a breakpoint suffix: --col-span-{n}-{bp} where the bp can be one of: xs, sm, md, lg, xl.
The breakpoints work on a mobile-first state, so they will be applied on any resolution smaller and including the breakpoints, this is translated on CSS as @media (min-width: {bp}).
So in a more realistic example, if we want to create responsive columns we could do it like so:
Article
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel sapien eget nunc gravida tincidunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
<div class="flix-grid flix-grid--with-row-gap">
<div class="flix-grid__cell flix-grid__cell--col-span-12 flix-grid__cell--col-span-4-sm flix-grid__cell--col-span-2-lg">
<nav class="flix-box">
<h3 class="flix-h3 flix-h3--section-header">Menu</h3>
<ul class="flix-nav-side">
<li class="flix-nav-side__item">
<a href="#" class="flix-nav-side__link">
<span class="flix-nav-side__text">Menu item</span>
</a>
</li>
<li class="flix-nav-side__item">
<a href="#" class="flix-nav-side__link">
<span class="flix-nav-side__text">Menu item</span>
</a>
</li>
<li class="flix-nav-side__item">
<a href="#" class="flix-nav-side__link">
<span class="flix-nav-side__text">Menu item</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-12 flix-grid__cell--col-span-8-sm flix-grid__cell--col-span-6-lg flix-grid__cell--col-span-8-xl">
<article class="flix-box">
<h3 class="flix-h3 flix-h3--section-header">Article</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel sapien eget nunc gravida tincidunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</article>
</div>
<aside class="flix-grid__cell flix-grid__cell--col-span-12 flix-grid__cell--col-span-4-lg flix-grid__cell--col-span-2-xl">
<div class="flix-img-box">
<div class="flix-img-box__img-wrapper">
<img class="flix-img-box__img" alt="Image box placeholder image" src="/img/img-placeholder-grey.png"/>
</div>
<div class="flix-img-box__content">
<h3 class="flix-h3">Sidebar</h3>
</div>
</div>
</aside>
</div>Column start
Use the --col-start-{n} modifier to manually set the column the item should start. In the legacy grid this was known as push classes.
By default the grid column will be placed on the first available column as long as it can fit in the available columns.
1
2
3
4
5
6
7
8
9
10
11
12
<div class="flix-grid flix-grid--with-row-gap">
<div class="flix-grid__cell flix-grid__cell--col-span-12">
<div class="flix-box flix-box--small">
1
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-11 flix-grid__cell--col-start-2">
<div class="flix-box flix-box--small">
2
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-10 flix-grid__cell--col-start-3">
<div class="flix-box flix-box--small">
3
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-9 flix-grid__cell--col-start-4">
<div class="flix-box flix-box--small">
4
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-8 flix-grid__cell--col-start-5">
<div class="flix-box flix-box--small">
5
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-7 flix-grid__cell--col-start-6">
<div class="flix-box flix-box--small">
6
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-6 flix-grid__cell--col-start-7">
<div class="flix-box flix-box--small">
7
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-5 flix-grid__cell--col-start-8">
<div class="flix-box flix-box--small">
8
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-4 flix-grid__cell--col-start-9">
<div class="flix-box flix-box--small">
9
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-3 flix-grid__cell--col-start-10">
<div class="flix-box flix-box--small">
10
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-2 flix-grid__cell--col-start-11">
<div class="flix-box flix-box--small">
11
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-start-12">
<div class="flix-box flix-box--small">
12
</div>
</div>
</div>Responsive column start
Col-start modifier classes also have breakpoint specific versions identical to the column span explained above: --col-start-{n}-{bp} where the bp can be one of: xs, sm, md, lg, xl.
This col shifts right as the screen size increases.
<div class="flix-grid flix-grid--with-row-gap">
<div class="flix-grid__cell flix-grid__cell--col-span-2 flix-grid__cell--col-start-2-xs flix-grid__cell--col-start-4-sm flix-grid__cell--col-start-6-md flix-grid__cell--col-start-8-lg flix-grid__cell--col-start-10-xl">
<div class="flix-box flix-box--small">
This col shifts right as the screen size increases.
</div>
</div>
</div>Align variations
Use --align-self-{start|center|end} to align an individual item on the cross axis: top/start, center, or bottom/end.
start
center
end
<div class="flix-grid flix-grid--with-row-gap" style="min-height: 150px; background-color: var(--flix-highlight-color); outline: var(--flix-ui-primary-color) 1px dashed;">
<div class="flix-grid__cell flix-grid__cell--col-span-3 flix-grid__cell--align-self-start" >
<div class="flix-box flix-box--small">
start
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-3 flix-grid__cell--align-self-center" >
<div class="flix-box flix-box--small">
center
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-3 flix-grid__cell--align-self-end" >
<div class="flix-box flix-box--small">
end
</div>
</div>
</div>Justify variations
Use --justify-self-{start|center|end} modifier to position an individual items along the main axis: left/start, center, or right/end.
start
center
end
<div class="flix-grid flix-grid--with-row-gap" style="background-color: var(--flix-highlight-color); outline: var(--flix-ui-primary-color) 1px dashed;">
<div class="flix-grid__cell flix-grid__cell--col-span-3 flix-grid__cell--justify-self-start" >
<div class="flix-box flix-box--small" >
start
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-3 flix-grid__cell--justify-self-center" >
<div class="flix-box flix-box--small" >
center
</div>
</div>
<div class="flix-grid__cell flix-grid__cell--col-span-3 flix-grid__cell--justify-self-end" >
<div class="flix-box flix-box--small" >
end
</div>
</div>
</div>