CSS Grid Lines

CSSWeb DevelopmentFront End Technology

Grid Lines are columns lines and row lines.

Columns lines are the lines between columns and row lines between rows.

The following is an example of grid lines


Live Demo

<!DOCTYPE html>
         .container {
            display: grid;
            background-color: green;
            grid-template-columns: auto auto;
            padding: 20px;
            grid-gap: 20px;
         .container > div {
            background-color: orange;
            border: 2px solid gray;
            padding: 35px;
            font-size: 30px;
            text-align: center;
         .ele1 {
            grid-row-start: 1;
            grid-row-end: 6;
      <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>
Updated on 25-Jun-2020 07:18:15