blob: 23e20bb96f45771b4ee81e54345d9697145b442a (
plain)
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
27
28
29
30
31
|
---
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>
|
