Align the grid inside the container using CSS

CSS Web Development Front End Technology

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

Example

<!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>

Daniol Thomas

Updated on 24-Jun-2020 08:37:31

Previous Page Print Page Next Page