📄️ Basics of Grid Display
The display: grid; value in CSS enables the Grid Layout, a two-dimensional layout system that offers a more robust and controlled way to handle both rows and columns in your design.
📄️ Grid Container
The grid container in CSS Grid Layout serves as the foundation for creating a grid-based layout. It defines the grid structure and controls the layout of its immediate child elements, known as grid items.
📄️ Grid Alignment
In CSS Grid Layout, alignment and justification are key concepts that allow you to control the position of items within the grid container as well as the grid tracks themselves.
📄️ Grid Item
In CSS Grid Layout, a grid item is an element that is a direct child of a grid container. Grid items are placed into grid cells, which are defined by the grid lines of the grid container.
📄️ Grid Lines
In CSS Grid Layout, grid lines are the dividing lines that separate the grid into rows and columns. They are the foundational elements that define the structure of the grid, helping you place and align grid items.
📄️ Grid Tracks
The concept of "grid-tracks" is central to mastering CSS Grid, as it forms the building blocks of your grid layout.
📄️ Grid Cells
In CSS Grid Layout, a grid cell is the most basic unit of the grid. It is the intersection of a grid row and a grid column, forming a rectangular area where a single grid item can be placed.
📄️ Grid Areas
In CSS Grid Layout, a grid area is a rectangular space that consists of one or more contiguous grid cells. It is defined by the intersection of specific grid rows and grid columns. Grid areas provide a higher level of abstraction for layout design, allowing you to think in terms of larger blocks rather than individual cells.