locomotive-boilerplate/views/templates/grid.twig

{% extends "@layouts/base.twig" %}

{% block content %}
    <div class="o-container">
        <h1 class="c-heading -h1">Hello</h1>

        <div class="o-grid -col-4 -col-12@from-medium -gutters">
            <div class="o-grid_item u-gc-1/8@from-medium" style="background-color: gray;">
                <h2 class="c-heading -h2">This grid has 4 columns and 12 columns from `medium` MQ</h2>
            </div>

            <div class="o-grid_item u-gc-1/5@from-medium" style="background-color: yellow;">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
            </div>

            <div class="o-grid_item u-gc-5/9@from-medium" style="background-color: red;">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
            </div>

            <div class="o-grid_item u-gc-9/13@from-medium" style="background-color: blue;">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
            </div>

            <div class="o-grid_item u-gc-1/3 u-gc-5/13@from-medium" style="background-color: pink;">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita provident distinctio deleniti eaque cumque doloremque aut quo dicta porro commodi, temporibus totam dolor autem tempore quasi ullam sed suscipit vero?</p>
            </div>
        </div>
    </div>
{% endblock %}