CSS Grid/CSS-grid-area.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Area</title>
    <style>
        .wrapper>div{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .wrapper {
  display: grid;
  grid-gap: 2px;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: 150px 150px 150px 150px;
  grid-template-areas: 
    "a a b b"
    "a a b b"
    "d d c c"    
    "d d c c"   
   ;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3{
    grid-area: c;
}
.item4{
    grid-area:d;
}


/* .wrapper>div:nth-child(1){
    background: darkgoldenrod;
}
.wrapper>div:nth-child(2){
    background: rgb(11, 184, 40);
}
.wrapper>div:nth-child(3){
    background: sandybrown;
}
.wrapper>div:nth-child(4){
    background: crimson;
} */
div>img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="item1"><img src="img/html.jpg" alt=""></div>
        <div class="item2"><img src="img/css.jpg" alt=""></div>
        <div class="item3"><img src="img/JS.jpg" alt=""></div>
        <div class="item4"><img src="img/vscode.png" alt=""></div>
     </div>
</body>
</html>