Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="grid1.css">
</head>
<body>
    <!-- div#container>div#grid-items${grid-boxes}*4 -->

      <div id="container">
        <div id="grid-items1">grid-boxes</div>
        <div id="grid-items2">grid-boxes</div>
        <div id="grid-items3">grid-boxes</div>
        <div id="grid-items4">grid-boxes</div>
      </div>
</body>
</html>


#container{
    height: 600px;
    width: 800px;
    background-color: black;
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 150px 100px;
    /* column-gap: 40px;
    row-gap: 10px; */
    gap: 40px 40px;

}
#grid-items1{
    height: 100px;
    width: 100%;
    background-color: hotpink;
    border: 2px solid aqua;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

#grid-items2{
    height: 100px;
    width: 100px;
    background-color:goldenrod;
     border: 2px solid aqua;
}

#grid-items3{
    height: 100px;
    width: 100px;
    background-color:red;
     border: 2px solid aqua;
}

#grid-items4{
    height: 100px;
    width: 100%;
    background-color:rgb(32, 218, 97);
     border: 2px solid aqua;
     grid-column-start: 1;
     grid-column-end: 3;
     grid-row-start: 3;
     grid-row-end: 4;
}
Editor is loading...