.row.row-spaced.row-gap.w100.col.c-1 to .c-12.offset-c-1 to .offset-c-11.lauto.rauto.uc-1 to .uc-12.ucol.md-1 to .md-12.lg-1 to .lg-12.offset-md-1 to .offset-md-11.offset-lg-1 to .offset-lg-11.umd-1 to .umd-12.ulg-1 to .ulg-12.grid.g-1 to .g-11.gmd-1 to .gmd-11.glg-1 to .glg-11.grid.spacedout.g-bthin.g-bthin-dark.h-1 to .h-6.uh-1 to .uh-6.hm-1 to .hm-6.uhm-1 to .uhm-6@wrapper, set by default to 12.<div class="row">
<div class="c-1">c-1</div>
<div class="c-11">c-11</div>
<div class="c-2">c-2</div>
<div class="c-10">c-10</div>
<div class="c-3">c-3</div>
<div class="c-9">c-9</div>
<div class="c-4">c-4</div>
<div class="c-8">c-8</div>
<div class="c-5">c-5</div>
<div class="c-7">c-7</div>
<div class="c-6">c-6</div>
<div class="c-6">c-6</div>
</div><div class="row">
<div class="offset-c-11">offset-c-11</div>
<div class="offset-c-10">offset-c-10</div>
<div class="offset-c-9">offset-c-9</div>
<div class="offset-c-8">offset-c-8</div>
<div class="offset-c-7">offset-c-7</div>
<div class="offset-c-6">offset-c-6</div>
<div class="offset-c-5">offset-c-5</div>
<div class="offset-c-4">offset-c-4</div>
<div class="offset-c-3">offset-c-3</div>
<div class="offset-c-2">offset-c-2</div>
<div class="offset-c-1">offset-c-1</div>
</div>
All elements in a row will stack horizontally with .row
Replace with .row-spaced to apply: justify-content:
space-between.
On a 12-column grid, adding c-x for the number of columns, places
content in x of @wrapper segments (default 12) of the total width. (This is
similar to Bootstrap). This also accounts for margins around boxes of @gutterspace
<div class="row-spaced">
<div class="c-5">c-5</div>
<div class="c-4">c-4</div>
<div class="c-3">c-2</div>
</div>The element with .lauto has margin left set to auto.
<div class="row">
<div class="c-5">c-5</div>
<div class="c-3 lauto">c-3 lauto</div>
<div class="c-1">c-1</div>
</div>
<div class="row">
<div class="c-1">c-1</div>
<div class="c-5 rauto">c-5 rauto</div>
<div class="c-3">c-3</div>
</div>To break free from a grid, add an element with .w100, this sets width to
100%.
<div class="row">
<div>auto</div>
<div>auto</div>
<div class="w100"></div>
<div>auto</div>
<div>auto</div>
</div>Rows may apply to ul, will carry forward column definition to li's of the same value. The class names are
.uc-1 to .uc-12
<ul class="uc-3 row">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul><ul class="uc-2 row-spaced">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>Row breaker, same rule applies .w100 to the li element, breaks the
flex grid.
<ul class="uc-1 row">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li class="w100">breaker .w100</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul><div class="row-spaced">
<div class="col md-6 box box-white-normal">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis quos, reiciendis
laborum nam praesentium non libero tempore quam saepe a eos hic placeat quidem ex
dignissimos, ut porro sapiente eum?
</div>
<div class="col md-6 box box-green">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, consectetur facere
quasi culpa quae enim delectus in molestiae iure, est quo sit. Ducimus repudiandae minus
eos sunt obcaecati quae architecto.
</div>
</div>
A simpler way to produce two columns of content, using css grid, depending on flat HTML elements.
Alternating.
The first column is defined by g-n (n is 1 to @wrapper by default 12) and the
second one is an auto width.
<div class="grid g-3">
<h5>g-3</h5>
<div>the auto column</div>
<h5>g-3</h5>
<div>the auto column</div>
<h5>g-3</h5>
<div>the auto column</div>
</div>Following are extra classes added to the main .grid element for extra styles.
.grid.spacedout
Adds a gap in grid
.g-bthin
Adds thin border below grid elements
.g-bthin-dark
Adds thin dark border below grid elements
.w100
Width 100%. Important
.row-gap
Adds a gap of @gutterspace
Grid styles apply on smallest screen, if you want the grid to apply to larger screens, the framework
defines two stops out of the box .md, and .lg,
for flex grid, and .gmd, and .glg for css
grid. As follows.
Assign .col to every element,
to give it full width in smaller screens. .ucol for ul elements.
<div class="row">
<div class="col c-5">col c-5</div>
<div class="col md-4">col md-4</div>
<div class="col lg-3">col lg-3</div>
</div><div class="row">
<div class="offset-c-2 c-2 col">offset-c-5</div>
<div class="offset-md-2 c-2 col">offset-md-2</div>
<div class="offset-lg-2 c-2 col">offset-lg-2</div>
</div><ul class="row umd-3 ucol">
<li>Item umd-3</li>
<li>Item umd-3</li>
<li>Item umd-3</li>
<li>Item umd-3</li>
</ul><ul class="row ulg-3 ucol">
<li>Item ulg-3</li>
<li>Item ulg-3</li>
<li>Item ulg-3</li>
<li>Item ulg-3</li>
</ul><div class="grid gmd-4 spacedout">
<strong>.gmd-4</strong>
<span>Grid</span>
<strong>.gmd-4</strong>
<span>Grid</span>
</div>Now that container queries are supported by major browsers, Shut uses the same screen stubs as container queries,
for the grid system. Apply .row-c to the container (the row wrapper), then use
a the prefix c* to the same grid classes above. Here is how.
<div class="row row-c">
<div class="col cc-5">col cc-5</div>
<div class="col cmd-4">col cmd-4</div>
<div class="col clg-3">col clg-3</div>
</div>If the same row is contained in a tighter section (for example .c-6), the container query kicks in relative to the new wrapping section.
<div class="c-6">
<div class="row row-c">
<div class="col cc-5">col cc-5</div>
<div class="col cmd-4">col cmd-4</div>
<div class="col clg-3">col clg-3</div>
</div>
</div>Want more? Use the following function in LessCss to generate new grids.
/* generate media query for min-width set to xl (1200px) */
.media(xl, {
/* generates .offset-xl-c1 to .offset-xl-c11 */
.generate-offset(11, xl);
/* generates .xl-1 to .xl-12,
and .uxl-1 > li to .uxl-12 > li */
.generate-column(12, xl);
/* generats .gxl-1 to .gxl-11 with grid template */
.generate-grid(11, gxl);
/* generates .row-spaced > .xl-1 to .row-spaced > .xl-12
and .row-spaced > .uxl-1 to .row-spaced > .uxl-12
with slightly smaller percentages to accomodate for spacing */
.row-spaced {
.generate-spaced-column(12, xl);
}
});
/* the following generates width: 37.5% (4.5 / @wrapper * 100) */
.myc-4-lookalike {
.columns(4.5);
}
/* the following generates width: calc(37.5% - 10px); */
.myc-4-lookalike-off {
.columns(4.5, 10px);
}
/* or redefine the grid column to something from .c-1 to .c-15
by modifying the global variable */
@wrapper: 15;
Minimum height
The heights are multiples of @grid-column-height.
For max-height replace h- with
hm-
<ul class="row-spaced uc-2">
<li><div class="h-1">h-1</div></li>
<li><div class="h-2">h-2</div></li>
<li><div class="h-3">h-3</div></li>
<li><div class="h-4">h-4</div></li>
<li><div class="h-5">h-5</div></li>
<li><div class="h-6">h-6</div></li>
</ul>List minimum height
For max-height replace uh- with
uhm-
<ul class="row-spaced uc-2 uh-4">
<li>uh-4</li>
<li>uh-4</li>
<li>uh-4</li>
<li>uh-4</li>
<li>uh-4</li>
<li>uh-4</li>
</ul>The framework provides .h-1 to .h-6, you can generate more heights using the following
LESS functions:
/* generate .h-7 to .h-12, .uh-7 to .uh-12 with min-height */
.generate-min-heights(7, 12);
/* generate .hm-7 to .hm-12, .uhm-7 to .uhm-12 with max-height */
.generate-max-heights(7, 12);