<commit_before>---
layout: "documentation"
root: "../"
group_id: "grid"
category_id: "grid-sizes"
prev: "grid-tutorial"
---

<div class="siimple-h2">Responsive grid sizes</div>
<style>
    .demo-grid {
        background-color: #1be4c9;
        color: #ffffff;
        text-align: center;
        height: 34px;
        line-height: 34px;
        border-radius: 5px;
        margin-bottom: 10px;
    }
</style>
<div class="siimple-paragraph">
    You can customize the grid behavior across different devices and screen sizes. The following column classes are available:
</div>
<div class="siimple-tip siimple-tip--warning siimple-tip--exclamation">
    In version <code class="siimple-code">v3.1.0</code> we introduced a new grid breakpoint, the <strong>extra small</strong> size, and update the width of the <strong>small</strong> breakpoint to <code class="siimple-code">600px</code>.
</div>
<div class="siimple-tip siimple-tip--error siimple-tip--exclamation">
    In version <code class="siimple-code">v3.1.0</code> we fixed the responsive grid sizes format: the wrong format for older versions <code class="siimple-code">siimple-grid-col-{breakpoint}--{size}</code> has been reemplaced with the correct modifier syntax <code class="siimple-code">siimple-grid-col--{breakpoint}-{size}</code>. Both formats will are supported in versions <code class="siimple-code">v3.x.x</code>, but the worng format <strong>will be removed in a future major release</strong>.
</div>
<div class="siimple-table siimple-table--border">
    <div class="siimple-table-header">
        <div class="siimple-table-row">
            <div class="siimple-table-cell" align="center">Size</div>
            <div class="siimple-table-cell" align="center">Prefix</div>
            <div class="siimple-table-cell" align="center">Class</div>
            <div class="siimple-table-cell" align="center">Container size</div>
        </div>
    </div>
    <div class="siimple-table-body">
        <div class="siimple-table-row">
            <div class="siimple-table-cell"><b>Extra small</b></div><commit_msg>Fixed typo. Minor changes<commit_after>---
layout: "documentation"
root: "../"
group_id: "grid"
category_id: "grid-sizes"
prev: "grid-tutorial"
---

<div class="siimple-h2">Responsive grid sizes</div>
<style>
    .demo-grid {
        background-color: #1be4c9;
        color: #ffffff;
        text-align: center;
        height: 34px;
        line-height: 34px;
        border-radius: 5px;
        margin-bottom: 10px;
    }
</style>
<div class="siimple-paragraph">
    You can customize the grid behavior across different devices and screen sizes. The following column classes are available:
</div>
<div class="siimple-tip siimple-tip--warning siimple-tip--exclamation">
    In version <code class="siimple-code">v3.1.0</code> we introduced a new grid breakpoint, the <strong>extra small</strong> size, and update the width of the <strong>small</strong> breakpoint to <code class="siimple-code">600px</code>.
</div>
<div class="siimple-tip siimple-tip--error siimple-tip--exclamation">
    In version <code class="siimple-code">v3.1.0</code> we fixed the responsive grid sizes format: the wrong format for older versions <code class="siimple-code">siimple-grid-col-{breakpoint}--{size}</code> should be replaced with the correct modifier syntax <code class="siimple-code">siimple-grid-col--{breakpoint}-{size}</code>. Both formats will are supported in versions <code class="siimple-code">v3.x.x</code>, but the worng format <strong>will be removed in a future major release</strong>.
</div>
<div class="siimple-table siimple-table--border">
    <div class="siimple-table-header">
        <div class="siimple-table-row">
            <div class="siimple-table-cell" align="center">Size</div>
            <div class="siimple-table-cell" align="center">Prefix</div>
            <div class="siimple-table-cell" align="center">Class</div>
            <div class="siimple-table-cell" align="center">Container size</div>
        </div>
    </div>
    <div class="siimple-table-body">
        <div class="siimple-table-row">
            <div class="siimple-table-cell"><b>Extra small</b></div>
{'fraction_non_alphanumeric': 0.15356885364095169, 'fraction_numerical': 0.010093727469358327, 'mean_word_length': 3.639910813823857, 'pattern_counts': {'":': 0, '<': 97, '<?xml version=': 0, '>': 97, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '72735', 'n_tokens_mistral': 1365, 'n_tokens_neox': 1274, 'n_words': 334}