Understanding the concept of Grid and its properties
What is Grid
CSS Grid is two-dimensional layout system, Which means it help us to positioning complex element in both row and column direction .
Grid Components
Grid lines - Grid lines are horizontal or vertical lines which forms square or rectangle in grid layouts , in other words these are lines which separates two grid items.
Grid Cells - In CSS, Grid Cells refers to individual unit of cell or space in grid layouts.
Grid Track - Gird Track is refers to the space between two adjacent grid lines, either horizontally (columns) or vertically (rows)
Grid Area - Grid Area is place in grid layout where grid items are placed, They are form by Grid lines .
Grid Container: The parent element, which is defined by setting
display: grid.Grid Items: The children of a grid container, which are placed into grid cells.
Grid Template Columns/Rows: Defines the number and size of columns and rows.
Grid Gap: Specifies the spacing between grid items.
Display Grid (on Parent Container)
When we want make a Container Grid then we have to use display grid property
This is how we define grid
Grid Template Columns/Rows: Defines the number and size of columns and rows.
Output
Properties on Grid items (Children)
.item1 {
grid-column-start: span 3; → This will span 3 columns.
}
.item2 {
grid-column-start: 4;→ This will start from 4th Grid line.
}
OUTPUT
Short Trick
Instead of writing grid-row-start , grid-row-end , grid-column-start , grid-column-end
we can use grid area to define all 4 properties in one line
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
Conclusion
CSS Grid can be thought of as a bento box for web layouts. Just like a bento box has compartments of different sizes to hold various foods, CSS Grid allows you to create a layout with different-sized "compartments" . This is often called bento grid