In the course of Fullstack Web Development,pw skills mentors taught us about grid and give homework to research about grid-template-areas and make a mini project using grids with images.I am glad to share that I completed this project successfully.And I want to share mini project with the community.
So ,here is the code of html part :-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Photo Album</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1><em>My photos</em></h1>
<div class="container">
<div class="box box1"><img src="pexels-photo-13461077.jpeg" alt="">
<p>life</p></div>
<div class="box box2"><img src="pexels-photo-14726376.jpeg" alt="">
<p>quote</p></div>
<div class="box box3"><img src="pexels-photo-14851012.jpeg" alt="">
<p>
light
</p></div>
<div class="box box4"><img src="pexels-photo-15072642.jpeg" alt="">
<p>ola</p></div>
<div class="box box5"><img src="pexels-photo-5461549.jpeg" alt="">
<p>divine</p></div>
<div class="box box6"><img src="pexels-photo-6510411.jpeg" alt="">
<p>
snow
</p></div>
<div class="box box7"><img src="pexels-photo-7500307.jpeg" alt="">
<p>rain</p></div>
<div class="box box8"><img src="pexels-photo-9074921.jpeg" alt=""><p>kniw</p></div>
</div>
</body>
</html>
Here is code for the CSS part :-
body{
background-color: aquamarine;
}
.container{
display:grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
gap: 20px 30px;
justify-items: center;
border-top: 2px solid maroon;
}
h1>em{ background-color: hotpink;
color:black;
border:2px solid blue;
}
.box{
height: 200px;
width: 200px;
margin: 80px;
padding: 50px;
}
img{
width:200px;
height: auto;
}