.dashboard { display: grid; }The direct panels enter the same Grid context.
LESSON 61 OF 100
Create your first Grid container
Enable a two-dimensional layout system for a group of panels.
STEP 1 · LEARN
How it works
display: grid turns an element into a Grid container. Direct children become Grid items that can be placed in rows and columns without changing semantic HTML order.
.dashboard { display: block; }block keeps normal flow and does not create Grid rows or columns.
STEP 2 · APPLY
Your exercise
Turn .dashboard into a Grid container.
index.htmlCSS
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK
What needs to pass
0%not checked
- ○The dashboard uses display: grid.
- ○The target element is present in the page.
Explain the solution logic
The display property defines the layout model, and grid activates the grid’s two dimensions.