carbon-components
Version:
The Carbon Design System is IBM’s open-source design system for products and experiences.
285 lines (282 loc) • 7.76 kB
HTML
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div class="bx--grid">
<div class="bx--row">
<div class="bx--col bx--col--auto">
<p>Small (4 columns @ 320px)</p>
</div>
</div>
<div class="bx--row">
<div class="bx--col-sm-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-sm-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-sm-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-sm-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
</div>
<div class="bx--row">
<div class="bx--col bx--col--auto">
<p>Medium (8 columns @ 672px)</p>
</div>
</div>
<div class="bx--row">
<div class="bx--col-md-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-md-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-md-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-md-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-md-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-md-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-md-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-md-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
</div>
<div class="bx--row">
<div class="bx--col bx--col--auto">
<p>Large (12 columns @ 1312px)</p>
</div>
</div>
<div class="bx--row">
<div class="bx--col-lg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-lg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-lg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-lg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-lg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-lg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-lg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-lg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-lg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-lg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-lg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-lg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
</div>
<div class="bx--row">
<div class="bx--col bx--col--auto">
<p>X-Large (12 columns @ 1312px)</p>
</div>
</div>
<div class="bx--row">
<div class="bx--col-xlg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-xlg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-xlg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-xlg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-xlg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-xlg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-xlg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-xlg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-xlg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-xlg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-xlg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-xlg-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
</div>
<div class="bx--row">
<div class="bx--col bx--col--auto">
<p>Max (12 columns @ 1584px)</p>
</div>
</div>
<div class="bx--row">
<div class="bx--col-max-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-max-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-max-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-max-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-max-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-max-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-max-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-max-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-max-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-max-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-max-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
<div class="bx--col-max-1">
<div class="outside">
<div class="inside">1</div>
</div>
</div>
</div>
</div>