css – work

<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:

Leave a comment

Design a site like this with WordPress.com
Get started