DEV Community

Cover image for Grid :Layout
Rahul Raj
Rahul Raj

Posted on

Grid :Layout

Grid

If we want to display something in grid format in web page then we need to use grid property .

  • Grid is always related to parent element.
  • if we write display:grid to the parent element then all child elements becomes the parts of grid layout automatically .
  • Grid is related to 2D layout like row and columns .
  • we have grid-template-columns property to control number of columns & width of column in the grid & the property related to parent element .
  • We have also grid-template-rows property to control number of rows & width of rows in the grid & the property related to parent element .
  • if we want to give gap between 2 consecutive child elements then we have properties like gap , column-gap & row-gap;
  • column-gap :if we want to give gap between 2 - child elements with respect to column then we need to use column-gap property .Means the property give space in left to right direction.
  • row-gap :if we want to give gap between 2 - child elements with respect to row then we need to use row-gap property .Means the property give space in Top to Bottom direction.
  • gap:if we want to give gap between 2 - child elements with respect to row as well as column then we need to use row-gap property . Means it is combo of column-gap & row-gapproperties .

Grid Diagram

Grid Diagram showing no. of columns & rows

Parent Element Layout

Child Properties related to grid

  • grid-column : here we need to mention starting column line and ending column line .
    Eg : grid-column: staring-column-line / ending-column-line

  • grid-row : here we need to mention starting row line and ending row line .
    Eg : grid-row: staring-row-line / ending-row-line

column-line & row-line

Html code for Above Grid format 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="parent">
      <div id="div1" class="child">1</div>
      <div id="div2" class="child">2</div>
      <div id="div3" class="child">3</div>
      <div id="div4" class="child">4</div>
      <div id="div5" class="child">5</div>

  </div>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS code for Above Grid format 

body{
  height: 100vh;
}
#parent{
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows : 200px 200px 200px;
  background-color: red;
  gap:10px;
  max-width: max-content;
  max-height: max-content;
  padding:10px;
}
.child{
  background-color: green;
   display: flex;
   justify-content: center;
   align-items: center;
}

#div1{
  grid-column: 1 /3;
  grid-row:1/2;
}
#div2{
  grid-column: 1 /2;
  grid-row:2/4;

}

#div3{
  grid-column:3/4;
  grid-row:1/3;
}
#div4{
  grid-column: 2/3;
  grid-row:2/3
}

#div5{
  grid-column:2/4;
  grid-row:3/4;
}
Enter fullscreen mode Exit fullscreen mode

Some other layout

more layout Example

Top comments (0)