/
index.md
26 lines (18 loc) · 1.01 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
---
title: Grid container
slug: Glossary/Grid_Container
page-type: glossary-definition
---
{{GlossarySidebar}}
Using the value `grid` or `inline-grid` on an element turns it into a **grid container** using [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout), and any direct children of this element become grid items.
When an element becomes a grid container it establishes a **grid formatting context**. The direct children can now lay themselves out on any explicit grid defined using {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}}, or on the _implicit grid_ created when an item is placed outside of the _explicit grid_.
## See also
### Property reference
- {{cssxref("grid-template-columns")}}
- {{cssxref("grid-template-rows")}}
- {{cssxref("grid-auto-columns")}}
- {{cssxref("grid-auto-rows")}}
- {{cssxref("grid")}}
- {{cssxref("grid-template")}}
### Further reading
- CSS Grid Layout guide: _[Basic concepts of grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout)_