<html>
<head>
<link rel="stylesheet" href="five.css">
</head>
<body>
<div class="wrapper">
<div class="box1"> <a href="https://en.wikipedia.org/wiki/Bjarne_Stroustrup"><img src="c++.jpg"></a> </div>
<div class="box2"> <a href="https://www.britannica.com/biography/Dennis-M-Ritchie"><img src="den.jpg"></a> </div>
<div class="box3"> <a href="https://en.wikipedia.org/wiki/James_Gosling"><img src="java.jpg"></a> </div>
<div class="box4"> <a href="https://en.wikipedia.org/wiki/Guido_van_Rossum"><img src="pyton.jpg"></a> </div>
<div class="box5"> <a href="https://en.wikipedia.org/wiki/Linus_Torvalds"><img src="tov.jpeg"></a> </div>
</div>
</body>
</html>style:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 50px;
gap: 10px;
}
.box1 {
grid-column: 1;
grid-row: 1;
}
.box2 {
grid-column: 1;
grid-row: 3 ;
}
.box3 {
grid-row: 2;
grid-column: 2;
}
.box4 {
grid-row: 1;
grid-column: 3;
}
.box5 {
grid-row: 3;
grid-column: 3;
}output:
change row 3 as 4:
.box2 {
grid-column: 1;
grid-row: 4 ;
}output:
sankaa 
Leave a comment