uix-kit
Version:
A free web kits for fast web design and development, compatible with Bootstrap v5.
1,757 lines • 52.2 kB
HTML
<!DOCTYPE html>
<html lang="@@{website_lang}" dir="@@{website_dirLTR}">
<head>
<meta charset="@@{website_charset}" />
<title>Uix Grid - @@{website_title}</title>
@@include('./src/components/_global/include-header.html')
</head>
<body class="page">
@@include('./src/components/_global/include-loader.html')
@@include('./src/components/_global/include-toggle-trigger.html')
<div class="uix-wrapper">
<!-- Header Area
============================================= -->
<header class="uix-header__container">
<div class="uix-header">
<div class="container">
@@include('./src/components/_global/include-brand.html')
@@include('./src/components/_global/include-menu.html')
</div>
<!-- .container end -->
<div class="uix-clearfix"></div>
</div>
</header>
<div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div>
<main id="uix-maincontent">
<!-- Content
====================================================== -->
<section class="uix-spacing--s uix-spacing--no-bottom">
<div class="container">
<div class="row">
<div class="col-12">
<h3>Uix Grid</h3>
<p>
It can be used for fluid layout for multiple projects and <strong>Bootstrap</strong> grid system. Its biggest feature is its support for <strong>loop</strong> lists.
</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div style="background-color: #000;">
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--auto-width">
<div class="uix-core-grid__col">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
<div class="uix-core-grid__col">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
<div class="uix-core-grid__col">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
<div class="uix-core-grid__col">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
<div class="uix-core-grid__col">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row">
<div class="uix-core-grid__col-2">
<div style="background: purple; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: purple; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: purple; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: purple; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: purple; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: purple; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row">
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols)</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--loop">
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: orange; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: orange; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: orange; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: orange; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: orange; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: orange; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: orange; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: orange; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: orange; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--loop">
<div class="uix-core-grid__col-2">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row">
<div class="uix-core-grid__col-3">
<div style="background: teal; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: teal; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: teal; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: teal; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--loop">
<div class="uix-core-grid__col-3">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row">
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: lime; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols)</div>
</div>
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: lime; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols)</div>
</div>
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: lime; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols)</div>
</div>
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: lime; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols)</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--loop">
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols & loop)</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row">
<div class="uix-core-grid__col-4">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--loop">
<div class="uix-core-grid__col-4">
<div style="background: red; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3 (loop)</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: red; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3 (loop)</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: red; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3 (loop)</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: red; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3 (loop)</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: red; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3 (loop)</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: red; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3 (loop)</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: red; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3 (loop)</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: red; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3 (loop)</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--loop">
<div class="uix-core-grid__col-6">
<div style="background: purple; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/2 (loop)</div>
</div>
<div class="uix-core-grid__col-6">
<div style="background: purple; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/2 (loop)</div>
</div>
<div class="uix-core-grid__col-6">
<div style="background: purple; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/2 (loop)</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row">
<div class="uix-core-grid__col-6">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/2</div>
</div>
<div class="uix-core-grid__col-6">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/2</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row">
<div class="uix-core-grid__col-8">
<div style="background: orange; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">2/3</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: orange; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row">
<div class="uix-core-grid__col-9">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">3/4</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row">
<div class="uix-core-grid__col-10">
<div style="background: teal; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">4/5</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: teal; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row">
<div class="uix-core-grid__col-7">
<div style="background: aqua; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">3/5</div>
</div>
<div class="uix-core-grid__col-5">
<div style="background: aqua; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">2/5</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row">
<div class="uix-core-grid__col-3">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
<div class="uix-core-grid__col-6">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/2</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row">
<div class="uix-core-grid__col-4">
<div style="background: aqua; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3</div>
</div>
<div class="uix-core-grid__col-6">
<div style="background: aqua; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/2</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: aqua; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row">
<div class="uix-core-grid__col-2">
<div style="background: teal; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
<div class="uix-core-grid__col-5">
<div style="background: teal; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">2/5</div>
</div>
<div class="uix-core-grid__col-5">
<div style="background: teal; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">2/5</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row">
<div class="uix-core-grid__col-8">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">2/3</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
</div>
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section>
<div class="container">
<div class="row">
<div class="col-12">
<h3>No Gutter Column For Uix Grid</h3>
<p>
You’ll just want to copy that into your stylesheet and then use the <code>.uix-core-grid__row--no-gutters</code> class on your <code>.uix-core-grid__row</code> div
</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div style="background-color: #000;">
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--auto-width uix-core-grid__row--no-gutters">
<div class="uix-core-grid__col">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
<div class="uix-core-grid__col">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
<div class="uix-core-grid__col">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
<div class="uix-core-grid__col">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
<div class="uix-core-grid__col">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters">
<div class="uix-core-grid__col-2">
<div style="background: lime; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: lime; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: lime; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: lime; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: lime; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: lime; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters">
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols)</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters uix-core-grid__row--loop">
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-2 uix-core-grid__col-6--md">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (min 2 cols & loop)</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters uix-core-grid__row--loop">
<div class="uix-core-grid__col-2">
<div style="background: maroon; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: maroon; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: maroon; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: maroon; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: maroon; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: maroon; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: maroon; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: maroon; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: maroon; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: maroon; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: maroon; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: maroon; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6 (loop)</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters">
<div class="uix-core-grid__col-3">
<div style="background: red; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: red; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: red; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: red; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters uix-core-grid__row--loop">
<div class="uix-core-grid__col-3">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (loop)</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters">
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: orange; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols)</div>
</div>
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: orange; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols)</div>
</div>
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: orange; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols)</div>
</div>
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: orange; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols)</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters uix-core-grid__row--loop">
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols & loop)</div>
</div>
<div class="uix-core-grid__col-3 uix-core-grid__col-6--md">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4 (min 2 cols & loop)</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters">
<div class="uix-core-grid__col-4">
<div style="background: teal; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: teal; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: teal; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters uix-core-grid__row--loop">
<div class="uix-core-grid__col-4">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3 (loop)</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3 (loop)</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3 (loop)</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3 (loop)</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3 (loop)</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3 (loop)</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3 (loop)</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3 (loop)</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters uix-core-grid__row--loop">
<div class="uix-core-grid__col-6">
<div style="background: lime; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/2 (loop)</div>
</div>
<div class="uix-core-grid__col-6">
<div style="background: lime; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/2 (loop)</div>
</div>
<div class="uix-core-grid__col-6">
<div style="background: lime; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/2 (loop)</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters">
<div class="uix-core-grid__col-6">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/2</div>
</div>
<div class="uix-core-grid__col-6">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/2</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters">
<div class="uix-core-grid__col-8">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">2/3</div>
</div>
<div class="uix-core-grid__col-4">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters">
<div class="uix-core-grid__col-9">
<div style="background: maroon; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">3/4</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: maroon; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters">
<div class="uix-core-grid__col-10">
<div style="background: red; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">4/5</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: red; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters">
<div class="uix-core-grid__col-7">
<div style="background: purple; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">3/5</div>
</div>
<div class="uix-core-grid__col-5">
<div style="background: purple; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">2/5</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters">
<div class="uix-core-grid__col-3">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
<div class="uix-core-grid__col-6">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/2</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters">
<div class="uix-core-grid__col-4">
<div style="background: aqua; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/3</div>
</div>
<div class="uix-core-grid__col-6">
<div style="background: aqua; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/2</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: aqua; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters">
<div class="uix-core-grid__col-2">
<div style="background: teal; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
<div class="uix-core-grid__col-5">
<div style="background: teal; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">2/5</div>
</div>
<div class="uix-core-grid__col-5">
<div style="background: teal; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">2/5</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-gutters">
<div class="uix-core-grid__col-8">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">2/3</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
</div>
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section>
<div class="container">
<div class="row">
<div class="col-12">
<h3>Uix Grid (No line breaks)</h3>
<p>
You’ll just want to copy that into your stylesheet and then use the <code>.uix-core-grid__row--no-break</code> class on your <code>.uix-core-grid__row</code> div
<br>
<em>Please simulate mobile viewing after zooming out your viewport.</em>
</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div style="background-color: #000;">
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--auto-width uix-core-grid__row--no-break">
<div class="uix-core-grid__col">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
<div class="uix-core-grid__col">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
<div class="uix-core-grid__col">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
<div class="uix-core-grid__col">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
<div class="uix-core-grid__col">
<div style="background: fuchsia; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/5</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-break">
<div class="uix-core-grid__col-2">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
<div class="uix-core-grid__col-2">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/6</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
<div class="uix-core-grid">
<div class="uix-core-grid__row uix-core-grid__row--no-break">
<div class="uix-core-grid__col-3">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
<div class="uix-core-grid__col-3">
<div style="background: yellow; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
</div>
<!-- .uix-core-grid__row end -->
</div>
<!-- /.uix-core-grid -->
</div>
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section>
<div class="container">
<div class="row">
<div class="col-12">
<h3>Inline Block</h3>
<p>
Use the <code>.uix-core-grid__col-</code>style class name directly, without the need to add a <code>.uix-core-grid</code> wrapper.
</p>
<hr>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</section>
<!-- Content
====================================================== -->
<section class="uix-spacing--s">
<div class="container">
<div style="background-color: #000;">
<div class="uix-core-grid__col-2">
<div style="background: blue; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">1/4</div>
</div>
<div class="uix-clearfix"></div>
<div class="text-center">
<div class="uix-core-grid__col-5 uix-core-grid__inline">
<div style="background: teal; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">2/5, Center alignment.</div>
</div>
</div>
<div class="uix-clearfix"></div>
<div class="uix-core-grid__col-5 uix-core-grid__mobile-stack">
<div style="background: olive; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">2/5, The width becomes 100% on mobile.</div>
</div>
<div class="uix-clearfix"></div>
<div class="uix-core-grid__col-5 uix-core-grid__mobile-half">
<div style="background: green; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,.5);">2/5, The width becomes 50% on mobile.</div>
</div>
<div class="uix-clearfix"></div>
</div>
</div>
<!-- .container end -->
</section>
</main>
@@include('./src/components/_global/include-copyright.html')
</div>
<!-- .uix-wrapper end -->
@@include('./src/components/_global/include-footer.html')