Documentation

Image block 1

    <div class="custom-grid custom-grid--1">
        <div class="custom-grid__item"><img src="//placehold.it/480x320"></div>
        <div class="custom-grid__item"><img src="//placehold.it/480x320"></div>
        <div class="custom-grid__item"><img src="//placehold.it/480x320"></div>
        <div class="custom-grid__item"><img src="//placehold.it/480x320"></div>
    </div>

Image block 2

    <div class="custom-grid custom-grid--2">
        <div class="custom-grid__item"><img src="http://placehold.it/910x300" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/455x300" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/455x300" /></div>
    </div>

Image block 3

    <div class="custom-grid custom-grid--3">
        <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div>
    </div>

Image block 4

    <div class="custom-grid custom-grid--4">
        <div class="custom-grid__item"><img src="http://placehold.it/720x720" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div>
    </div>

Image block 5

    <div class="custom-grid custom-grid--5">
        <div class="custom-grid__item"><img src="http://placehold.it/720x720" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x480" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x480" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x480" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x480" /></div>
    </div>

Image block 6

    <div class="custom-grid custom-grid--6">
        <div class="custom-grid__item"><img src="http://placehold.it/720x720" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x480" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x480" /></div>
    </div>

With text 1

    <div class="custom-grid custom-grid--2 with-text fill">
        <div class="custom-grid__item">
            <div class="text-holder">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
            </div>
        </div>
        <div class="custom-grid__item"><img src="http://placehold.it/455x455" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/455x455" /></div>
    </div>

With text 2

    <div class="custom-grid custom-grid--3 with-text fill">
        <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div>
        <div class="custom-grid__item">
            <div class="text-holder">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
            </div>
        </div>
    </div>

With text 3

    <div class="custom-grid custom-grid--3 with-text fill">
        <div class="custom-grid__item"><img src="http://placehold.it/720x720" /></div>
        <div class="custom-grid__item">
            <div class="text-holder">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
            </div>
        </div>
    </div>

With text 2 (reverse)

    <div class="custom-grid custom-grid--3 with-text fill">
        <div class="custom-grid__item">
            <div class="text-holder">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
            </div>
        </div>
        <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div>
    </div>

With text 3 (reverse)

    <div class="custom-grid custom-grid--3 with-text fill">
        <div class="custom-grid__item">
            <div class="text-holder">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
            </div>
        </div>
        <div class="custom-grid__item"><img src="http://placehold.it/720x720" /></div>
    </div>

2 linked image blocks

    <div class="custom-grid custom-grid--3">
        <a class="custom-grid__item" href="http://google.com">
            <img src="http://placehold.it/720x360" />
            <h2 class="custom-grid__link-text">Title</h2>
        </a>
        <a class="custom-grid__item" href="http://google.com">
            <img src="http://placehold.it/720x360" />
            <h2 class="custom-grid__link-text">Title</h2>
        </a>
    </div>

3 linked image blocks

    <div class="custom-grid custom-grid--7">
        <a class="custom-grid__item" href="http://google.com">
            <img src="http://placehold.it/690x500" />
            <h2 class="custom-grid__link-text">Title</h2>
        </a>
        <a class="custom-grid__item" href="http://google.com">
            <img src="http://placehold.it/690x500" />
            <h2 class="custom-grid__link-text">Title</h2>
        </a>
        <a class="custom-grid__item" href="http://google.com">
            <img src="http://placehold.it/690x500" />
            <h2 class="custom-grid__link-text">Title</h2>
        </a>
    </div>

Layout 1

    <div class="custom-grid custom-grid--3 with-text fill">
        <div class="custom-grid__item"><img src="http://placehold.it/720x720" /></div>
        <div class="custom-grid__item">
            <div class="text-holder">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
            </div>
        </div>
    </div>
    <div class="custom-grid custom-grid--3 with-text fill">
        <div class="custom-grid__item">
            <div class="text-holder">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
            </div>
        </div>
        <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div>
    </div>
    <div class="custom-grid custom-grid--3 with-text fill">
        <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div>
        <div class="custom-grid__item">
            <div class="text-holder">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
            </div>
        </div>
    </div>
    <div class="custom-grid custom-grid--1">
        <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div>
    </div>

Layout 2

    <div class="custom-grid custom-grid--4">
        <div class="custom-grid__item"><img src="http://placehold.it/720x720" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div>
    </div>
    <div class="custom-grid custom-grid--3 with-text fill">
        <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div>
        <div class="custom-grid__item">
            <div class="text-holder">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
            </div>
        </div>
    </div>
    <div class="custom-grid custom-grid--1">
        <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div>
    </div>
    <div class="custom-grid custom-grid--3 with-text fill">
        <div class="custom-grid__item">
            <div class="text-holder">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
            </div>
        </div>
        <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div>
    </div>

Layout 3

    <div class="custom-grid custom-grid--2 with-text fill">
        <div class="custom-grid__item">
            <div class="text-holder">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
            </div>
        </div>
        <div class="custom-grid__item"><img src="http://placehold.it/455x455" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/455x455" /></div>
    </div>
    <div class="custom-grid custom-grid--3 with-text fill">
        <div class="custom-grid__item"><img src="http://placehold.it/720x720" /></div>
        <div class="custom-grid__item">
            <div class="text-holder">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
            </div>
        </div>
    </div>
    <div class="custom-grid custom-grid--1">
        <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div>
    </div>

Layout 4

    <div class="custom-grid custom-grid--3 with-text fill">
        <div class="custom-grid__item">
            <div class="text-holder">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
            </div>
        </div>
        <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div>
    </div>
    <div class="custom-grid custom-grid--1">
        <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div>
        <div class="custom-grid__item"><img src="http://placehold.it/480x320" /></div>
    </div>
    <div class="custom-grid custom-grid--3 with-text fill">
        <div class="custom-grid__item"><img src="http://placehold.it/720x360" /></div>
        <div class="custom-grid__item">
            <div class="text-holder">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                </p>
            </div>
        </div>
    </div>