Grid
Our grid is almost the same as Bootstrap's so it's easier to understand and use.
Properties
- 12 columns
- 30px gutter
If you build a full page layout with our grid, you have to wrap the page into an e-container.
| Last update: | () |
| Message | doc(search): new tags and hidden components --skip-ci |
| Committer: | Tamás Bíró |
| Version history | |
Default
Copy Jade
Copy HTML
Show code
Hide code
<div class="doc-grid">
<div class="e-row">
<div class="e-col-1">
1
</div>
<div class="e-col-1">
2
</div>
<div class="e-col-1">
3
</div>
<div class="e-col-1">
4
</div>
<div class="e-col-1">
5
</div>
<div class="e-col-1">
6
</div>
<div class="e-col-1">
7
</div>
<div class="e-col-1">
8
</div>
<div class="e-col-1">
9
</div>
<div class="e-col-1">
10
</div>
<div class="e-col-1">
11
</div>
<div class="e-col-1">
12
</div>
</div>
<div class="e-row">
<div class="e-col-6">
.e-col-6
</div>
<div class="e-col-6">
.e-col-6
</div>
</div>
<div class="e-row">
<div class="e-col-12 e-col-large-6">
.e-col-12 .e-col-large-6
</div>
<div class="e-col-12 e-col-large-6">
.e-col-12 .e-col-large-6
</div>
</div>
<div class="e-row">
<div class="e-col-12">
<div class="e-row">
<div class="e-col-3">
1
</div>
<div class="e-col-3">
2
</div>
<div class="e-col-3">
3
</div>
<div class="e-col-3">
4
</div>
</div>
</div>
</div>
</div>
<div class="doc-grid">
<!-- 12 grid-->
<div class="e-row">
<div class="e-col-1">1</div>
<div class="e-col-1">2</div>
<div class="e-col-1">3</div>
<div class="e-col-1">4</div>
<div class="e-col-1">5</div>
<div class="e-col-1">6</div>
<div class="e-col-1">7</div>
<div class="e-col-1">8</div>
<div class="e-col-1">9</div>
<div class="e-col-1">10</div>
<div class="e-col-1">11</div>
<div class="e-col-1">12</div>
</div>
<div class="e-row">
<div class="e-col-6">.e-col-6</div>
<div class="e-col-6">.e-col-6</div>
</div>
<!-- Resposive grid-->
<div class="e-row">
<div class="e-col-12 e-col-large-6">.e-col-12 .e-col-large-6</div>
<div class="e-col-12 e-col-large-6">.e-col-12 .e-col-large-6</div>
</div>
<div class="e-row">
<div class="e-col-12">
<div class="e-row">
<div class="e-col-3">1</div>
<div class="e-col-3">2</div>
<div class="e-col-3">3</div>
<div class="e-col-3">4</div>
</div>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
.e-col-6
.e-col-6
.e-col-12 .e-col-large-6
.e-col-12 .e-col-large-6
1
2
3
4
Variations
Condensed
Copy Jade
Copy HTML
Show code
Hide code
e-col-condensed
<div class="e-row">
<div class="e-row__height">
<div class="e-col-6 e-col-condensed">
Ut voluptate, magna, dolor occaecat laboris reprehenderit mollit. Dolor non esse ad. Reprehenderit laboris aliqua laboris anim pariatur et? Fugiat nulla nisi, consectetur occaecat, nisi minim, labore lorem. Culpa cupidatat qui. Aliquip anim anim enim duis, pariatur, commodo. Nisi, non lorem reprehenderit cillum mollit et exercitation est. Laborum consequat, nostrud dolor ex ut enim? Ut sint tempor in deserunt proident elit, voluptate mollit officia. Ad officia excepteur non labore qui consectetur, dolor occaecat veniam, fugiat.
</div>
<div class="e-col-6 e-col-condensed">
Tempor ea id velit anim, dolore sed commodo qui, do commodo ipsum sunt velit laboris? Ut esse, laboris consequat, ex non esse commodo officia, laboris laboris minim, magna. Veniam lorem proident lorem velit dolore. Ut, reprehenderit commodo voluptate, nostrud labore, aute, commodo veniam. Ea nostrud consectetur pariatur dolor voluptate, non? Quis, duis adipiscing in, ad veniam id dolor magna quis in velit, minim in. Tempor, tempor elit irure, qui, quis pariatur laborum eu, excepteur excepteur culpa. Occaecat enim ullamco consequat est, enim nulla ut nisi amet, tempor veniam amet. Esse id irure in nulla labore incididunt, culpa sunt deserunt. Adipiscing commodo aliquip ea, elit aliqua elit dolore, sit minim sed sint.
</div>
</div>
</div>
<div class="e-row">
<div class="e-row__height">
<div class="e-col-6 e-col-condensed">Non duis excepteur, duis in duis, non anim proident lorem qui sint? Incididunt, non fugiat sed pariatur enim, nulla culpa consectetur dolore non, ipsum dolore? Proident aliqua in laborum quis reprehenderit, aute, incididunt laborum. Incididunt ex deserunt in, nostrud id amet proident? Officia ut, ullamco in reprehenderit adipiscing anim ea irure? Ea cillum exercitation ea ea aute minim ut ad magna mollit incididunt. Labore exercitation, non, eu veniam aliquip ullamco mollit, amet ut. Velit ut pariatur sunt amet enim. Irure pariatur irure est esse esse in qui aliqua enim consequat. Quis velit ea, deserunt in, elit voluptate exercitation enim lorem dolore.
</div>
<div class="e-col-6 e-col-condensed">Veniam occaecat, sint, qui, labore laboris anim cupidatat aliqua veniam amet et dolore. Qui irure aute, sint eu ut veniam ea occaecat exercitation reprehenderit, in. Nisi, cupidatat sed dolor cupidatat cupidatat nulla? In qui ullamco sint, ut aliquip fugiat. Dolor eiusmod irure officia ut tempor. Duis deserunt qui consequat mollit mollit aute magna consectetur laborum anim. Ut reprehenderit, voluptate dolor, velit duis, dolor elit ut dolor enim. Qui, occaecat et dolor sint consequat irure esse. Do, culpa proident nisi dolor, exercitation, ut? Culpa ipsum cillum elit, occaecat exercitation occaecat dolore, laborum sit.
</div>
</div>
</div>
Voluptate fugiat ut, officia consectetur incididunt in aliquip cupidatat ex, ullamco, consequat excepteur eiusmod. Minim sunt adipiscing tempor amet culpa, minim tempor? Deserunt veniam, consequat sed consectetur consectetur adipiscing sunt ut enim, laborum in, tempor. Reprehenderit, dolore sed et culpa, est eu. Dolor eiusmod, laboris, adipiscing laboris sed excepteur quis esse amet. Duis, nulla reprehenderit sed commodo incididunt et. Enim, enim occaecat amet excepteur tempor fugiat do magna ea pariatur ut aliquip mollit? Mollit elit ut irure, nisi, est qui ex ex nisi elit adipiscing. Eu nisi commodo reprehenderit commodo non culpa in proident? Incididunt non cupidatat, eiusmod sit?
Incididunt mollit cupidatat, dolore sit, ad ut sunt, magna, adipiscing id aute ea exercitation quis est? Occaecat ut eu nisi, in lorem id nisi officia sit est excepteur, deserunt in consequat. Nisi, ut ut, sint laboris culpa, dolor eiusmod. Dolore duis est, elit nisi, aliqua cupidatat, officia. Ullamco deserunt ex, enim et duis ut elit id ipsum ex culpa. Amet occaecat mollit adipiscing voluptate nisi amet eu est occaecat mollit quis culpa consectetur, pariatur. Nulla ut incididunt ut nostrud sint ut? In elit culpa, velit non ut est aliqua in. Minim est, id incididunt sit, dolor sint non, lorem nostrud esse cupidatat adipiscing cillum. Dolore aute nulla ipsum, consequat ex sed, ex ea ex.
Without padding
Copy Jade
Copy HTML
Show code
Hide code
e-col-nopadding
<div class="e-row">
<div class="e-row__height">
<div class="e-col-6 e-col-height">
Cupidatat, qui non eu excepteur, cillum ex cupidatat, sint. Ut dolor, ex, commodo, nulla, amet id officia aliquip exercitation in occaecat. Dolore, dolore, sit, incididunt, mollit mollit commodo eiusmod ex? Amet anim, et sint proident, veniam nostrud. In excepteur mollit magna ut dolore non officia lorem dolore. Consectetur esse velit nisi ut duis labore in? Esse voluptate reprehenderit anim ut ullamco nostrud in sint sit, fugiat. Excepteur minim esse id, id in, deserunt nostrud labore eu. Sint veniam, tempor eu veniam dolor mollit pariatur. Commodo, voluptate irure ullamco eu anim, dolore laborum, lorem voluptate, in.
</div>
<div class="e-col-6 e-col-height e-col-nopadding">
Do tempor, aute nulla veniam, eiusmod enim sint duis consectetur excepteur. Nulla eiusmod nisi aliquip et mollit in aliqua consectetur, consequat, duis. Commodo, commodo mollit enim excepteur dolore minim, in dolore, do, nostrud consectetur, excepteur sed eiusmod.
</div>
</div>
</div>
<div class="e-row">
<div class="e-row__height">
<div class="e-col-6 e-col-height">Sunt eiusmod fugiat veniam laborum qui culpa qui eiusmod, proident, quis eiusmod, non? Consequat esse dolor, qui culpa? Ipsum dolore dolor, in qui consectetur officia est, magna dolor dolore duis pariatur mollit fugiat ea. Nisi ut sit qui minim dolor ex in dolor ea sint exercitation do. Anim occaecat velit ipsum nisi nulla lorem ut. Incididunt ea commodo nostrud cillum ad. Cillum magna ipsum, excepteur proident eiusmod id ad cupidatat, elit, ea veniam? Dolore duis, occaecat aliquip, commodo. Ullamco adipiscing magna do cupidatat, sed, et mollit, in sed, in in, ipsum? Labore ullamco, ullamco in.
</div>
<div class="e-col-6 e-col-height e-col-nopadding">Dolor occaecat nostrud ipsum ex, dolor sed ex anim pariatur. Incididunt lorem eu sunt, ut lorem, et. Ea qui, exercitation culpa, ut in sunt quis, voluptate commodo tempor lorem eiusmod dolore.
</div>
</div>
</div>
Tempor incididunt in, ut adipiscing mollit elit. Elit sunt eiusmod, in, est in. Adipiscing est et, eiusmod laboris pariatur, aliquip ea, velit laboris. Exercitation quis nisi veniam et ut consectetur ipsum dolore. Esse duis tempor, dolore enim commodo sunt lorem. Sunt reprehenderit lorem occaecat deserunt dolore, sed ut, aute? Nulla fugiat nulla excepteur occaecat ullamco commodo lorem adipiscing. Et laborum ullamco in, incididunt in sed ut. Ea eu ullamco, irure, dolore ullamco esse sit in incididunt dolore. Occaecat, irure sunt ut eu aliquip.
Cupidatat cillum, amet eu dolore enim laborum. Laboris, elit eiusmod ipsum do, quis aliqua, laboris dolor culpa elit laboris. Sunt est duis id eiusmod.
Even
Copy Jade
Copy HTML
Show code
Hide code
e-col-even
<div class="e-row">
<div class="e-row__height">
<div class="e-col-6 e-col-even">
Occaecat aliquip enim esse ut irure dolor, esse, non mollit ex. Veniam consequat, non non, ut, pariatur est. Cupidatat cupidatat, consectetur mollit nulla cupidatat enim, cillum dolor ex minim culpa. Deserunt anim cupidatat, sed labore anim enim in fugiat? Excepteur proident aute velit dolore. Veniam dolor, voluptate id aliquip. Ut excepteur duis, sunt occaecat dolore est aliqua, lorem, aliqua, eiusmod do occaecat. Minim magna, tempor in amet? Aliquip, quis sint pariatur id est in in ut, in elit culpa. Id consequat sed incididunt in aliqua consectetur amet, qui.
</div>
<div class="e-col-6 e-col-even">
Anim, deserunt excepteur, pariatur excepteur, non, sit deserunt id ut in amet est laboris labore duis officia. Id ad deserunt sit irure. Lorem aute voluptate ut dolore cillum deserunt dolor amet ut enim. Cupidatat incididunt proident consectetur officia cupidatat tempor. Laborum ut, voluptate veniam elit, id sunt nostrud reprehenderit aliquip, amet in. Deserunt ad ut in dolore commodo nisi dolore dolor. Quis ea sint deserunt anim sed laborum? Eu id consectetur, do, minim qui est in, deserunt sint ad. Aute proident veniam dolore incididunt. Ea ea laboris dolor, culpa nisi ut ut sed, aliquip dolor.
</div>
</div>
</div>
<div class="e-row">
<div class="e-row__height">
<div class="e-col-6 e-col-even">Exercitation enim culpa laborum, pariatur pariatur. Non excepteur, ipsum, adipiscing ad, ipsum, laborum, aliquip eiusmod, in ipsum, nostrud. Lorem tempor est velit incididunt ea, ea nisi, qui in aute. Nisi sed anim eu, culpa cillum consectetur, in quis eiusmod, laborum. Veniam occaecat nisi lorem minim pariatur in non in, pariatur, do. Ipsum, cupidatat, nostrud elit? Et, cillum incididunt fugiat irure officia sed aliquip ea dolore? Duis, aliquip id aliquip in minim qui nisi exercitation mollit id voluptate in commodo. Officia ad duis dolor consequat voluptate in, nisi. Incididunt id laboris est magna aute elit sit amet.
</div>
<div class="e-col-6 e-col-even">Nisi, excepteur in laborum ullamco tempor nisi, irure anim. Dolore, dolore dolore incididunt ex laborum in, sunt excepteur? Culpa, commodo pariatur labore ut, voluptate, ullamco in fugiat, aute, ullamco adipiscing ut. Sit, aliqua veniam, ut est labore, officia, ut sint. Elit duis id, eu consectetur, dolor dolor ut commodo commodo. Excepteur mollit cupidatat, non voluptate eu irure duis exercitation, cupidatat. Pariatur laboris, anim do in anim enim. Nulla ad aliquip incididunt in eiusmod, aliquip, eiusmod incididunt ut culpa in. Labore proident, aliquip lorem, aliqua cupidatat. Ullamco dolore minim fugiat incididunt occaecat est.
</div>
</div>
</div>
Id deserunt, est ad in anim dolor amet, officia aliquip elit? Adipiscing exercitation pariatur incididunt, in do, nulla ea veniam ut id et, eu. Pariatur ad voluptate velit voluptate. Nisi tempor, amet incididunt, anim nostrud sit? Non esse nostrud, laborum commodo est veniam consequat. Quis, in aute commodo ut consectetur ea, duis, occaecat. Officia ad commodo, consectetur voluptate, ullamco. Eiusmod, duis, excepteur aute. Lorem in, proident ad nisi elit consequat minim officia velit aliquip eu magna. Qui, ut nostrud, pariatur velit sed et consequat in.
Aliquip in, nulla duis est, in aliquip. Sed id cillum officia enim culpa amet, ut pariatur ut. Ut irure, ipsum laboris sit ad proident laborum sunt ex in? Laborum velit dolore enim lorem adipiscing dolore cillum do. Incididunt pariatur excepteur reprehenderit, veniam, sint cupidatat, eu exercitation elit, ad. Sed consectetur ut, quis, aute minim ut aliquip dolore qui. Culpa, veniam in aliqua, exercitation enim reprehenderit consequat sed culpa magna ut. Pariatur ut velit ut, in laboris. Et deserunt, excepteur sint, in do eu esse? Id esse ex proident anim sint ea reprehenderit in.
Grid with separators
Half separator
Copy Jade
Copy HTML
Show code
Hide code
with e-col__separator
<div class="e-row">
<div class="e-col-6">
Enim ut est amet, veniam sit, esse esse adipiscing? Anim, aliqua elit in cillum aliquip ea, ipsum magna dolor non, dolor aute. Ullamco consectetur, elit laborum excepteur qui, tempor, enim reprehenderit magna. Irure, lorem, excepteur, ullamco proident, cupidatat aliqua. Velit minim laborum anim sunt, id elit laboris in reprehenderit eu. Cillum est, duis in sed, anim labore, ullamco occaecat. Elit commodo elit dolor anim officia eu ipsum? Incididunt, do eiusmod eiusmod ea exercitation consequat. Veniam exercitation in cillum amet fugiat id id aute, dolor. Sint nisi, officia in, lorem.
</div>
<div class="e-col-6">
Laborum irure anim cillum sed ut dolor aliqua, laborum in. Nisi incididunt irure officia reprehenderit dolor sint. Consequat magna, tempor pariatur laboris adipiscing quis ut consequat aliqua nisi. Ipsum, proident eu tempor, ut, ut eu non sit in? In, eiusmod exercitation laborum dolor ipsum in ad, do, ipsum. Ut deserunt incididunt sit, non veniam, aliquip ea, culpa irure, ullamco dolor. Ut, anim excepteur sunt nisi labore consectetur ullamco. Nulla elit sint, dolor incididunt, excepteur sed ut adipiscing irure. Ullamco incididunt amet officia incididunt veniam anim nostrud nostrud incididunt consequat adipiscing est. Tempor elit, fugiat deserunt, dolore mollit in consectetur reprehenderit, sit ipsum occaecat eu, dolore.
</div>
<div class="e-col e-col__separator"></div></div>
<div class="e-row">
<div class="e-col-6">Sit dolore culpa, dolore ut, cupidatat proident proident in. Nisi voluptate nostrud veniam incididunt deserunt cupidatat, in incididunt. Sit, tempor in commodo amet aute aliquip nostrud lorem, ullamco, voluptate ex. Ad laboris deserunt id, nostrud quis, minim culpa quis cupidatat, cupidatat. Proident sit mollit dolor, ea nisi do ut, proident, et ea. Duis dolor aliqua ut dolore incididunt id ut? In, cillum amet consequat ea in aliqua, ex, ad? Do pariatur nisi aliqua consectetur dolor lorem dolore amet laboris cupidatat? Cupidatat ea in deserunt id ut, commodo, deserunt anim. Non, aliqua ex ex sed eu in dolor exercitation est reprehenderit, in?
</div>
<div class="e-col-6">Aute, laborum minim exercitation laboris, incididunt anim id anim ullamco sint? Ut minim, adipiscing, officia reprehenderit, et, consectetur aute mollit ex ut. Ipsum adipiscing elit exercitation, non cillum eiusmod ex sunt, dolor do. Et deserunt elit cillum, do quis eu nulla ut fugiat. Laboris, fugiat veniam magna commodo, exercitation incididunt, do sint aliqua. Laborum sed anim non, velit, commodo ea et in, in sint anim? Ad ut ut commodo veniam in duis culpa lorem et. Ut qui consectetur sed ea, duis minim ad voluptate? Proident aliquip, qui qui do magna non pariatur cillum. Qui elit occaecat, nostrud eu dolore, culpa excepteur lorem, esse aliqua ut do, mollit adipiscing.
</div>
<div class="e-col e-col__separator"></div>
</div>
Ut, reprehenderit pariatur reprehenderit dolor in dolore labore esse, quis do dolor. Sunt, veniam et veniam deserunt in quis esse adipiscing. Excepteur ut dolore, irure? Voluptate dolor ad, laboris sint non sit tempor. Laboris, sunt labore excepteur tempor elit est. Officia consectetur reprehenderit laborum velit fugiat magna pariatur tempor. Quis, est id sint culpa amet? Cillum fugiat id do, ut, irure. Ea, ipsum sint dolor amet, eu nisi cupidatat, esse anim ex elit. Anim qui voluptate consequat ut eu sed.
Ut, culpa ea, veniam, cillum sed adipiscing ex commodo. Est nulla, reprehenderit mollit occaecat. Ut velit fugiat ex mollit exercitation, aliqua nulla elit, et aliquip irure nulla. Dolor occaecat officia quis in eu proident, aliquip id ut? Laborum exercitation irure veniam in dolor, exercitation. Nostrud tempor ex occaecat culpa, in labore? Nostrud pariatur commodo reprehenderit ad pariatur ut, velit enim excepteur mollit adipiscing dolore. Ut, ut, ex culpa ut aute in proident elit dolore et sed. Reprehenderit id velit sed in non, magna ut esse velit, aute. Anim irure eu velit ex aute in sint dolor anim, in officia elit, consectetur.
Half separator fullheight
Copy Jade
Copy HTML
Show code
Hide code
with e-col__separator-fullheight
<div class="e-row">
<div class="e-col-6">
Dolore ipsum duis consectetur aliqua nulla labore minim, incididunt cupidatat commodo sunt? Cupidatat cillum dolore ad quis, est incididunt ad in adipiscing veniam. Aliqua ad laborum sunt ea, id ullamco, ut do dolore, velit, culpa. Ex fugiat nisi sint aliquip exercitation nulla irure, reprehenderit, id. Consequat fugiat ex sed dolore. Nostrud do duis dolore officia non incididunt, excepteur, aliquip dolor qui dolore. Consequat enim est adipiscing eu incididunt incididunt elit est sit. Non, deserunt dolore enim culpa enim dolore, sed exercitation ut. Excepteur sint nostrud excepteur cupidatat, aliqua, in fugiat proident. Duis, irure deserunt eu dolor incididunt velit mollit voluptate, sint cupidatat.
</div>
<div class="e-col-6">
Excepteur incididunt aute amet nulla commodo laboris incididunt sint commodo et consectetur? Quis reprehenderit quis et commodo, enim voluptate quis fugiat non officia. Qui deserunt dolore incididunt in ad anim. Est nostrud in duis labore irure labore. Tempor aliqua in cillum consectetur irure proident dolore consequat, non velit do pariatur. Elit dolor occaecat adipiscing cillum, sunt sit ipsum. Incididunt proident proident sed, ullamco sunt anim, voluptate ex lorem non, aliquip? Ut eiusmod ut quis fugiat veniam in ullamco est, in reprehenderit deserunt, esse duis. Commodo, tempor ut commodo labore aute laborum. Ipsum nisi dolore lorem sed culpa lorem ea non.
</div>
<div class="e-col e-col__separator e-col__separator-fullheight"></div></div>
<div class="e-row">
<div class="e-col-6">Ad ex incididunt aliquip proident sit dolore in. Sint, ut ut exercitation in ea exercitation elit duis. Sit aute dolore deserunt nostrud, in, non id fugiat, velit dolor. Dolore dolore ad id irure nisi ut cupidatat non sit, cillum esse, velit excepteur? Irure sed sint sit, deserunt enim, excepteur ut quis fugiat. Aliquip officia in cupidatat dolor proident labore culpa, commodo incididunt et. In est nisi, dolore adipiscing et, nisi proident. Ut lorem et, consequat nisi, ipsum fugiat, ut ut commodo et, ex proident aute elit magna. Ex laboris ut culpa qui eu voluptate occaecat aute. Id, proident, ut ipsum irure, proident.
</div>
<div class="e-col-6">Occaecat, et sed ullamco in enim laborum, sunt ullamco. Officia laborum exercitation velit eu lorem, reprehenderit, laborum labore? Commodo in excepteur aliquip, aliqua fugiat occaecat officia culpa, ex esse in, duis nostrud aute. Quis officia, occaecat enim eu irure nulla occaecat, commodo. Mollit culpa velit enim magna id eu eiusmod. Labore, aute, nisi, ad ex lorem sit, labore dolor quis est. Velit voluptate, deserunt sint quis sunt in anim tempor, minim et est. Cupidatat do enim consectetur velit, sunt ut. Sint officia sed nisi dolore commodo qui, laboris lorem excepteur laborum officia minim, occaecat. Amet quis lorem adipiscing tempor ut laboris in, cillum?
</div>
<div class="e-col e-col__separator e-col__separator-fullheight"></div>
</div>
Sint eiusmod ea nostrud, anim labore pariatur, mollit voluptate eiusmod proident sed eu proident sit. Proident id fugiat aute, elit, nostrud labore consequat dolore ut? Dolor aliqua, et in ullamco, ut sint ut, consectetur sunt in exercitation ad pariatur ut. Nostrud, cillum cillum, amet est, amet elit sed? Tempor consequat exercitation proident qui nisi deserunt ex. Velit, aliquip esse id, aliquip labore? Culpa ad excepteur, aliqua ea quis in aliqua ut. Sed ex consectetur commodo id amet, cillum non, minim, aute, irure dolore, do, eiusmod, nostrud voluptate. Anim esse occaecat velit, proident sunt sed minim. Minim tempor magna amet, lorem pariatur dolor non, amet sed cupidatat qui.
Qui elit officia cupidatat amet commodo enim non ad. Et anim, fugiat veniam, amet commodo pariatur amet nulla adipiscing? Sint dolore, anim, fugiat qui irure in occaecat duis, quis anim adipiscing. Minim ut reprehenderit minim cillum, dolor, laboris minim lorem, ut ut. Proident adipiscing, incididunt ut duis ut incididunt, qui in. Ut nulla in, id anim elit ut quis labore et id sed amet, aliqua? Quis incididunt deserunt minim veniam cillum veniam velit in. Quis ex lorem nostrud veniam tempor, lorem non in in dolore sint. Velit, minim, cillum consequat. Ut laboris officia sunt proident aliqua dolore, consectetur deserunt laborum.
1/4 separator
Copy Jade
Copy HTML
Show code
Hide code
with e-col__separator-4
<div class="e-row">
<div class="e-col-4">
Duis sunt, voluptate velit enim, occaecat nostrud amet. Dolor, cupidatat tempor aliquip ullamco ut, deserunt exercitation? Voluptate, consectetur id ex fugiat nostrud. Elit reprehenderit consectetur enim. Voluptate consequat cillum qui aliqua sed in ad eu nulla cillum? Qui lorem laborum irure sed, ut, duis duis dolore ea. Eiusmod consequat fugiat do dolore enim incididunt, eu? Pariatur proident aliquip qui non voluptate eu pariatur exercitation pariatur dolor. Ex esse duis, ex aliqua, non commodo est. Id ut ex est officia laboris, dolor cillum et proident, in aliqua.
</div>
<div class="e-col-8">
Enim ex quis sunt esse ipsum ex. Veniam, ullamco consequat, magna, commodo elit duis ex aute, voluptate. Dolor nisi, ex culpa esse, amet sint irure velit reprehenderit. Laboris elit irure aliquip officia ipsum. Cupidatat in id quis sed, exercitation in. Ut in nulla quis reprehenderit in amet, non, excepteur? Officia exercitation laboris mollit in esse proident mollit? Reprehenderit nisi sed eu magna exercitation aliquip. Id laboris cillum ex culpa adipiscing cupidatat? Occaecat occaecat nisi laboris dolor, do minim do nostrud sit, ut nostrud?
</div>
<div class="e-col e-col__separator e-col__separator-4"></div></div>
<div class="e-row">
<div class="e-col-4">Nostrud, in, irure ullamco, do est in, occaecat minim dolore duis nulla exercitation. Consequat excepteur deserunt, do in enim esse consequat duis veniam dolore. Lorem qui adipiscing, deserunt irure elit, eu ut esse, sed do in, magna. Aliqua anim proident est sunt consectetur id. Quis veniam dolore sed ex occaecat amet dolor dolor consectetur est ex. Ullamco nulla in non consectetur culpa, eu exercitation esse non ut incididunt, exercitation. Ad, cillum sunt commodo adipiscing, consectetur sunt velit ea incididunt ut anim commodo in. Nulla exercitation, ut lorem do minim ad? Eu duis, aliqua in voluptate excepteur pariatur eu pariatur, irure veniam. Exercitation ut adipiscing, ut, ea.
</div>
<div class="e-col-8">Duis in ad, minim occaecat non nostrud enim sint, voluptate. Cupidatat ut nulla laborum, cupidatat aliqua sunt ipsum aute. Velit in ut, est, ea, do, dolor incididunt elit lorem. Non anim nisi qui, deserunt nostrud voluptate anim et in, laborum, aute proident, do, non. Labore laboris, in eiusmod, mollit dolor culpa id. Lorem qui, eiusmod commodo ad adipiscing eu. Sit anim dolor, ut dolor ad anim, lorem? Ullamco qui labore ea aliqua quis ipsum, laboris, pariatur voluptate. Aliquip sunt, ut reprehenderit irure mollit minim, excepteur aute minim? Proident tempor non, ad voluptate, fugiat, eu sit fugiat voluptate, cillum.
</div>
<div class="e-col e-col__separator e-col__separator-4"></div>
</div>
Laboris incididunt elit enim enim laboris consequat pariatur? Aliquip mollit et cupidatat, dolor ex, elit reprehenderit, in tempor. Voluptate nulla culpa, in dolor, duis mollit. Ut, aute quis ex, amet aliquip consequat esse, qui, sed ut. Dolor, ut sed quis et magna velit do irure excepteur sunt. Velit non sint ut id, mollit dolor excepteur quis. Dolor ipsum fugiat? Esse irure nisi, elit, duis aliqua magna, veniam nostrud. Irure ullamco velit sit culpa, culpa velit. Ad esse esse enim aliquip voluptate ut aliquip cillum eiusmod, velit sint.
Ut ut pariatur sunt, voluptate in culpa aliqua do dolor proident ullamco excepteur laborum adipiscing. Reprehenderit labore do duis sunt id labore ex mollit do adipiscing ea. Cupidatat in sunt, esse do dolore dolor non irure ea enim et in. Voluptate, est, nisi ut amet dolor dolore aute excepteur aliquip ad. Sed laborum sed, ad ipsum, fugiat laboris tempor proident ut quis minim. Elit ipsum lorem dolor reprehenderit, non, fugiat, cupidatat aliqua laboris. Commodo nostrud aute ad. Dolor, dolore, incididunt ad ullamco incididunt aute, dolore qui. Esse minim ut ut ipsum officia ad commodo dolore, officia tempor est? Nulla dolore culpa in nostrud ex elit deserunt officia sed.
1/4 separator
Copy Jade
Copy HTML
Show code
Hide code
with e-col__separator-8
<div class="e-row">
<div class="e-col-8">
Veniam ea tempor enim dolore laborum ea ut? Labore, quis sed in et reprehenderit anim magna? Ad nisi ad culpa quis. Aliquip magna aliqua sit dolor esse in anim exercitation ut consequat. Ut, incididunt ut aliqua ad, non nisi sunt officia esse, esse lorem qui. Laboris ut sed proident ullamco, nisi dolore consectetur in, cillum sint sit ex? Dolore, est incididunt veniam, ut ex incididunt irure dolor. Veniam ipsum tempor voluptate est sint non esse. Labore occaecat sit cupidatat. Dolor culpa excepteur quis deserunt nisi, consequat cupidatat, consectetur?
</div>
<div class="e-col-4">
Id qui qui dolore, excepteur velit nisi excepteur sit? Mollit mollit nulla reprehenderit, in elit, mollit qui. Aliquip culpa laborum et consequat dolore. Sed laborum commodo aliqua. Consectetur laborum id, ea proident lorem, consectetur. Sed nostrud, ex esse dolore cillum est proident. Sed aute veniam, labore ut, eu aliquip quis aute lorem ea adipiscing in. Nostrud ipsum sit, commodo dolor elit, sit exercitation nisi id? Fugiat consequat, fugiat eu aliquip sit dolore sed ut, adipiscing esse. Voluptate sunt enim aliqua irure, labore eu pariatur lorem in commodo dolore, qui.
</div>
<div class="e-col e-col__separator e-col__separator-8"></div></div>
<div class="e-row">
<div class="e-col-8">Deserunt cillum sit enim, dolor culpa in, dolore irure lorem, quis cupidatat pariatur. Excepteur consectetur, in dolor et pariatur, exercitation cillum ut eiusmod id sint esse. Ipsum nulla aute dolor sint, est eiusmod in, dolore laborum. In nisi sunt, exercitation cupidatat. Deserunt ipsum lorem fugiat nulla do, ut, ut, eiusmod. Exercitation quis do commodo lorem sunt in, magna duis. Adipiscing quis sint culpa mollit sed magna. Esse, dolor adipiscing culpa amet sed ullamco laborum consectetur veniam minim. Est dolor sunt dolor veniam, cillum id non ut, deserunt lorem. Laborum eu mollit ut, ad, laboris in nostrud officia.
</div>
<div class="e-col-4">Labore mollit qui amet cupidatat, do, fugiat, sunt aute. Pariatur nostrud sunt ad irure ea, aliquip duis. Adipiscing excepteur velit proident magna nisi in. Tempor culpa amet eu proident officia adipiscing, magna cupidatat in commodo? Sunt quis enim, ipsum nisi, elit? Ex est ex cupidatat consectetur id ea. Excepteur non laboris ipsum aute duis, excepteur labore dolor ad. Esse dolor fugiat qui aliquip in est officia ullamco in aliquip. Reprehenderit qui consequat dolor incididunt minim, cupidatat dolore occaecat. Culpa pariatur exercitation qui ipsum irure sint qui dolore id.
</div>
<div class="e-col e-col__separator e-col__separator-8"></div>
</div>
Nostrud esse, proident, reprehenderit voluptate, excepteur aliqua in, adipiscing irure sit. Nisi aliquip, minim ullamco, ipsum in consectetur, sit excepteur, magna fugiat dolor veniam lorem. Adipiscing ad ad voluptate dolor adipiscing irure sit dolor, esse ex adipiscing? Ipsum duis et, ipsum, aliqua, aliqua officia, ut. Ut ullamco aliqua aliquip anim, eu do veniam nostrud. Cupidatat eiusmod adipiscing, veniam adipiscing ea? Quis ullamco reprehenderit minim ullamco. Id, sit aliqua, eu sit dolore commodo, voluptate, sit. Sunt elit dolore commodo excepteur consequat dolor esse ipsum, ut? Velit ut aliquip.
Aute, aute commodo pariatur ex, nisi fugiat quis sunt fugiat dolor minim quis. Dolor, id aliqua magna et enim, ut aute aute culpa ut dolor in. Ad, ullamco adipiscing ut elit pariatur ea lorem. Amet reprehenderit voluptate aute sed ut veniam? Aute, quis dolor incididunt lorem, lorem, labore consequat, lorem? Do voluptate, minim ut? Aute commodo nulla est enim, in ut consectetur. Est sint, qui dolor reprehenderit ad, eu, in amet aliqua incididunt. Sunt, adipiscing occaecat dolor, in dolor aute. Id fugiat dolore, aliquip laborum?
1/3 separator
Copy Jade
Copy HTML
Show code
Hide code
with e-col__separator-3
<div class="e-row">
<div class="e-col-3">
Pariatur cillum, sed, et, elit. In lorem, elit in est aute adipiscing quis ut nostrud dolore? In, cupidatat ex ex, consequat, deserunt velit labore, ullamco laboris, do irure commodo? Deserunt, ea mollit incididunt dolore, sit mollit culpa, excepteur aliqua. Cupidatat commodo, ad, do dolor eiusmod, do? Consectetur proident occaecat quis pariatur nisi, culpa, consequat, ipsum. Ut, ad mollit, occaecat, aute minim officia enim officia enim sint officia et. Ipsum in culpa dolore tempor deserunt dolor proident nostrud, anim, nostrud aute, commodo commodo? Duis ut aliqua officia tempor, magna? In ex deserunt, consectetur non, dolore esse, labore.
</div>
<div class="e-col-9">
Pariatur, excepteur fugiat dolore ex, dolore eu non ut eu incididunt, elit. Reprehenderit amet aliquip magna, labore reprehenderit, fugiat elit, in et sed, ut. Ut, incididunt culpa lorem aliquip ipsum? Ut ea, quis cupidatat consequat. Et non excepteur, commodo, laboris ut, culpa aute, dolor est? Dolore fugiat ullamco nulla ex cillum eiusmod consequat, enim in? Eiusmod cupidatat, sit non, nostrud, ut. Nostrud culpa adipiscing mollit non commodo reprehenderit sint. Labore cillum, anim eu non labore, anim in. Ea et nisi amet dolor ut, culpa est.
</div>
<div class="e-col e-col__separator e-col__separator-3"></div></div>
<div class="e-row">
<div class="e-col-3">Nostrud anim laboris ut exercitation labore duis, nostrud dolore reprehenderit dolor amet. Exercitation sit pariatur, pariatur tempor sunt, id cupidatat ex eu? Elit sit, commodo aute, dolore fugiat qui aliquip. Dolore dolore veniam aliqua, in, laborum quis exercitation ex. Anim sit anim in sit sed non, aute duis commodo qui quis sit, non? Do, eu aute deserunt non aliquip eu incididunt pariatur enim magna labore, sed aliqua. Est reprehenderit adipiscing ipsum elit nostrud et enim aliquip ut anim adipiscing nostrud do. Incididunt ut officia officia irure elit sunt, fugiat amet dolor? Velit nostrud do, magna adipiscing in lorem laborum cillum duis minim, sed mollit. Enim nostrud sit commodo laboris, culpa?
</div>
<div class="e-col-9">Aliqua, aliquip cillum aliqua culpa. Qui voluptate, id aliquip mollit, sit, do pariatur elit, tempor, duis laborum tempor, magna, sint? Culpa enim cupidatat duis cillum in pariatur dolor ad anim. Cupidatat dolore est velit consectetur proident id, sed. Consequat laborum nostrud lorem velit laborum? Ut proident cillum, ut in, sed ea officia laborum? Eiusmod, aliquip quis commodo amet cupidatat in ipsum aliquip, adipiscing aliqua. Tempor, elit labore, anim, cillum est, dolor. Amet ut id do adipiscing irure elit ipsum ex nisi do? Est velit, velit eu laboris est cillum tempor commodo anim mollit consectetur.
</div>
<div class="e-col e-col__separator e-col__separator-3"></div>
</div>
Dolore laboris, deserunt, irure, est aliqua aliqua non voluptate est magna do? Eiusmod magna ut dolor aute lorem mollit. Sint nisi minim lorem, sunt lorem tempor quis, ad. Voluptate, dolore esse commodo labore anim in magna elit consequat dolor? Minim commodo commodo magna occaecat magna dolor. Ex laborum in aliquip cillum mollit, velit aliquip, tempor tempor. Consequat dolore, esse enim, eu excepteur, veniam. Ut tempor nostrud minim tempor, ipsum officia est. Ut eiusmod pariatur adipiscing dolore sit, non adipiscing, do velit. Id excepteur qui dolor dolore in in ex do, labore amet sed occaecat eiusmod?
Esse et, ad quis commodo, eu, laboris, pariatur pariatur nostrud aute. Pariatur ea id duis adipiscing, pariatur irure commodo fugiat. Qui enim proident ut non sint. Veniam reprehenderit fugiat cupidatat do laboris ea voluptate excepteur exercitation in. Dolor minim dolor quis. Enim adipiscing voluptate exercitation dolor consectetur, sed et quis velit quis. Sit quis pariatur enim dolor, sunt. Ut esse, culpa velit laborum cillum consectetur eiusmod excepteur eu adipiscing. Eiusmod ex in dolore ut, eu, eiusmod ut dolore sunt, occaecat reprehenderit. Dolor ut consequat nisi sint consequat sunt, magna.
1/3 separator
Copy Jade
Copy HTML
Show code
Hide code
with e-col__separator-9
<div class="e-row">
<div class="e-col-9">
Voluptate mollit in labore nostrud qui. Officia culpa deserunt, dolore velit do culpa consectetur eiusmod in sed, cupidatat, enim? Excepteur, nulla ipsum consequat ullamco, labore? Do culpa velit pariatur, pariatur, proident do, non fugiat dolore nostrud, proident deserunt. Ut, amet, aliqua fugiat labore, elit cupidatat, nulla ipsum eiusmod. Elit, laborum, culpa exercitation nisi aute exercitation, laboris aliquip aute magna anim fugiat. Officia, duis in ut pariatur aute, dolor, consequat, incididunt sed voluptate. Veniam amet ut mollit esse commodo, cupidatat culpa consequat, in qui. Velit elit, duis, duis laborum culpa incididunt sunt. Ea, duis, esse elit, in, nisi ullamco ut.
</div>
<div class="e-col-3">
Anim veniam anim quis ut officia, dolor irure, tempor, elit esse ut. In ut ut elit est, adipiscing, dolor aliqua. Eu dolor reprehenderit occaecat, aute, anim sunt nostrud, ipsum. Esse nulla ea fugiat dolor et laborum magna est ex duis nisi? Qui aute occaecat amet ipsum, exercitation velit enim. Reprehenderit id, culpa culpa, nisi, irure ut. Sunt velit dolor, officia culpa dolor non excepteur. In ea, commodo nulla sint, non consectetur dolor velit, eu. Nulla deserunt fugiat ullamco quis, excepteur occaecat pariatur qui nisi. Dolor officia sunt, excepteur, mollit, aute enim sint do.
</div>
<div class="e-col e-col__separator e-col__separator-9"></div></div>
<div class="e-row">
<div class="e-col-9">Tempor enim aliquip, aliqua aliqua fugiat sed nulla. Lorem pariatur dolore reprehenderit occaecat duis ea pariatur, lorem id culpa ullamco. Ex do eu est officia adipiscing id. Adipiscing, ullamco exercitation do sunt commodo, irure, consequat ex ut? Sunt, in voluptate dolore eu est ut excepteur nostrud. Deserunt, laboris sint, sit laboris, cillum ut eu, tempor velit in sint magna laborum. Officia eu ullamco laboris excepteur non aute sit incididunt. Est nulla dolore, qui, sit amet culpa sint, fugiat occaecat lorem, excepteur. Esse esse mollit labore ut et ullamco ipsum voluptate. Commodo duis elit adipiscing dolore amet.
</div>
<div class="e-col-3">Anim qui sunt pariatur, enim nostrud cillum in laborum fugiat. Esse nulla aliqua incididunt, reprehenderit nostrud, nisi velit cupidatat, duis officia dolor. Mollit sint sit esse nisi, laboris laboris velit consectetur? Aute non non amet est dolor labore nulla dolore, aliquip. Esse, sunt dolore nulla occaecat ullamco exercitation id, occaecat amet non. In, nulla ut ut, cupidatat, eu. Nulla cupidatat elit est sit, dolor fugiat? Amet dolor anim enim tempor in sint aute aute veniam dolor tempor, mollit. Sed laboris magna amet dolore ut sunt ut eiusmod in et. Magna incididunt mollit consectetur laborum exercitation ut in.
</div>
<div class="e-col e-col__separator e-col__separator-9"></div>
</div>
In velit, ut ullamco minim occaecat aute. Sit proident in magna sint, irure fugiat aliquip ut? Qui, dolore non? Cillum proident, dolor, tempor, nisi cupidatat proident excepteur est. Consequat, aute anim non fugiat enim do officia. Dolor, non laboris voluptate, in ipsum deserunt eu laboris quis. Occaecat, veniam dolore sint eu ut mollit duis laborum ut mollit. Culpa, id in duis, eiusmod occaecat excepteur in commodo, irure, aliqua? Ut ea, dolore magna commodo, irure quis tempor elit qui laborum, esse est. Voluptate, dolore ea sit, velit sunt, irure, enim et.
Deserunt fugiat id dolor ut et ea, cillum? Voluptate anim nisi dolor magna ut, elit, qui dolore, ea. In, ut adipiscing non nulla dolor, sit eu sint, culpa, labore laborum. Et dolore, et aliqua ut ea ad. Proident velit proident enim aute, voluptate non sunt sed excepteur sed. Et elit nulla, tempor est, anim esse dolore velit eiusmod proident consectetur aute? Culpa amet aliqua in deserunt qui, mollit occaecat? Duis deserunt, amet, mollit fugiat laboris. Nulla reprehenderit, qui incididunt ut velit dolor tempor, non commodo, qui in, lorem. Labore ea aliquip esse quis voluptate nulla duis, sed anim dolor, dolor.
Equal grid
Equal height grid
Copy Jade
Copy HTML
Show code
Hide code
table layout
<div class="e-row">
<div class="e-row__height">
<div class="e-col-6 e-col-height">
Nostrud nisi tempor aliquip? Dolore laborum aute mollit laborum elit? Dolor ad, aute magna sint exercitation deserunt proident, fugiat dolore voluptate? Occaecat non, eu, occaecat dolore officia commodo sunt ut ex eu, ullamco aliqua? Velit tempor ut nisi, occaecat quis, cillum dolore fugiat in, ipsum et mollit. Est ex velit voluptate consequat consequat dolor voluptate ex labore? Ea quis pariatur minim proident non consequat, laborum in in. Non consequat amet do est in exercitation, eu est in. Ex, deserunt consectetur, anim sint, sit. Ad aute voluptate labore est excepteur ad, in excepteur enim mollit in?
</div>
<div class="e-col-6 e-col-height">
Eiusmod lorem dolor excepteur id proident amet adipiscing, mollit dolor sunt? Ut ut exercitation proident incididunt anim ut commodo aliquip eiusmod cupidatat, et, ullamco. Consectetur et, exercitation duis dolore proident ex, in.
</div>
</div>
</div>
<div class="e-row">
<div class="e-row__height">
<div class="e-col-6 e-col-height">Lorem reprehenderit deserunt nisi in tempor sed in. Lorem, deserunt deserunt, laboris est cillum nisi occaecat. Commodo adipiscing reprehenderit, esse nisi lorem voluptate enim. Ullamco id, sint amet adipiscing adipiscing, magna, ullamco, non. Velit adipiscing velit ea, pariatur labore veniam. Aliquip dolore id in proident laborum eiusmod, commodo nisi. Id quis enim veniam, ipsum pariatur labore fugiat pariatur, in quis. Officia sint ea labore do. Eiusmod, pariatur anim deserunt sunt deserunt ut eu, dolor lorem. Consequat tempor eu nulla, nulla veniam commodo irure, labore irure aliquip ut?
</div>
<div class="e-col-6 e-col-height">Tempor do nostrud dolore, do exercitation excepteur ut sit dolore, magna, eiusmod. Sed adipiscing consequat qui, in irure et ut ex nulla ea ad qui in. Cillum, incididunt eiusmod cupidatat culpa ut magna dolore et reprehenderit mollit.
</div>
</div>
</div>
In aliqua ullamco deserunt est lorem anim commodo fugiat proident, nisi labore, commodo. Est dolor aliquip ullamco occaecat est lorem, esse ut commodo? Elit, dolore et culpa, non, ad, dolore, elit qui. Nostrud tempor ipsum, reprehenderit, lorem qui, reprehenderit sed, elit. Fugiat sunt in in esse, laborum amet ex ut culpa ullamco eu ut? Anim ad officia, velit, dolor dolor duis. Veniam, lorem sint, cupidatat eiusmod esse exercitation non. Id amet, amet laborum in, exercitation ex sint reprehenderit duis id deserunt, consectetur. Non ad culpa voluptate consequat? Commodo dolore, officia officia qui cillum dolor labore et ut.
Incididunt, veniam esse duis excepteur? Lorem dolore nulla pariatur dolore non eu ex exercitation tempor elit do? Aute consectetur magna adipiscing, proident, dolor nisi qui eu est sunt, ex.
Top aligned equal grid
Copy Jade
Copy HTML
Show code
Hide code
e-col-top
<div class="e-row">
<div class="e-row__height">
<div class="e-col-6 e-col-height">
Nulla dolore nisi labore, eu id dolore, et ad mollit. Ullamco ea ut in ad, velit non dolore incididunt. In in ipsum ut amet culpa ut nostrud tempor. Dolore voluptate voluptate amet ipsum esse veniam ex incididunt laboris. Tempor incididunt laboris laborum cupidatat excepteur culpa, labore cupidatat sed? Ut, lorem nostrud exercitation velit, id in officia quis. Reprehenderit non, eiusmod, et veniam, aute officia proident qui. Sed, quis esse adipiscing enim irure ut reprehenderit? Nulla dolor, in, ea, tempor lorem in exercitation ut magna aliqua? Deserunt enim minim ea excepteur adipiscing laboris labore, enim.
</div>
<div class="e-col-6 e-col-height e-col-top">
Nostrud, laboris ex mollit proident duis excepteur laboris dolor. Dolor sunt dolor ad lorem labore occaecat? Commodo ad ullamco, veniam in?
</div>
</div>
</div>
<div class="e-row">
<div class="e-row__height">
<div class="e-col-6 e-col-height">Commodo ut ex fugiat tempor incididunt quis nisi, nulla labore. Commodo laboris. Consequat aliqua adipiscing et minim qui fugiat, ea amet commodo. Id anim exercitation eu in adipiscing qui, duis. Ad excepteur non, nulla, commodo consequat elit consectetur ad, minim. Fugiat consequat veniam et labore ex fugiat excepteur laborum sed adipiscing. Exercitation officia id do, consectetur anim do enim, sunt, sint? In, ullamco aute, deserunt ex, ut, qui. Cupidatat cupidatat labore sunt incididunt, minim incididunt. Pariatur ullamco veniam ut in adipiscing cupidatat ad, sed duis, ea, fugiat.
</div>
<div class="e-col-6 e-col-height e-col-top">Proident esse tempor proident ad ex. Et non amet occaecat laborum non cillum, laborum voluptate pariatur ut ullamco reprehenderit aute. Quis, ut laborum, nulla adipiscing, consequat in ex.
</div>
</div>
</div>
Labore ullamco incididunt ea. Cillum in, consequat minim irure, ex tempor occaecat qui ullamco. Pariatur lorem, ut commodo non nisi deserunt nisi aliquip in, qui ut lorem. Do ut lorem, adipiscing, nostrud ullamco aliqua sint qui pariatur. Deserunt occaecat deserunt eiusmod in dolor enim ipsum esse labore lorem veniam. Qui id, consectetur et non, voluptate, voluptate commodo, aute aliqua voluptate irure? Fugiat sit, dolore, sunt, dolor, commodo elit sunt in sint. Et cillum, amet aute reprehenderit et excepteur et adipiscing irure sed eiusmod fugiat culpa. Laborum amet aute in officia nostrud officia exercitation cillum. Sed, elit tempor nisi, nostrud id, culpa esse.
Irure ut culpa reprehenderit pariatur ut ea incididunt, enim. Laboris veniam consectetur ut elit sunt, reprehenderit est do et cupidatat. Incididunt minim sunt, ut nisi laborum excepteur, non, et elit minim.
Bottom aligned equal grid
Copy Jade
Copy HTML
Show code
Hide code
e-col-bottom
<div class="e-row">
<div class="e-row__height">
<div class="e-col-6 e-col-height">
Culpa, proident do velit duis voluptate sunt aute. Proident, qui, ipsum voluptate dolor, cupidatat in occaecat? Minim, culpa, sit sed dolor eu, adipiscing elit esse. Est qui, ut proident enim voluptate cillum anim esse qui. Eiusmod sunt excepteur. In lorem elit aliqua quis id ipsum non aliqua sed, consectetur elit. Ex dolor voluptate culpa qui tempor? Cupidatat aliquip tempor ex aute, est elit esse exercitation aliquip laborum excepteur nulla? Deserunt excepteur ad laborum nulla occaecat. Commodo ut laborum, lorem esse non voluptate irure.
</div>
<div class="e-col-6 e-col-height e-col-bottom">
Velit duis reprehenderit cupidatat ullamco velit cupidatat deserunt, velit mollit. Excepteur aliquip quis cupidatat, esse, qui, dolore. Amet ut, aliquip in mollit.
</div>
</div>
</div>
<div class="e-row">
<div class="e-row__height">
<div class="e-col-6 e-col-height">Duis sit, sint sit ut sint nostrud. Deserunt tempor amet minim laboris dolor esse nulla, laborum aliqua. Lorem ut lorem tempor enim veniam duis, aute ut? Qui, do pariatur est ullamco et officia do mollit. Ut nulla amet consectetur aliqua ea qui enim adipiscing lorem. Qui exercitation pariatur veniam amet do consequat laborum in commodo. Velit esse fugiat lorem, ea enim, ullamco sed lorem, adipiscing culpa, elit fugiat labore. Dolor consequat elit et irure eu velit amet. Do irure ex, voluptate, anim aliquip, eu. Sunt cillum proident ut dolor deserunt reprehenderit voluptate aliqua eu.
</div>
<div class="e-col-6 e-col-height e-col-bottom">Est culpa, ipsum exercitation aliqua tempor. Dolore in nulla in consequat nisi in, sint, excepteur excepteur. Reprehenderit ad, aute voluptate sit in ut reprehenderit.
</div>
</div>
</div>
Exercitation ipsum dolore, ex irure minim, irure ut mollit, excepteur qui adipiscing, aliquip. Exercitation sed do, duis, ipsum sint duis anim aute mollit tempor voluptate veniam. Occaecat qui dolore tempor, duis, sit adipiscing, magna consequat dolore enim aliqua irure. Occaecat pariatur aute, fugiat cupidatat qui consequat duis, sunt nisi fugiat. Pariatur, nulla reprehenderit, nulla consequat proident nulla sint reprehenderit id exercitation. Reprehenderit laboris dolor, ut excepteur qui aliqua exercitation ex proident mollit, in. Proident, ex nulla proident ex exercitation ad velit cupidatat non id fugiat culpa? Consequat officia tempor, elit ut sed magna veniam laboris eu. Nostrud adipiscing labore deserunt qui, sit velit ad aliqua, commodo. Ipsum duis do ullamco deserunt cillum irure ad.
Lorem labore, ea ad quis, minim, sunt nostrud enim laborum qui, duis reprehenderit. In, incididunt laboris in, dolor veniam aliqua, eiusmod. Culpa consectetur aliquip in id consectetur irure cillum esse?
Bordered equal grid
Copy Jade
Copy HTML
Show code
Hide code
e-col-height-bordered
<div class="e-row">
<div class="e-row__height">
<div class="e-col-3 e-col-height e-col-height-bordered">
Irure, ad et cillum nostrud cupidatat lorem ex exercitation. Ex velit, proident, dolor, minim excepteur ea fugiat tempor. Adipiscing, irure ut, consequat commodo voluptate, laborum qui, non, sed incididunt. Officia qui ad do, eu. Nisi aute consectetur amet, ea, magna irure aute quis dolore, ex enim, in ut voluptate ad. Adipiscing minim in in aliqua, et qui aliqua aliqua, sed. Ullamco nulla ipsum ut, sed qui anim ex. Eiusmod aliqua nisi incididunt, magna occaecat commodo, ipsum. Do anim voluptate laborum sint, esse, minim, ut, voluptate ipsum deserunt. In dolore elit, cillum, eu exercitation, fugiat nostrud, lorem culpa dolor aute?
</div>
<div class="e-col-3 e-col-height e-col-height-bordered">
Dolor, sit, dolore incididunt, culpa sed, aliquip pariatur tempor dolor. Culpa sit, consectetur excepteur est, laborum pariatur sit consequat dolor. Nisi eu fugiat id cupidatat, sint ex, ea pariatur elit.
</div>
<div class="e-col-3 e-col-height">
Velit nulla dolore, eu labore ut, aliqua deserunt, consequat irure ad. Aliquip, pariatur labore in consectetur eiusmod laboris nulla magna id ipsum et excepteur dolor? Eu dolor in in id consequat aliquip, sed ad? Dolor aliqua dolore, occaecat veniam, lorem consequat ipsum cupidatat ullamco, irure. Labore deserunt et irure dolor esse ad id. Dolor, ut quis occaecat nostrud ad proident ut anim consectetur ut cupidatat, ea. Anim officia laboris ad, sunt, quis veniam consectetur incididunt. Nostrud do ut pariatur in, exercitation, minim, in ut eu, cupidatat consectetur, aliquip excepteur irure. Magna consequat dolore ipsum voluptate enim incididunt, duis ex reprehenderit labore exercitation, pariatur ut. Id sint, qui do nisi ipsum.
</div>
</div>
</div>
<div class="e-row">
<div class="e-row__height">
<div class="e-col-3 e-col-height e-col-height-bordered">Nulla, ut aliqua sed, anim reprehenderit ullamco aliqua aute ipsum? In eiusmod exercitation proident sint enim qui cupidatat, ad. Est ut eu exercitation aute, nostrud ut non, in? Qui ex eu, veniam, culpa, aliqua sint, lorem. Nisi, ut, est fugiat lorem non, magna. Amet nostrud mollit reprehenderit, in culpa amet irure ut. In, ad in duis excepteur cillum non occaecat ex mollit? Veniam ex officia irure ut, consequat occaecat, velit tempor aute veniam dolore excepteur. Sint dolor, voluptate labore est velit ex nulla ad. Lorem consequat, magna est sint irure dolor dolore, dolore nulla.
</div>
<div class="e-col-3 e-col-height e-col-height-bordered">Reprehenderit, quis ipsum, velit consectetur, sed reprehenderit. Dolore est minim do proident esse, nulla ut, cupidatat id? Magna sint incididunt ex culpa amet anim eu occaecat.
</div>
<div class="e-col-3 e-col-height">Ipsum incididunt, incididunt voluptate, ad, non duis enim. Sit elit ea ullamco exercitation magna. Adipiscing, labore, laborum, sunt, dolor pariatur do et amet excepteur. Irure laboris nostrud sunt labore. Nostrud fugiat commodo quis esse ullamco labore laborum consectetur et et. Adipiscing dolor, consectetur, consequat sint consequat dolore est enim sunt aliqua, veniam, reprehenderit id. Ea est dolor fugiat dolor ut aliqua, culpa elit, anim? Nostrud quis deserunt, aute ut ullamco, proident. Nulla irure sint est nostrud ullamco ullamco. Irure, eiusmod, ad ut, dolore amet sint, dolore exercitation, do, duis.
</div>
</div>
</div>
Ex lorem labore amet est laboris laborum, consequat. Labore, nulla, veniam mollit anim ad, pariatur cillum consectetur amet. Dolor, in nostrud dolor id deserunt duis excepteur aliqua, aute lorem sed, lorem, consectetur sint. In pariatur dolor dolor minim minim ut, nostrud, in? Adipiscing eiusmod, est sunt elit, commodo laboris consectetur ut proident nisi, ut. Consequat reprehenderit, lorem, pariatur qui pariatur nisi ut ullamco, elit? Esse, dolor non et ut excepteur ea. Culpa in, eu, quis, veniam mollit dolor nisi, in. Sint, culpa, enim do, veniam ea non, laboris, mollit adipiscing sunt in, in. Excepteur, aliquip nostrud excepteur nisi tempor incididunt ea, ut, dolore in enim.
Sint irure dolor do culpa ut dolore sint ea anim, dolor aute culpa. Reprehenderit sit incididunt elit fugiat. Laboris in in pariatur quis do nisi officia, velit.
Amet sed dolore, occaecat fugiat. Nisi laborum dolor, proident esse cupidatat adipiscing? Ea adipiscing, ut ipsum, sunt. Aliquip dolore nisi id in minim sed sint reprehenderit aliqua. Labore ut, officia deserunt, ea veniam proident dolore, et laboris. Tempor est, cupidatat, laboris nulla, in ad irure, ut dolore. Lorem laborum commodo qui dolor, nisi amet proident. Qui in, sint ut amet exercitation adipiscing, cillum, dolore reprehenderit? Tempor deserunt eiusmod ut, eiusmod commodo nostrud, eu, ipsum nostrud. Quis, cupidatat ut, enim in elit labore ut esse.