Photo collage

Beautiful image tiles with different options in a single collage! It's made as photo collage in mind, but you may put different content here! It uses css-grid, so please be aware of browser support.

<section class="collage">
    <div class="collage-item">
        <figure class="collage-fig">
            <img class="fig-fit" src="https://picsum.photos/200/200?image=113" alt="">
            <figcaption class="collage-fig-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</figcaption>
        </figure>
    </div>
    <div class="collage-item"><img class="fig-fit" src="https://picsum.photos/200/200?image=10" alt=""></div>
    <div class="collage-item collage-item-big">
        <figure class="collage-fig">
            <img class="fig-fit" src="https://picsum.photos/400/400?image=11" alt="">
            <figcaption class="collage-fig-caption visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</figcaption>
        </figure>
    </div>
    <div class="collage-item"><img class="fig-fit" src="https://picsum.photos/200/200?image=13" alt=""></div>
    <div class="collage-item collage-item-wide">
        <figure class="collage-fig">
            <img class="fig-fit" src="https://picsum.photos/400/400?image=15" alt="">
            <figcaption class="collage-fig-caption visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</figcaption>
        </figure>
    </div>
    <div class="collage-item collage-item-tall"><img class="fig-fit" src="https://picsum.photos/200/400?image=18" alt=""></div>
    <div class="collage-item"><img class="fig-fit" src="https://picsum.photos/200/200?image=14" alt=""></div>
    <div class="collage-item"><img class="fig-fit" src="https://picsum.photos/200/200?image=16" alt=""></div>
    <div class="collage-item"><img class="fig-fit" src="https://picsum.photos/200/200?image=17" alt=""></div>
    <div class="collage-item"><img class="fig-fit" src="https://picsum.photos/200/200?image=19" alt=""></div>
    <div class="collage-item"><img class="fig-fit" src="https://picsum.photos/200/200?image=110" alt=""></div>
    <div class="collage-item"><img class="fig-fit" src="https://picsum.photos/200/200?image=111" alt=""></div>
    <div class="collage-item"><img class="fig-fit" src="https://picsum.photos/200/200?image=112" alt=""></div>
</section>

Three different class name for collage item collage-item-big, collage-item-wide, collage-item-tall. If you don't need figure caption then use simple img tag.

Small gap

<section class="collage collage-small-gap"></section>

No gap

<section class="collage collage-no-gap"></section>

Large gap

<section class="collage collage-large-gap"></section>

SASS

Reference from _collage.scss

$collage-item-default-width: rem(200) !default;
$collage-item-default-height: rem(200) !default;
$collage-item-default-gap: rem(10) !default;
$collage-item-small-gap: rem(1) !default;
$collage-item-large-gap: rem(20) !default;
$collage-caption-background: map-get($colors, black) !default;
$collage-caption-color: map-get($colors, white) !default;