0925作業2-grid-layout
grid-template-columns:默認值為none像行一樣，通過grid-template-columns指定的每個值來創建每列的列寬
fr:fr單位可以幫助我們創建一個彈列的網格軌道。它代表了網格容器中可用的空間（就像Flexbox中無單位的值）
repeat:使用repeat()可以創建重復的網格軌道。這個適用於創建相等尺寸的網格項目和多個網格項目。repeat()接受兩個參數：第一個參數定義網格軌道應該重復的次數，第二個參數定義每個軌道的尺寸。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Document</title>
<style type="text/css"> //連接css
.wrapper{
display: grid; //通過display屬性設置屬性值為grid
grid-template-columns:repeat(3,1fr);
grid-gap: 500px; //只設置了一個值，表示行和列的間距相等，也就是說grid-row-gap和grid-column-gap的值相同500px
grid-auto-rows:
}
.first{
border: 10PX solid black; //設置第一部分邊框10px 黑色
grid-column:1/5; //設置寬1-5
grid-row:1/3; //設置高度1-3
background: red; //背景色紅色
}
.second{
border: 10PX solid red; //設置第二部分邊框10px 紅色
grid-column:1/3; //寬度1-3
grid-row:2/5; //高度2-5
background: black; //背景色 黑
}
.third{
border: 10PX solid green; //設置第三部分邊框10px 綠色
grid-column:3/5; //寬度3-5
grid-row:2/5; //高度2-5
background: blue; 背景色藍
}
</style>
</head>
<body>
<div class="wrapper">
<div class ="first">a</div>S
<div class="second">b</div>
<div class="third">c</div>
</div>
</body>
</html>
0925作業2-grid-layout