Summary  
This chapter explains how applying `display: grid` to an element turns it into a grid container whose immediate children become grid items, enabling precise two-dimensional layouts through rows and columns.

General domain of usage  
Web page layout design

## Grid Containers and Grid Items: The Foundation of CSS Grid

CSS Grid revolutionizes web layout by introducing a powerful system for creating two-dimensional designs. At its core, CSS Grid relies on two essential concepts: the **grid container** and **grid items**.

- A **grid container** is any element to which you apply grid-related CSS properties, transforming it into the parent context for a grid layout;
- The immediate children of this container automatically become **grid items**, each participating in the grid structure.

This foundational relationship allows you to organize content into rows and columns with precise control, making complex layouts straightforward to implement.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogIDx0aXRsZT5TaW1wbGUgR3JpZCBFeGFtcGxlPC90aXRsZT4KICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9InN0eWxlcy5jc3MiPgogIDwvaGVhZD4KPGJvZHk+CiAgPGRpdiBjbGFzcz0iZ3JpZC1jb250YWluZXIiPgogICAgPGRpdiBjbGFzcz0iZ3JpZC1pdGVtIj5JdGVtIDE8L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImdyaWQtaXRlbSI+SXRlbSAyPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJncmlkLWl0ZW0iPkl0ZW0gMzwvZGl2PgogIDwvZGl2Pgo8L2JvZHk+CjwvaHRtbD4=

LmdyaWQtY29udGFpbmVyIHsKICBkaXNwbGF5OiBncmlkOwogIGJvcmRlcjogMnB4IHNvbGlkICMzMzM7CiAgcGFkZGluZzogMTBweDsKfQoKLmdyaWQtaXRlbSB7CiAgYmFja2dyb3VuZDogI2UwZTBlMDsKICBib3JkZXI6IDFweCBzb2xpZCAjOTk5OwogIHBhZGRpbmc6IDIwcHg7CiAgZm9udC1zaXplOiAxLjJlbTsKfQ==

## The Role of `display: grid` in CSS Grid

The key property that activates grid layout is `display: grid`. When you assign `display: grid` to an element, it becomes a **grid container**, establishing a new grid formatting context. This means that the browser will treat its **direct children** as **grid items**, organizing them according to the grid rules you define.

- Only the immediate children of the grid container participate as grid items;
- Nested elements deeper in the DOM do not become grid items unless their parent is also a grid container.

This clear separation of **container** and **items** is the foundation for building flexible, responsive layouts using CSS Grid.

Which statement best describes the relationship between a grid container and grid items in CSS Grid?

Explore the power of CSS Grid, the modern way to build flexible, responsive web layouts. Learn how to structure pages with rows, columns, and advanced grid features.

Introduce the core concepts of CSS Grid, including grid containers, items, and the essential properties for creating two-dimensional layouts.

Delve into explicit item placement, spanning, and sizing strategies to create more complex and flexible layouts.

Unlock the full power of CSS Grid with advanced features like named areas, subgrids, and layering.

Apply everything learned to build robust, responsive layouts suitable for real-world projects.

Understanding Grid Containers and Items

Grid Containers and Grid Items: The Foundation of CSS Grid

The Role of display: grid in CSS Grid

The Role of `display: grid` in CSS Grid