πŸ“‘

Grid

What is grid

grid It is a 2-dimensional system, meaning it can handle both columns and rows. after we aplliyg display:grid; and difinde the shep of grid usig grid-template-columns and grid-template-row on element, every sub element under him we can define any area on grid.

Item's Location

Determines a grid item’s location within the grid by referring to specific grid lines. grid-column-start/grid-row-start is the line where the item begins, and grid-column-end/grid-row-end is the line where the item ends.

examples

CodePen

youtube