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
First time visiting your website, I love your blog!
Thanks, check out other posts as well.
tҺe website іѕ really good, I love your web site!