<h1>Grid Example</h1>

 <body id="pagename">
  <div class = "grid-container">
   <div class="grid-item grid-item-1">Grid Item 1 - sales is made up of smelly woppers </div>
   <div class="grid-item grid-item-2">Grid Item 2</div>
   <div class="grid-item grid-item-3">Grid Item 3</div>
    <div class="grid-item grid-item-4">Grid Item 4</div>
    <div class="grid-item grid-item-5">Grid Item 5</div>
  </div>
 </body>




.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-auto-rows: 150px;
  grid-auto-rows: minmax (150px, auto);
  background-color: white;
  grid-row-gap: 20px;
  grid-column-gap:10px;
  justify-content: space-evenly;
  align-content: center;
  
}

.grid-item {
  background: green;
   text-align: center;
}


body#pagename {
   margin-top:20px;
  background-color: grey;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.