diff options
Diffstat (limited to 'files/zh-tw/web/css/css_grid_layout/index.html')
| -rw-r--r-- | files/zh-tw/web/css/css_grid_layout/index.html | 252 |
1 files changed, 252 insertions, 0 deletions
diff --git a/files/zh-tw/web/css/css_grid_layout/index.html b/files/zh-tw/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..0fd5616848 --- /dev/null +++ b/files/zh-tw/web/css/css_grid_layout/index.html @@ -0,0 +1,252 @@ +--- +title: CSS格線布局 +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS + - 參考 + - 布局 + - 柵格 + - 示列 + - 網格布局 +translation_of: Web/CSS/CSS_Grid_Layout +--- +<p><strong>CSS 格線佈局</strong>長於把頁面的主要區域分離、或是在 HTML 原生語法構建的區域間，定義大小、位置、層次等方面的關聯。</p> + +<p>格線佈局使作者能夠對齊元素為行和列，就像表格一樣，。然而，格線佈局可以更輕易的達成比一般表格更多元化的排版。例如，一個網格容器的子元素可以定位自己和層重疊，類似於CSS定位元素。</p> + +<h2 id="Basic_Example" name="Basic_Example">基本示例</h2> + +<p>以下示例展示了一個三列軌道格線，其中創建的行數最小為 100 像素，最大為 auto。Items 已經使用基於線放置在網格的位置上。</p> + +<div id="example"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid rgb(233,171,88); + border-radius: 5px; + background-color: rgba(233,171,88,.5); + padding: 1em; + color: #d9480f; +}</pre> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="wrapper"> + <div class="one">One</div> + <div class="two">Two</div> + <div class="three">Three</div> + <div class="four">Four</div> + <div class="five">Five</div> + <div class="six">Six</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} +.one { + grid-column: 1 / 3; + grid-row: 1; +} +.two { + grid-column: 2 / 4; + grid-row: 1 / 3; +} +.three { + grid-row: 2 / 5; + grid-column: 1; +} +.four { + grid-column: 3; + grid-row: 3; +} +.five { + grid-column: 2; + grid-row: 4; +} +.six { + grid-column: 3; + grid-row: 4; +} +</pre> + +<p>{{ EmbedLiveSample('example', '500', '440') }}</p> +</div> + +<h2 id="參考">參考</h2> + +<h3 id="CSS_屬性">CSS 屬性</h3> + +<div class="index"> +<ul> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid-template-areas")}}</li> + <li>{{cssxref("grid-template")}}</li> + <li>{{cssxref("grid-auto-columns")}}</li> + <li>{{cssxref("grid-auto-rows")}}</li> + <li>{{cssxref("grid-auto-flow")}}</li> + <li>{{cssxref("grid")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row")}}</li> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-area")}}</li> + <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("grid-column-gap")}}</li> + <li>{{cssxref("grid-gap")}}</li> +</ul> +</div> + +<h3 id="CSS_函式">CSS 函式</h3> + +<div class="index"> +<ul> + <li>{{cssxref("repeat", "repeat()")}}</li> + <li>{{cssxref("minmax", "minmax()")}}</li> + <li>{{cssxref("fit-content", "fit-content()")}}</li> +</ul> +</div> + +<h3 id="CSS_資料型別">CSS 資料型別</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<flex>")}}</li> +</ul> +</div> + +<h3 id="詞匯表條目">詞匯表條目</h3> + +<div class="index"> +<ul> + <li><a href="/zh-TW/docs/Glossary/Grid">格線</a></li> + <li><a href="/zh-TW/docs/Glossary/Grid_Lines">網格線</a></li> + <li><a href="/zh-TW/docs/Glossary/Grid_Tracks">格線軌道</a></li> + <li><a href="/zh-TW/docs/Glossary/Grid_Cell">格線單元</a></li> + <li><a href="/zh-TW/docs/Glossary/Grid_Areas">格線區域</a></li> + <li><a href="/zh-TW/docs/Glossary/Gutters">間距</a></li> + <li><a href="/zh-TW/docs/Glossary/Grid_Axis">格線軸</a></li> + <li><a href="/zh-TW/docs/Glossary/Grid_Rows">格線行</a></li> + <li><a href="/zh-TW/docs/Glossary/Grid_Column">格線列</a></li> +</ul> +</div> + +<h2 id="指引">指引</h2> + +<div class="index"> +<ul> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">格線布局的基本概念</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">格線布局與其它布局的關係</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">使用指定的格線命名排版</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">格線模板區域</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">使用指定的網格線排版</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">在 CSS 自動放置格線布局</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">用 Box 對齊 CSS 格線布局</a></li> + <li><br> + <a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS 格線、邏輯值和寫作模式</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS 格線布局與無障礙</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS 格線與漸進增強</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">用 CSS 格線實做常見排版</a></li> +</ul> +</div> + +<h2 id="外部資源">外部資源</h2> + +<ul> + <li><a href="http://labs.jensimmons.com/">Jen Simmons 的示範</a></li> + <li><a href="http://gridbyexample.com/">格線示例：一些影片教學與使用範例</a></li> + <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops 格線參考</a></li> + <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li> + <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li> +</ul> + +<h2 id="規範">規範</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">格式</th> + <th scope="col">狀態</th> + <th scope="col">意見</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Grid') }}</td> + <td>{{ Spec2('CSS3 Grid') }}</td> + <td>初始定義</td> + </tr> + </tbody> +</table> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/zh-TW/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/zh-TW/docs/Web/CSS/Reference"><strong>CSS 參考</strong></a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout">CSS 格線布局</a></li> + <li data-default-state="open"><a href="#"><strong>參考</strong></a> + <ol> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">格線布局基本概念</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">與其他布局的關系</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">基於行展示的位置</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">格線模板區域</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">使用指定網格線布局</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">自動放置格線布局</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">格線布局中的框對齊</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">格線，邏輯值和寫入模式</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS 格線布局和輔助功能</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS 格線布局與漸進式增強</a></li> + <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">使用格線實現常見的布局</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/zh-TW/docs/Web/CSS/grid-area">網格</a> </li> + <li><a href="/zh-TW/docs/Web/CSS/grid-area">網格區域</a></li> + <li><a href="/zh-TW/docs/Web/CSS/grid-auto-columns">網格自動列</a></li> + <li><a href="/zh-TW/docs/Web/CSS/grid-auto-flow">網格自動流</a></li> + <li><a href="/zh-TW/docs/Web/CSS/grid-auto-rows">網格自動行</a></li> + <li><a href="/zh-TW/docs/Web/CSS/grid-column">網格列</a></li> + <li><a href="/zh-TW/docs/Web/CSS/grid-column-end">結束網格列</a></li> + <li><a href="/zh-TW/docs/Web/CSS/grid-column-gap">網格柱間隙</a></li> + <li><a href="/zh-TW/docs/Web/CSS/grid-column-start">啟動網格</a></li> + <li><a href="/zh-TW/docs/Web/CSS/grid-gap">網格間隙</a></li> + <li><a href="/zh-TW/docs/Web/CSS/grid-row">網格行</a></li> + <li><a href="/zh-TW/docs/Web/CSS/grid-row-end">結束網格行</a></li> + <li><a href="/zh-TW/docs/Web/CSS/grid-row-gap">網格行間隙</a></li> + <li><a href="/zh-TW/docs/Web/CSS/grid-row-start">啟動網格行</a></li> + <li><a href="/zh-TW/docs/Web/CSS/grid-template">網格模板</a></li> + <li><a href="/zh-TW/docs/Web/CSS/grid-template-areas">網格模板區域</a></li> + <li><a href="/zh-TW/docs/Web/CSS/grid-template-columns">網格模板的列</a></li> + <li><a href="/zh-TW/docs/Web/CSS/grid-template-rows">網格模板的行</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>詞匯表</strong></a> + <ol> + <li><a href="/zh-TW/docs/Glossary/Grid">格線</a></li> + <li><a href="/zh-TW/docs/Glossary/Grid_lines">網格線</a></li> + <li><a href="/zh-TW/docs/Glossary/Grid_tracks">網格軌道</a></li> + <li><a href="/zh-TW/docs/Glossary/Grid_cell">網格單元格</a></li> + <li><a href="/zh-TW/docs/Glossary/Grid_areas">網格區域</a></li> + <li><a href="/zh-TW/docs/Glossary/Gutters">间距</a></li> + <li><a href="/zh-TW/docs/Glossary/Grid_Axis">網格軸</a></li> + <li><a href="/zh-TW/docs/Glossary/Grid_rows">網格行</a></li> + <li><a href="/zh-TW/docs/Glossary/Grid_column">網格列</a></li> + </ol> + </li> +</ol> +</section> |