Responsive grid using elementQuery

index.html

<h1>Responsive grid using elementQuery</h1>
<p>Try changing the: viewport width, width of <code>div.row</code> elements, base font-size, or zoom. Items with borders set are part of a nested grid which uses the same breakpoints.</p>
<p>The following <a href="https://github.com/tysonmatanich/elementQuery">elementQuery</a> breakpoints are set:</p>
<ul>
    <li><code>min-width: 25em /* 400px */</code></li>
    <li><code>min-width: 40em /* 640px */</code></li>
    <li><code>min-width: 50em /* 800px */</code></li>
</ul>

<div class="grid">
    <div class="row">
        <div class="col">
            <div class="item">1</div>
        </div>
        <div style="clear:both"></div>
    </div>

    <div class="row row--2">
        <div class="col">
            <div class="item">1</div>
        </div>
        <div class="col">
            <div class="item">2</div>
        </div>
        <div style="clear:both"></div>
    </div>

    <div class="row row--3">
        <div class="col">
            <div class="item">1</div>
        </div>
        <div class="col">
            <div class="item">2</div>
        </div>
        <div class="col">
            <div class="item">3</div>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="row row--3">
        <div class="col">
            <div class="item">1</div>
        </div>
        <div class="col col--2">
            <div class="item">2</div>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="row row--3">
        <div class="col">
            <div class="item">1</div>
        </div>
        <div class="col col--2">
            <div class="row row--2">
                <div class="col">
                    <div class="item">One</div>
                </div>
                <div class="col">
                    <div class="item">Two</div>
                </div>
                <div style="clear:both"></div>
            </div>
        </div>
        <div style="clear:both"></div>
    </div>

    <div class="row row--4">    
        <div class="col">
            <div class="item">1</div>
        </div>
        <div class="col">
            <div class="item">2</div>
        </div>
        <div class="col">
            <div class="item">3</div>
        </div>
        <div class="col">
            <div class="item">4</div>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="row row--4">    
        <div class="col">
            <div class="item">1</div>
        </div>
        <div class="col">
            <div class="item">2</div>
        </div>
        <div class="col col--2">
            <div class="item">3</div>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="row row--4">    
        <div class="col">
            <div class="item">1</div>
        </div>
        <div class="col">
            <div class="item">2</div>
        </div>
        <div class="col col--2">
            <div class="row row--2">
                <div class="col">
                    <div class="item">One</div>
                </div>
                <div class="col">
                    <div class="item">Two</div>
                </div>
                <div style="clear:both"></div>
            </div>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="row row--4">    
        <div class="col">
            <div class="item">1</div>
        </div>
        <div class="col col--3">
            <div class="item">2</div>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="row row--4">    
        <div class="col">
            <div class="item">1</div>
        </div>
        <div class="col col--3">
            <div class="row row--3">
                <div class="col">
                    <div class="item">One</div>
                </div>
                <div class="col">
                    <div class="item">Two</div>
                </div>
                <div class="col">
                    <div class="item">Three</div>
                </div>
                <div style="clear:both"></div>
            </div>
        </div>
        <div style="clear:both"></div>
    </div>
</div>

Responsive-grid-using-elementQuery.markdown

Responsive grid using elementQuery

Example of a responsive grid using element queries instead of media queries.

A Pen by Tyson Matanich on CodePen.

License.

style.css

body {
    font-family: sans-serif;
}

.grid {
    font-size: 100%;
    max-width: 1600px;
}

.row {
    margin: 0.5em 0;
    padding: 0.25em;
    text-align: center;
    background: #eee;
    border-radius: 0.25em;
}

.row .row {
    margin: 0;
    padding: 0;
}

.col {
    float: left;
    width: 100%;
}

.row--2[min-width~="25em"] > .col,
.row--4[min-width~="25em"] > .col {
    width: 50%;
}

.row--4[min-width~="25em"] > .col--2 {
    width: 100%;
}

.row--3[min-width~="40em"] > .col {
    width: 33.3333333%;
}

.row--3[min-width~="40em"] > .col--2 {
    width: 66.6666667%;
}

.row--4[min-width~="50em"] > .col {
    width: 25%;
}

.row--4[min-width~="50em"] > .col--2 {
    width: 50%;
}

.row--4[min-width~="50em"] > .col--3 {
    width: 75%;
}

.item {
    margin: 0.25em;
    padding: 0.5em 0;
    color: #fff;
    background: #ffbb00;
    font-weight: bold;
    line-height: 1em;
    border: solid 1px transparent;
    border-radius: 0.25em;
}

.row .row .item {
    border: solid 1px rgba(0, 0, 0, 0.6);
}

.row--2 > .col > .item {
    background: #74bd0a;
}

.row--3 > .col > .item {
    background: #0094ff;
}

.row--4 > .col > .item {
    background: #ff2f00;
}

h1 {
    font-size: 1.25em;
}

p {
    margin: 0 0 1em;;
}

code {
    padding: 0.25em 0.5em;
    color: #000;
    background-color: #f9f9f9;
}

a {
    color: #3a97c4;
}