CSS Grid: Important Terminology

A  powerful tool called CSS grid can be used to lay out entire web pages. Whereas Flexbox is mostly useful for positioning items in a one-dimensional layout, CSS grid is most useful for two-dimensional layouts, providing many tools for aligning and moving elements across both rows and columns.

Grid container

The direct parent of all the grid items. To declare a grid container we have to use display: grid; If we want to convert an HTML element into a grid container, then we have to call …

display: grid  // for block-level grid 
display: inline-grid  //  for inline-level grid

Example

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

Grid items

The children ( i.e; direct descendants ) of the grid container.

Example

Here item elements are the grid items but the sub-item is not the grid item.

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

NoteBook

float, display: inline-block, display: table-cell, vertical-align, and column-* properties have no effect on a grid item.

Grid columns

The vertical lines of grid items are called columns.

Grid rows

The horizontal lines of the grid items are called grid rows.

Grid cell

The space between two adjacent row grid lines and two adjacent column grid lines. Here are the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.

Grid Area:

The total area is surrounded by four grid lines. A grid area may be composed of any number of grid cells.

Grid Track:

The space between two adjacent grid lines. We think of two-column grid lines or row grid lines.

Grid lines

The line between columns is called column lines.

The line between rows is called row lines.

Grid gaps

The spaces between each column/row are called gaps.

Next Post