Introduction to CSS Grid Layout
What is grid layout?
Grid is a 2D System: Its core strength lies in its ability to control layout across both horizontal and vertical axes simultaneously, making it ideal for complex page structures and major sections.
CSS Grid is introduced as “a powerful two-dimensional layout system” for arranging items in both rows and columns. This contrasts directly with Flexbox, which is a one-dimensional system.
Fundamental Components:
|
Component |
Description |
Analogy in Flexbox |
|
Grid Container |
The parent element on which display: grid is declared. It contains the grid layout. |
Flex Container |
|
Grid Items |
The direct children of the Grid Container. They are the elements being arranged by the grid. |
Flex Items |