Loop through remaining craft.entries

Question

I have a layout in Craft with twig that gets the first 3 entries and applies them to the first three containers in the grid.

I can't figure out how to loop through the remaining entries to add to the grid-remaining div. With the current code it will repeat entries 1-3 in the grid-remaining div.

Here's what I have at the moment:

{% set firstEntry = craft.entries.section('shows').first() %}
{% set secondEntry = craft.entries.section('shows').nth(2) %}
{% set thirdEntry = craft.entries.section('shows').nth(3) %}

{% extends "_layout" %}

{% block content %}

    <div class="row">
        <div class="card-grid card-grid__two-thirds">
            {% include "_partials/card" with { entry: firstEntry } %}
        </div>
        <div class="card-grid card-grid__one-third">
            <h1>AD</h1>
        </div>
    </div>

    <div class="row">
        <div class="card-grid card-grid__one-half">
            {% include "_partials/card" with { entry: secondEntry } %}
        </div>
        <div class="card-grid card-grid__one-half">
            {% include "_partials/card" with { entry: thirdEntry } %}
        </div>
    </div>

    <div class="row grid-remaining">
        {% for entry in craft.entries.section('shows') %}
        <div class="card-grid card-grid__one-third">
            {% include "_partials/card" %}
        </div>
        {% endfor %}
    </div>
{% endblock %}

EDIT

The following works, but I feel like there must be a cleaner way to achieve the same result.

<div class="row grid-remaining">
    {% for entry in craft.entries.section('shows') %}
    {% if loop.index != 1 and loop.index != 2 and loop.index != 3 %}
    <div class="card-grid card-grid__one-third">
        {% include "_partials/card" %}
    </div>
    {% endif %}
    {% endfor %}
</div>

Answer 1

I think you can just add .offset(3) to the "remaining" craft.entries query to get the result that you want. Or you could exclude the id's of the first three.

But, this is quite ineffective (performance wise), since you're doing four separate queries to get the entries. An alternative would be to loop over all, and use the loop object together with conditionals to build the output. Something like this:

{% for entry in craft.entries.section('shows') %}
    {% if loop.index==1 %}
        <div class="row">
            <div class="card-grid card-grid__two-thirds">
                {% include "_partials/card" %}
            </div>
            <div class="card-grid card-grid__one-third">
                <h1>AD</h1>
            </div>
        </div>

    {% elseif loop.index==2 %}
        <div class="row">
            <div class="card-grid card-grid__two-thirds">
                {% include "_partials/card" %}
            </div>

    {% elseif loop.index==3 %}
            <div class="card-grid card-grid__one-half">
                {% include "_partials/card" %}
            </div>
        </div>

    {% elseif loop.index>3 %}
        {% if loop.index==4 %}
             <div class="row grid-remaining">
        {% endif %}

        <div class="card-grid card-grid__one-third">
                {% include "_partials/card" %}
        </div>

        {% if loop.index==loop.last %}
            </div>
        {% endif %}
    {% endif %}
{% endfor %}