Syntax error How to display columns and rows using named CSS grid items

How to display columns and rows using named CSS grid items

To display columns and rows using named CSS, use the grid-area property, with the grid-template-areas property

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: green;
            grid-template-areas: 'demo demo . . .' 'demo demo . . .';
            padding: 20px;
            grid-gap: 10px;
         }
         .container > div {
            background-color: orange;
            text-align: center;
            padding: 10px 0;
            font-size: 20px;
         }
         .ele1 {
            grid-area: demo;
         }
      </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-25T08:57:51+05:30

153 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements