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/zh-cn/glossary/grid_lines/index.html | 177 +++++++++++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 files/zh-cn/glossary/grid_lines/index.html (limited to 'files/zh-cn/glossary/grid_lines') diff --git a/files/zh-cn/glossary/grid_lines/index.html b/files/zh-cn/glossary/grid_lines/index.html new file mode 100644 index 0000000000..dd3d054500 --- /dev/null +++ b/files/zh-cn/glossary/grid_lines/index.html @@ -0,0 +1,177 @@ +--- +title: Grid Lines +slug: Glossary/Grid_Lines +tags: + - CSS Grids +translation_of: Glossary/Grid_Lines +--- +

使用Grid布局在显式网格中定义{{glossary("Grid tracks", "轨道")}}的同时会创建网格线。在下面的例子中，有一个三列两行的网格。它给了我们4条列线和3条行线。

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px 100px;
+}
+
+ +

{{ EmbedLiveSample('example_1', '500', '250') }}

+ +

网格线可以用它们的编号来寻址。在从左到右的语言比如英语中，列线1将位于网格的左侧，行线1将位于其顶部。线编号遵循文档的写入模式，因此在从右到左的语言中，列线1行将位于网格的右侧。下面的图片展示了该网格的线编号，假设语言是从左到右的。

+ +

Diagram showing the grid with lines numbered.

+
+ +

当创建隐式轨道去支持显式网格外的内容时，网格线也会在隐式网格中被创建，但是这些网格线不能通过编号来寻址。

+ +

按网格线编号将项目放置到网格上

+ +

创建一个网格后，可以通过网格线编号将项目放置到该网格上。在下面的例子中，项目定位从列线1到列线3，从行线1到行线3。

+ +
+ + +
<div class="wrapper">
+   <div class="item">Item</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px 100px;
+}
+.item {
+  grid-column-start: 1;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+ +

{{ EmbedLiveSample('example_2', '500', '250') }}

+
+ +

命名网格线

+ +

在显式网格中创建的网格线可以被命名，在轨道大小信息之前或之后的方括号中命名。当放置一个项目时，你可以使用这些名称代替编号，如下所示。

+ +
+ + +
<div class="wrapper">
+   <div class="item">Item</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
+  grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
+}
+.item {
+  grid-column-start: col1-start;
+  grid-column-end: col3-start;
+  grid-row-start: row1-start;
+  grid-row-end: rows-end;
+}
+
+ +

{{ EmbedLiveSample('example_3', '500', '250') }}

+
+ +

了解更多

+ +

属性参考

+ + + +

扩展阅读

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