Syntax error Align the grid inside the container using CSS

Align the grid inside the container using CSS

You can try to run the following code to align the grid inside the container using the justify-content property:

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: gray;
            grid-template-rows: 120px 90px 100px;
            justify-content: space-evenly;
            padding: 20px;
            grid-gap: 20px;
         }
         .container > div {
            background-color: yellow;
            border: 2px solid gray;
            padding: 35px;
            font-size: 30px;
            text-align: center;
         }
      </style>
   </head>
   <body>
      <h1>Game Board</h1>
      <div class = "container">
         <div class = "ele1">1</div>
         <div class = "ele2">2</div>
         <div class = "ele3">3</div>
         <div class = "ele4">4</div>
         <div class = "ele5">5</div>
         <div class = "ele6">6</div>
      </div>
   </body>
</html>
Updated on: 2020-06-24T08:37:31+05:30

120 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements