Basic Concept
Have you ever wanted to separate elements orderly with smooth visual presentation? You totally can with CSS Grid Layout! This is a useful tool a designer would love. We could change the location of page elements and not need to change an already structured document just to fit the design of your layout.
When using Grid Layout, it allows us to structure grids described in CSS with minimal HTML. It uses Media Queries to help us create layouts that adapt to different contexts.
The grid adapts to the available space very easily with each element having it's own space within it. Because of this, text doesn't overlap no matter the context, like size change, more content, small viewports, and etc.
If need be, grid items can overlap another if required.
Terminology
Grid Lines - the horizontal and vertical lines the grid is made up by (they could be refered by numbers, or names).
Grid Tracks - the space between two grid lines that parallel to each other.
Grid Cell - the space between two sets of parallel grid lines intersecting (and this is the smallest, usable unit on our grids).
Grid Area - the space between two sets of parallel grid lines intersecting, but with numerous grid cells within.
Example
References & for More Information
Grid by ExampleWikipedia, the free encyclopedia
w3schools, the Word's Largest Web Developer Site