Responsive Masonry Grid Layout

SVNANGKORWAT 0 تعليقات

 HTML Code:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="masonry">
        <div class="item">
            <img src="images/img-1.jpg" alt="">
        </div>

        <div class="item">
            <img src="images/img-2.jpg" alt="">
        </div>

        <div class="item">
            <img src="images/img-3.jpg" alt="">
        </div>

        <div class="item">
            <img src="images/img-4.jpg" alt="">
        </div>

        <div class="item">
            <img src="images/img-5.jpg" alt="">
        </div>

        <div class="item">
            <img src="images/img-6.jpg" alt="">
        </div>

        <div class="item">
            <img src="images/img-7.jpg" alt="">
        </div>

        <div class="item">
            <img src="images/img-8.jpg" alt="">
        </div>

        <div class="item">
            <img src="images/img-9.jpg" alt="">
        </div>

        <div class="item">
            <img src="images/img-10.jpg" alt="">
        </div>

        <div class="item">
            <img src="images/img-11.jpg" alt="">
        </div>

        <div class="item">
            <img src="images/img-12.jpg" alt="">
        </div>
    </div>
</body>
</html>


CSS Code: 




body{
    margin: 0;
    background: #f2f2f2;
}

.masonry{
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 1rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    margin: 2.5em;
    padding: 0;
    font-size: .85em;
}

.item{
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    transition: 1s ease all;
    box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}

.item img{
    max-width: 100%;
}

@media only screen and (max-width: 320px){
    .masonry{
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 321px) and (max-width: 768px){
    .masonry{
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1200px){
    .masonry{
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 1201px){
    .masonry{
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}


Demo
Tags

Post a Comment

إرسال تعليق

أحدث أقدم