By default, .grid
is using 12 column system with auto responsive columns.
All the columns are equal width and you can put as many columns in a grid as you want and columns will be
moved to a new row when there is not enough space in a container.
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
<div class="grid grid--2 sm:grid--3">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
By default, .grid
is using 12 column system with auto responsive columns.
All the columns are equal width and you can put as many columns in a grid as you want and columns will be
moved to a new row when there is not enough space in a container.
<div class="grid grid--columns-auto-narrow">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="grid grid--columns-auto-wide">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="grid">
<div class="col-6">1</div>
<div class="col-6">2</div>
<div class="col-4">3</div>
<div class="col-3">4</div>
<div class="col-5">5</div>
<div class="col-1">6</div>
<div class="col-2">7</div>
<div class="col-7">8</div>
<div class="col-2">9</div>
</div>
Max container width | Class prefix | |
---|---|---|
Default > 0px | 100% | col- and row- |
Extra extra small > 320px | 100% | xxs:col- and xxs:row- |
Extra small > 480px | 480px | xs:col- and xs:row- |
Small > 640px | 580px | sm:col- and sm:row- |
Medium > 768px | 720px | md:col- and md:row- |
Large > 991px | 960px | lg:col- and lg:row- |
Extra large > 1200px | 1140px | xl:col- and xl:row- |
Extra extra large > 1440px | 1280px | xxl:col- and xxl:row- |