CSS গ্রিড লেজাউট মডিউল
- পূর্ববর্তী পৃষ্ঠা RWD ভিডিও
- পরবর্তী পৃষ্ঠা CSS গ্রিড কনটেনার
Header
Menu
Main
Right
Footer
網格佈局
CSS 網格佈局模块（CSS Grid Layout Module）提供了帶有行和列的基于網格的佈局系統，它使網頁設計變得更加容易，而无需使用浮動和定位。
浏览器支持
所有现代浏览器均支持网格属性。
| 57.0 | 16.0 | 52.0 | 10 | 44 |
網格元素
網格佈局由一個父元素以及一個或多个子元素组成。
ইনস্ট্যান্স
<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9</div> </div>
1
2
3
4
5
6
7
8
9
Display 屬性
當 HTML 元素的 display 屬性設定為 grid 或 inline-grid 時，它就會成為網格容器。
ইনস্ট্যান্স
.grid-container {
display: grid;
}
ইনস্ট্যান্স
.grid-container {
display: inline-grid;
}
網格容器的所有直接子元素將自動成為網格項目。
網格列（Grid Columns）
網格項的垂直線被稱為列。
網隔行（Grid Rows）
網格項的水平線被稱為行。
網格間隙（Grid Gaps）
每列/行之間的間隔稱為間隙。
您可以通过使用以下屬性之一來調整間隙大小：
grid-column-gapgrid-row-gapgrid-gap
ইনস্ট্যান্স
grid-column-gap 屬性設定列之間的間隙：
.grid-container {
display: grid;
grid-column-gap: 50px;
}
ইনস্ট্যান্স
grid-row-gap 屬性設定行之間的間隙：
.grid-container {
display: grid;
grid-row-gap: 50px;
}
ইনস্ট্যান্স
grid-gap 屬性是 grid-row-gap 和 grid-column-gap 屬性的簡寫屬性：
.grid-container {
display: grid;
grid-gap: 50px 100px;
}
ইনস্ট্যান্স
grid-gap 属性還可以用於將行間隙和列間隙設定為一個值：
.grid-container {
display: grid;
grid-gap: 50px;
}
গ্রিড লাইন (Grid Lines)
কলামগুলির মধ্যে কলাম (column lines) বলা হয়
হাইলাইনগুলির মধ্যে হাইলাইন (row lines) বলা হয়
গ্রিড কনটেনারে গ্রিড আইটেমকে রাখার সময়, হাইলাইন নম্বর উল্লেখ করুন:
ইনস্ট্যান্স
গ্রিড আইটেমকে কলাম 1-এ রাখুন এবং কলাম 3-এ শেষ করুন:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
ইনস্ট্যান্স
গ্রিড আইটেমকে হাইলাইন 1-এ রাখুন এবং হাইলাইন 3-এ শেষ করুন:
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
- পূর্ববর্তী পৃষ্ঠা RWD ভিডিও
- পরবর্তী পৃষ্ঠা CSS গ্রিড কনটেনার
