Photo Gallery Grid

index.html

<div class="container">
    <!-- Header Section -->
    <header class="header">
        <div class="bg-head">
            <h4>Photo Gallery Grid</h4>
            <h2>Beautiful</br> Dogs</h2>
        </div>
    </header>

    <!-- Grid Photo Main Section -->
    <main class="main grid">
        <div class="box_holder">
            <div class="bg-pattern">
                <span><h3>01</h3></span>
                <h1>G</h1>
            </div>
        </div>
        <div class="box-filter box_holder">
            <img src="https://images.unsplash.com/photo-1544568100-847a948585b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="img 01">
        </div>
        <div class="box-filter box_holder">
            <img src='https://images.unsplash.com/photo-1517423440428-a5a00ad493e8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='img 02'>
        </div>
        <div class="box-filter box_holder">
            <img src='https://images.unsplash.com/photo-1510771463146-e89e6e86560e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='img 03'>
        </div>
      
        <div class="box_holder">
            <div class="bg-pattern">
                <span><h3>02</h3></span>
                <h1>R</h1>
            </div>
        </div>
        <div class="box-filter box_holder">
            <img src='https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='img 04'>
        </div>
        <div class="box-filter box_holder">
            <img src='https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='img 05'>
        </div>
        <div class="box-filter box_holder">
            <img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='img 06'>
        </div>
      
        <div class="box_holder">
            <div class="bg-pattern">
                <span><h3>03</h3></span>
                <h1>I</h1>
            </div>
        </div>
        <div class="box-filter box_holder">
            <img src='https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='img 07'>
        </div>
        
      <div class="box-filter box_holder">
            <img src='https://images.unsplash.com/photo-1518717758536-85ae29035b6d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='img 08'>
        </div>
      <div class="box-filter box_holder">
            <img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='img 09'>
        </div>
      
        <div class="box_holder">
            <div class="bg-pattern">
                <span><h3>04</h3></span>
                <h1>D</h1>
            </div>
        </div>
        <div class="box-filter box_holder">
            <img src='https://images.unsplash.com/photo-1504595403659-9088ce801e29?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='img 10'>
        </div>
        
        </main>
</div>

photo-gallery-grid.markdown

Photo Gallery Grid

A bunch of arbitrary photos together in a layout can be a tricky thing to handle. Photos tend to be of different dimensions and aspect ratios. Laying them out next to each other in an appealing way can be tricky. This week, let's explore interesting ways to build a photo grid. #codepenchallenge

A Pen by Mohamed Sebaa on CodePen.

License.

style.scss

/*-- fonts family --*/
$Eb-font: 'EB Garamond', serif;
$Rb-font: 'Roboto', sans-serif;

/*-- fonts size --*/
$pat-size: 12.5rem;
$nbr-size: 3.75rem;
$head-size: 5rem;
$slg-size: 2rem;

/*-- colors --*/
$white: #ffffff;
$blueish: #0044FF;
$light-gray: #CFCFCF;

/*-- Timming --*/
$cubic-bezier: cubic-bezier(1,-0.52,.19,1.2);

/*-- General Styling --*/
.grid {
    display: grid;
}
img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.box_holder {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border: 5px solid $white;
    min-height: 360px;
    height: 360px;
    min-width: 360px;
    overflow: hidden;
    img {
        transition-delay: 1s;
        transition: transform 1s $cubic-bezier;  
    }
    &:hover img {
        transform: scale(1.2);
    }
    
}
.box-filter {
    position: relative;
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: $blueish;
        mix-blend-mode: overlay;
        transition: bottom 1s $cubic-bezier;
    }
    &:hover:after {
        bottom: 100%;
    }
}
.bg-pattern {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    min-height: 360px;
    width: 100%;
    margin: 0 auto;
}
h1,
h2 {
    font-family: $Eb-font;
    font-weight: 700;
    color: $light-gray;
}
h1 {
    font-size: $pat-size;
}
h2 {
    font-size: $head-size; 
    line-height: 4.5rem;
}
h3 {
    font-family: $Eb-font;
    font-weight: 700;
    font-size: $nbr-size;
    color: $blueish;
}
h4 {
    font-family: $Rb-font;
    font-weight: 400;
    font-size: $slg-size;
    color: $white;
}
/*-- custom Style --*/
*,
*::after,
*::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}
.container {
    max-width: 1120px;
    padding: 0 20px;
    min-width: 1120px;
    margin: 0 auto;
}
/*-- header Styling --*/
.header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0 5px;
    width: 100%;

    .bg-head {
        display: flex;
        flex-flow: column;
        justify-content: center;
        min-height: 350px;
        width: 350px;
        background-color: $blueish;

        h4, h2 {
            transform: translateX(96px);
        }
    }
}

/*-- main Styling --*/
main.main {
    grid-template-columns: repeat(3, 1fr);
    padding-bottom: 60px;
    .bg-pattern {
        position: relative;
        span {
            position: absolute;
            z-index: 10;
            top: 0;
            left: 0;
            display: block;
            padding: 5px;
        }
    }
}
/*-- For screens less than 1135px --*/
@media (max-width: 1135px ) {
    .container {
        min-width: 760px;
        width: 100%;
        margin: 0 auto;
    }
    main.main {
        width: 100%;
        grid-template-columns: repeat(2, 1fr); 
    }
}
/*-- For screens less than 780px --*/
@media (max-width: 780px ) {
    .container {
        min-width: 360px;
        width: 460px;
        margin: 0 auto;
    }
    .header {
        .bg-head {
            width: 100%;
            border: 5px solid $white;

            h4, h2 {
                transform: translateX(10px);
            }
        }
    }
    main.main {
        width: 100%;
        grid-template-columns: 1fr; 
        justify-content: center;
    }
}
/*-- For screens less than 460px --*/
@media (max-width: 500px ) {
    .container {
        min-width: 360px;
        width: 100%;
    }
    .header, .main {
        width: 100%;
        min-width: 360px;
    }
}
/*-- For screens less than 400px --*/
@media (max-width: 400px ) {
    /*-- font size --*/
    $head-sml-size: 4rem;
    $slg-sml-size: 1.25rem;
    .container {
        min-width: 300px;
        width: 100%;
    }
    .header {
        width: 100%;
        min-width: 300px;
        .bg-head {
            width: 100%;
            height: 300px;
        }

        h2 {
            font-size: $head-sml-size;
        }
        h4 {
            font-size: $slg-sml-size;
        }
    }
    main.main {
        width: 100%;
        min-width: 300px;
        height: 300px;

        .box_holder {
            min-width: 300px;
            height: 300px;
            min-height: 300px;
        }
        .bg-pattern {
            min-width: 300px;
            height: 300px;
            min-height: 300px;
        }
    }
}