---
title: Grid container
slug: Glossary/grid_container
tags:
  - CSS
  - Glossary
  - grid
translation_of: Glossary/Grid_Container
---
<p>要素に <code>grid</code> または <code>inline-grid</code> を使用すると、<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウ</a>ト の<strong>グリッドコンテナー</strong>になります。そして直下の子要素はグリッドアイテムになります。</p>

<p>要素がグリッドコンテナーになると、<strong>グリッド整形文脈</strong>を形成します。グリッドコンテナー直下の子要素は、{{cssxref("grid-template-columns")}} や {{cssxref("grid-template-rows")}}を使って明示的に定義されたグリッドや、明示的に定義されたグリッドの外側に置かれた時には暗黙的に形成されるグリッドに沿って、配置されます。</p>

<p> </p>

<h2 id="Learn_more" name="Learn_more">関連項目</h2>

<h3 id="Property_reference" name="Property_reference">プロパティリファレンス</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="Further_reading" name="Further_reading">さらなる文書</h3>

<ul>
 <li>CSS Grid レイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></em></li>
</ul>