這邊我們要先釐清grid跟flexbox的差別，flexbox是一條軸線("就是橫排跟直排")，而grid則是「行＋列同時控制」，將容器切割成格子，會將元素擺進指定的格子或者自動排列。
grid 程式碼如下:
display: grid //啟用 Grid
grid-template-columns //設定欄數（column）
grid-template-rows //設定列數（row）
grid-auto-columns //自動產生欄寬
grid-auto-rows //自動產生列高
gap //列＋欄間距
column-gap //欄間距
row-gap //列間距
justify-items //水平對齊所有格子內容
align-items //垂直對齊所有格子內容
justify-content //整個 Grid 水平方向對齊
align-content //整個 Grid 垂直方向對齊
grid-auto-flow //控制自動擺放方向
fr //等分的概念，類似 Flex 中的 flex-grow，例：1fr
repeat() //可重複某值，傳入兩個參數，次數與值，例：repeat(2, 1fr)
minmax() //可將值限定在某區間，傳入兩個參數，最小值與最大值，例：minmax(20px, auto)
display: grid
程式碼如下:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="test2.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="a1">header</div>
<div class="a2">menu</div>
<div class="a3">content1</div>
<div class="a4">content2</div>
</div>
</body>
</html>
.container {
display: grid;
grid-template-rows: 100px 300px; /*設定列數*/
grid-template-columns: 150px 200px; /*設定欄數*/
}
.a1{
border: 2px solid blue;
}
.a2{
border: 2px solid rgb(255, 145, 0);
}
.a3{
border: 2px solid rgb(44, 195, 102);
}
.a4{
border: 2px solid blue;
}
結果會長成圖片這樣子
repeat:重複欄位
.container {
display: grid;
grid-template-columns: repeat(3,1fr); /*重複欄位*/
}
.a1{
border: 2px solid blue;
}
.a2{
border: 2px solid rgb(255, 145, 0);
}
.a3{
border: 2px solid rgb(44, 195, 102);
}
.a4{
border: 2px solid blue;
}
會變成這樣:
grid-auto-rows:自動產生列
.container {
display: grid;
grid-auto-rows:100px; /*自動產生列*/
}
.a1{
border: 2px solid blue;
}
.a2{
border: 2px solid rgb(255, 145, 0);
}
.a3{
border: 2px solid rgb(44, 195, 102);
}
.a4{
border: 2px solid blue;
}
會出現如附圖這樣:
grid-auto-columns:自動產生欄
.container {
display: grid;
grid-auto-columns: 200px; /*自動產生欄*/
}
.a1{
border: 2px solid blue;
}
.a2{
border: 2px solid rgb(255, 145, 0);
}
.a3{
border: 2px solid rgb(44, 195, 102);
}
.a4{
border: 2px solid blue;
}
會出現如附圖這樣:
gap:產生間距
.container {
display: grid;
grid-auto-rows: 300px; /*自動產生欄*/
}
.a1{
border: 2px solid blue;
}
.a2{
border: 2px solid rgb(255, 145, 0);
}
.a3{
border: 2px solid rgb(44, 195, 102);
}
.a4{
border: 2px solid blue;
}
會出現如附圖這樣:
justify-items:格子內元素水平對齊
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center; /*格子內元素水平對齊*/
}
.a1{
border: 2px solid blue;
}
.a2{
border: 2px solid rgb(255, 145, 0);
}
.a3{
border: 2px solid rgb(44, 195, 102);
}
.a4{
border: 2px solid blue;
}
會出現如附圖這樣:
align-items:格子內元素垂直對齊
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center; /*格子內元素垂直對齊*/
}
.a1{
border: 2px solid blue;
}
.a2{
border: 2px solid rgb(255, 145, 0);
}
.a3{
border: 2px solid rgb(44, 195, 102);
}
.a4{
border: 2px solid blue;
}
會出現如附圖這樣:
align-content:整個 Grid 垂直對齊容器
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 300px;
align-items: center; /*整個 Grid 垂直對齊容器*/
border: 2px solid black;
}
.a1{
border: 2px solid blue;
}
.a2{
border: 2px solid rgb(255, 145, 0);
}
.a3{
border: 2px solid rgb(44, 195, 102);
}
.a4{
border: 2px solid blue;
}
會出現如附圖這樣:
grid-auto-flow:自動填法
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 300px;
grid-auto-flow: column; /*自動田法*/
border: 2px solid black;
}
.a1{
border: 2px solid blue;
}
.a2{
border: 2px solid rgb(255, 145, 0);
}
.a3{
border: 2px solid rgb(44, 195, 102);
}
.a4{
border: 2px solid blue;
}
會出現如附圖這樣:
