HTML & CSS
/Intermediate
Grid Container
Definition
By setting `display: grid` on an element, it becomes a grid container. It provides a 2-Dimensional layout system, allowing you to define explicit rows and columns.
Explain Like I'm New
Flexbox is 1-Dimensional (great for a single row of buttons). CSS Grid is 2-Dimensional (great for the entire layout of a webpage). You set `display: grid`, and then you literally draw a map of columns and rows, and tell your elements which 'cell' they should sit in.
Real World Example
Building a standard web app layout: Header spans the top, Sidebar on the left, Main content in the middle, and Footer at the bottom. Grid handles this beautifully in 5 lines of code.
Common Use Cases
- •Complex full-page layouts
- •Photo galleries with varied image sizes
Interactive Example
Interview Questions
basic
- What property turns a div into a Grid Container?
intermediate
- What is a 'fractional unit' (`fr`) in CSS Grid?