CSS — Part-10-Grid

• It is a two-dimensional grid-based layout system
• It makes it easier to design web pages without having to use floats and positioning.

Grid Container

• The element on which display: grid is applied. It’s the direct parent of all the grid items.

<div class="container">
   <div class="item item-1"> </div>
   <div class="item item-2"> </div>
 </div>

Grid Items

The children (i.e. direct descendants) of the grid container. Here the item elements are grid items, but sub-item isn’t.

<div class="container">
   <div class="item"> </div>
   <div class="item">
     <p class="sub-item"> </p>
   </div>
   <div class="item"> </div>
 </div>

Grid Lines , track and area

Lines — The dividing lines that make up the structure of the grid.

Track — The space between two adjacent grid lines

Cell — The space between two adjacent row and two adjacent column grid lines. It’s a single “unit” of the grid.

Area — The total space surrounded by four grid lines

Grid Container Properties-

1. display : grid | inline-grid

• grid – generates a…