此篇為之前筆記的總結練習
練習的 html 內容已經預訂好，在 body 內的內容如下所示
123456789101112131415161718192021222324252627282930313233 |
<div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> <div class="item item5">5</div> <div class="item item6">6</div> <div class="item item7">7</div> <div class="item item8">8</div> <div class="item poop">??</div> <div class="item item9">9</div> <div class="item item10">10</div> <div class="item item11">11</div> <div class="item item12">12</div> <div class="item item13">13</div> <div class="item item14">14</div> <div class="item item15">15</div> <div class="item item16">16</div> <div class="item item17">17</div> <div class="item item18">18</div> <div class="item item19">19</div> <div class="item item20">20</div> <div class="item item21">21</div> <div class="item item22">22</div> <div class="item item23">23</div> <div class="item item24">24</div> <div class="item item25">25</div> <div class="item item26">26</div> <div class=大专栏 CSS Grid 筆記 11-Spanning and Placing Cardioring">"item item27">27</div> <div class="item item28">28</div> <div class="item item29">29</div> <div class="item item30">30</div></div> |
練習題
以下題目會大致說明其中文的意思，並不是翻譯，請諒解。
這兩題因為都在 .container class 中，所以就一起進行
- Make the grid 10 columns wide, every other taking up twice the free space
製作一個 10 欄表格，其每隔一個就是使用兩倍的空間
- Make the grid have 10 explicit rows, 50px high each
使表格有明確的 10 行，其高為 50 px
12345678 |
.container { display: grid; grid-gap: 20px;
grid-template-columns: repeat(5, 1fr 2fr); /* Make the grid have 10 explicit rows, 50px high each */ grid-template-rows: repeat(10,50px);}
|
- With Item 1, start at col 3 and go until 5
針對 item1 由欄位 3 開始跨越到 欄位 5
1234 |
/* With Item 1, start at col 3 and go until 5 */.item1 { grid-column: 3/5;}
|
- With Item 2, start at col 5 and go until the end
由欄位 5 開始，填滿整行
1234 |
/* With Item 2, start at col 5 and go until the end */.item2 { grid-column: 5/-1;}
|
- Make Item 5 double span 2 cols and rows
跨越 2 欄與 2 行
12345 |
/* Make Item 5 double span 2 cols and rows */.item5 { grid-column: span 2; grid-row: span 2;}
|
- Make Item 8 two rows high
就是跨越 2 行
1234 |
/* Make Item 8 two rows high */.item8 { grid-row: span 2;}
|
- Make Item 15 span the entire grid width
使其跨越所有欄位，等於整行
1234 |
/* Make Item 15 span the entire grid width */.item15 { grid-column: 1/-1;}
|
- Make item 18 span 4 widths, but end 9
指定跨越 4 欄，但是指定結束在欄位 9
1234 |
/* Make item 18 span 4 widths, but end 9 */.item18 { grid-column: span 4/9;}
|
- Make item 20 start at row 4 and go for 3
由行 4 開始跨越 3 行
1234 |
/* Make item 20 start at row 4 and go for 3 */.item20 { grid-row: 4/ span 3;}
|
參考資料
- CSS-Grid 課程
- 作者 Wes Bos CSS-Grid Github
- 我的 CSS-Grid 練習Github
原文地址：https://www.cnblogs.com/sanxiandoupi/p/11692262.html
时间： 2024-12-20 22:21:49