MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

CSS 網格在 2017 年第二季度多個瀏覽器導入。這些瀏覽器的較舊版本需要啟用標誌(flag)才能使用此 API。請確保參考每個屬性和函數功能的兼容性以了解更多信息。

CSS 網格布局設計提供了能制定行與列的二維 CSS 布局法,以實現許多不同的布局。它擅長將一個頁面分成主要的地區,或定義關系的大小、位置、和部分之間的層,控制由HTML元素。

像表格一樣,網格布局使作者能夠對齊元素為行和列。但是,表網格布局沒有內容結構,因此使各種的布局不可能在表格上。例如,一個網格容器的子元素可以定位自己和層重疊,類似於CSS定位元素。

基本示例

以下示例展示了一個三列軌道網格,其中創建的行數最小為 100 像素,最大為 auto。Items 已經使用基於線放置在網格的位置上。

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>

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;
}

參考

CSS 屬性

CSS 函式

詞匯表條目

指引

外部資源

規範

格式 狀態 意見
CSS Grid Layout Candidate Recommendation 初始定義

文件標籤與貢獻者

 此頁面的貢獻者: iigmir, 1986slayer, jackblackevo
 最近更新: iigmir,