css grid layout

In this post, you will learn how to create a masonry grid layout using CSS grid. You will understand the concept by creating a simple masonry grid layout.

Here’s what we are creating:

HTML (Masonry Grid Layout)

<html>

<head>
    <meta charset="UTF-8">
    <title>Grid Layout</title>
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule="" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<!-- Body Starting... -->

<body>
    <div class="container">
        <div class="box">
            <div class="content">
                <div class="img">
                    <ion-icon name="car-sport-outline"></ion-icon>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="img">
                    <ion-icon name="bicycle-outline"></ion-icon>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="img">
                    <ion-icon name="train-outline"></ion-icon>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="img">
                    <ion-icon name="airplane-outline"></ion-icon>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="img">
                    <ion-icon name="man-outline"></ion-icon>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="img">
                    <ion-icon name="thunderstorm-outline"></ion-icon>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <ion-icon name="partly-sunny-outline"></ion-icon>
            </div>
        </div>
        <div class="box">
            <div class="content">
               <ion-icon name="flame-outline"></ion-icon>
            </div>
        </div>
    </div>
</body>
<!-- Body Ending.... -->

</html>

CSS (Masonry Grid Layout)

/*general css*/
* {
    margin: 0;
    padding: 0;
}
ion-icon{
    height: 40px;
    width: 35px;
    color: white;

}
body {
    height: 100vh;
    background-color: #888A85;
    display: flex;
    justify-content: center;
    align-self: center;
}
.container{
    position: relative;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,2fr));
    grid-template-rows: minmax(300px,auto);
    margin: 40px;
    grid-gap: 10px;
}
.container .box{
    background: black;
    padding: 25px;
    display: grid;
    transition: 0.6s;
      border-radius: 10px;
}
.container .box:nth-child(1)
{
    grid-column: span 2;
    grid-row: span 1;
}.container .box:nth-child(4)
{
    grid-column: span 3;
    grid-row: span 1;
}
container .box:nth-child(8)
{
    grid-column: span 2;
    grid-row: span 9;
}

Thanks for reading my article. Also check out javascript password generator

Related Posts