<html lang="en">
<head>
    <link rel="stylesheet" href="Grid.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid</title>
</head>
<body>
    


   <Div class="Tests">
       <div class="box box1">Box one,Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sint!</div>
       <div class="box box2">BOX two, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, accusamus.</div>
       <div class="box box3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, delectus?</div>
       <div class="box box4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, cum?</div>
       <div class="box box5">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa, beatae!</div>
   </Div>



    
</body>
</html>
.Tests {
    display:grid;
    margin: 10px;
    background-color: white;
    grid-template-columns: repeat(3,150px) ;
    grid-template-rows:repeat(3,150px) ;
    grid-template-areas: "box1 box1 box1"
                                     ;
    grid-gap: 10px;
    
}

.box{
   
    background-color: aqua;
}

.box1{
    grid-area: box1;
}

.box2{
   
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.