From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/glossary/grid/index.html | 75 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 files/ja/glossary/grid/index.html (limited to 'files/ja/glossary/grid/index.html') diff --git a/files/ja/glossary/grid/index.html b/files/ja/glossary/grid/index.html new file mode 100644 index 0000000000..602be55cf9 --- /dev/null +++ b/files/ja/glossary/grid/index.html @@ -0,0 +1,75 @@ +--- +title: Grid (グリッド) +slug: Glossary/Grid +tags: + - CSS + - CSS Grid + - CSS グリッド + - Glossary + - 用語集 +translation_of: Glossary/Grid +--- +

CSS グリッド は {{cssxref("display")}} プロパティの値に grid を指定して定義します。グリッドの列や行は {{cssxref("grid-template-rows")}} や {{cssxref("grid-template-columns")}} プロパティで定義します。

+ +

これらのプロパティを使って定義したグリッドのことを 明示的グリッド (explicit grid) と呼びます。

+ +

明示的グリッドの外にコンテンツを配置する場合や、自動配置に任せる場合、{{glossary("grid item", "グリッドアイテム")}} が収まるように行や列の {{glossary("grid tracks", "グリッドトラック")}} がグリッドアルゴリズムに従って暗黙的に追加されます。暗黙的グリッド (implicit grid) は、定義済みのトラックの外部にコンテンツを配置するため自動的に作成されるグリッドです。

+ +

次の例では 3 列 2 行の明示的グリッドを作成しています。グリッドで 3 つ目の行は、明示的グリッドが定義している 6 つ以上のアイテムが含まれていることで作られた、暗黙的グリッドによる行トラックです。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 100px 100px;
+}
+
+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('example', '500', '330') }}

+ + -- cgit v1.2.3-54-g00ecf