Spanning and Placing Cardio

練習的 html 內容已經預訂好，在 body 內的內容如下所示

<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="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

.container {
    display: grid;
    grid-gap: 20px;
    /* Make the grid 10 columns wide, every other taking up twice the free space */
    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

/* 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 開始，填滿整行

/* 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 行

/* 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 行

/* Make Item 8 two rows high */
.item8 {
    grid-row: span 2;
}

Make Item 15 span the entire grid width

使其跨越所有欄位，等於整行

/* Make Item 15 span the entire grid width */
.item15 {
    grid-column: 1/-1;
}

Make item 18 span 4 widths, but end 9

指定跨越 4 欄，但是指定結束在欄位 9

/* 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 行

/* Make item 20 start at row 4 and go for 3 */
.item20 {
    grid-row: 4/ span 3;
}

ShunNien's Blog

CSS Grid 筆記 11-Spanning and Placing Cardio

Spanning and Placing Cardio

練習題

參考資料