Syntax error Vertically align the entire grid inside the container with CSS

Vertically align the entire grid inside the container with CSS

You can try to run the following code to vertically align the grid using the align-content property −

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: gray;
            align-content: center;
            padding: 20px;
            grid-gap: 20px;
         }
         .container > div {
            background-color: orange;
            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-07-03T08:04:37+05:30

136 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements