Image Gallery Practice

by rulin shyu

HTML

<div class="gallery">
    <div class="img-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg" />
    </div>
    <div class="img-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg" />
    </div>
    <div class="img-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg" />
    </div>
    <div class="img-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-4.jpg" />
    </div>
    <div class="img-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-5.jpg" />
    </div>
</div>

<p>Forked from <a href="http://codepen.io/dudleystorey/pen/Kgofa">http://codepen.io/dudleystorey/pen/Kgofa</a></p>

SCSS

.gallery {
    display: flex;
    margin: 5px 0;
    flex-wrap: wrap;
}

.img-container {
    width: 200px;
    flex-grow: 1;
    margin: 5px;
}



body {
    color: #fff;
    background: #333;
}

p {
    margin: 10px;
}

img {
    display: block;
    width: 100%;
}

a {
    color: #fff;
    line-height: 1.5;
}