---
title: Grid container
slug: Glossary/Grid_Container
tags:
  - CSS
  - 术语
  - 网格
translation_of: Glossary/Grid_Container
---
<p>通过设置CSS属性 <code>display:grid;</code> 或 <code>display:inline-grid;</code> 可以将一个元素定义为<strong>网格容器</strong>(<strong>grid container</strong>)，并且它的所有直接子元素都会成为网格项。</p>

<p>网格容器会创建一个<strong>网格化环境</strong>(<strong>grid firmatting context</strong>) 。它的直接子元素通过定义 {{cssxref("grid-template-columns")}} 和 {{cssxref("grid-template-rows")}} 属性可以将自己变为<em>显式网格</em>，当某个元素不在显示网格内时，它就会变为<em>隐式网格</em>。</p>

<h2 id="了解更过">了解更过</h2>

<h3 id="属性参考">属性参考</h3>

<ul>
 <li>{{cssxref("grid-template-columns")}}</li>
 <li>{{cssxref("grid-template-rows")}}</li>
 <li>{{cssxref("grid-auto-columns")}}</li>
 <li>{{cssxref("grid-auto-rows")}}</li>
 <li>{{cssxref("grid")}}</li>
 <li>{{cssxref("grid-template")}}</li>
</ul>

<h3 id="扩展阅读">扩展阅读</h3>

<ul>
 <li>CSS 网格布局: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">网格布局基本概念</a></em></li>
</ul>