CSS:網格佈局(grid)
grid容器
經過將屬性display的值設爲grid，使 HTML 元素變爲網格容器，該容器就可使用與 CSS 網格（CSS Grid）相關的屬性。
例如：函數
<div class="container">
<div class="item1">網格1</div>
<div class="item2">網格2</div>
<div class="item3">網格3</div>
</div>
<style>
.container{
display:grid;
}
</style>
grid屬性
1.grid-template-columns屬性值的個數表示網格的列數，而每一個值表示對應列的寬度。佈局
例如：spa
<style>
.container{
display:grid;
grid-template-columns:100px 100px 100px;
}
</style>
上面的代碼中在網格容器裏該屬性將元素佈局成三列網格，每列對應的寬度是100px。code
2.grid-template-rows屬性值的個數表示網格的行數，而每一個值表示對應列的高度。
例如：blog
<div class="container">
<div class="item1">網格1</div>
<div class="item2">網格2</div>
<div class="item3">網格3</div>
<div class="item4">網格4</div>
<div class="item5">網格5</div>
</div>
<style>
.container{
display:grid;
grid-template-columns:100px 100px 100px 100px 100px;
grid-template-rows:50px 50px;
}
</style>
上面的代碼中在網格容器裏該屬性將五個網格佈局兩行，第一行三列，第二行兩列，每行對應的高度是50px，寬度是100px；圖片
3.網格單位it
fr：設置列或行佔剩餘空間的一個比例；class
auto：設置列寬或行高自動等於它的內容的寬度或高度；容器
%： 將列或行調整爲它的容器寬度或高度的百分比；grid
<div class="container">
<div class="item1">網格1</div>
<div class="item2">網格2</div>
<div class="item3">網格3</div>
<div class="item4">網格4</div>
<div class="item5">網格5</div>
</div>
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container{
display:grid;
grid-template-columns: auto 50px 10% 2fr 1fr;
}
</style>
grid-template-columns: auto 50px 10% 2fr 1fr將容器裏的5個網格佈局成五列。第一列的寬與它的內容寬度相等；第二列寬 50px；第三列寬是網格容器的 10%；最後兩列，將網格容器剩餘的寬度平均分紅三份，第四列佔兩份，第五列佔一份。
4.grid-column-gap能夠在列與列之間添加間距
例如：
<div class="container">
<div class="item1">網格1</div>
<div class="item2">網格2</div>
<div class="item3">網格3</div>
<div class="item4">網格4</div>
<div class="item5">網格5</div>
</div>
<style>
.container{
display:grid;
grid-template-columns:100px 100px 100px 100px 100px;
grid-template-rows:50px 50px;
grid-column-gap:20px;
}
</style>
上面的代碼中將列與列之間的間距設爲20px
5.grid-row-gap能夠在行與行之間添加間距
例如：
<div class="container">
<div class="item1">網格1</div>
<div class="item2">網格2</div>
<div class="item3">網格3</div>
<div class="item4">網格4</div>
<div class="item5">網格5</div>
</div>
<style>
.container{
display:grid;
grid-template-columns:100px 100px 100px 100px 100px;
grid-template-rows:50px 50px;
grid-row-gap:10px;
}
</style>
上面的代碼中將行與行之間的間距值設爲10px
6.grid-gap是grid-row-gap和grid-column-gap的簡寫，若是grid-gap有一個值，行與行之間和列與列之的間距將等於該值。可是，若是有兩個值，第一個值將做爲行與行的間距值，第二個值是列與列的間距值。
例如：
<div class="container">
<div class="item1">網格1</div>
<div class="item2">網格2</div>
<div class="item3">網格3</div>
<div class="item4">網格4</div>
<div class="item5">網格5</div>
</div>
<style>
.container{
display:grid;
grid-template-columns:100px 100px 100px 100px 100px;
grid-gap:15x 25x;
}
</style>
上面的代碼中行與行的間距爲15px，列與列的間距爲25px
7.grid-column控制的是網格自己，定義網格寬度開始和結束的位置，進而控制每一個網格項佔用的列數。
例如：
<div class="container">
<div class="item1">網格1</div>
<div class="item2">網格2</div>
<div class="item3">網格3</div>
<div class="item4">網格4</div>
<div class="item5">網格5</div>
</div>
<style>
.container{
display:grid;
}
.item5{
grid-column: 1 / 3;
}
</style>
結合上面的網格圖片上面的代碼中類名爲item5的網格從左側第一條線開始到第三條線結束，佔用兩列。
8.grid-row控制的是網格自己，定義網格高度開始和結束的位置，進而控制每一個網格項佔用的行數。
例如：
<div class="container">
<div class="item1">網格1</div>
<div class="item2">網格2</div>
<div class="item3">網格3</div>
<div class="item4">網格4</div>
<div class="item5">網格5</div>
</div>
<style>
.container{
display:grid;
}
.item5{
grid-column: 1 / 3;
grid-row: 2 / 4;
}
</style>
上面的代碼中類名爲item5的網格從上面的第二條線開始到底部的第四條條線結束佔用兩行
9.justify-self屬性設置的是網格的內容在網格內沿着行軸對齊的方式。
start：網格的內容在網格里的左側對齊；
center：網格的內容在網格里的居中對齊；
end：網格的內容在網格里的右側對齊；
stretch：默認值，填滿網格區域的寬度；
例如：
<div class="container">
<div class="item1">網格1</div>
<div class="item2">網格2</div>
<div class="item3">網格3</div>
<div class="item4">網格4</div>
<div class="item5">網格5</div>
</div>
<style>
.container{
display:grid;
}
.item5{
justify-self:center;
}
</style>
11.align-self屬性設置的是網格的內容在網格內沿着列軸對齊的方式。
start：網格的內容在網格內沿着列軸的頂部對齊；
center：網格的內容在網格內沿着列軸的中心對齊；
end：網格的內容在網格內沿着沿着列軸的底部對齊；
stretch：默認值，填滿網格區域的寬度；
12.justify-items對網格容器使用該屬性能夠給網格中全部的網格項設置沿行軸對齊的方式。
start：網格的內容在網格里的左側對齊；
center：網格的內容在網格里的居中對齊；
end：網格的內容在網格里的右側對齊；
stretch：默認值，填滿網格區域的高度；
13.align-items對網格容器使用該屬性能夠給網格中全部的網格項設置沿列軸對齊的方式。
start：網格沿着列軸的頂部對齊；
center：網格沿着列軸的中心對齊；
end：網格沿着列軸的底部對齊；
stretch：默認值，填滿網格區域的高度；
14.grid-template-areas屬性能夠將網格中的一些網格單元格組合成一個區域（area），併爲該區域指定一個自定義名稱。
例如：
<div class="container">
<div class="item1">網格1</div>
<div class="item2">網格2</div>
<div class="item3">網格3</div>
<div class="item4">網格4</div>
<div class="item5">網格5</div>
</div>
<style>
.container{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";
}
</style>
上面的代碼將頂部三個單元格合併成一個名爲header的區域，將底部三個單元格合併爲一個名爲footer的區域，並在中間行生成兩個區域————advert和content。
15.grid-area以經過添加你定義的名稱將網格項放入自定義區域。
例如：
<div class="container">
<div class="item1">網格1</div>
<div class="item2">網格2</div>
<div class="item3">網格3</div>
<div class="item4">網格4</div>
<div class="item5">網格5</div>
</div>
<style>
.container{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";
}
.item1{
grid-area:header;
}
.item5{
grid-area:footer;
}
</style>
在上面的代碼中經過grid-area屬性將類名爲item1的網格放入到了header區域裏，類名爲item5的網格放入到了footer區域裏。
grid方法
1.repeat方法指定行或列的重複次數，後面加上逗號以及須要重複的值。
當使用grid-template-columns和grid-template-rows定義網格結構時，須要爲添加的每一行和每一列都輸入一個值。若是要添加帶 100 行高度相同的網格，單獨放入 100 個值不太實際。這種狀況下用repeat函數就有效的解決了這個問題。
例如添加100行網格的例子，使每行高度均爲 50px，還能夠用 repeat 方法重複多個值，並在定義網格結構時與其餘值一塊兒使用
<div class="container">
<div class="item1">網格1</div>
<div class="item2">網格2</div>
<div class="item3">網格3</div>
<div class="item4">網格4</div>
<div class="item5">網格5</div>
</div>
<style>
.container{
display:grid;
grid-template-columns: repeat(2, 1fr 50px) 20px;
grid-template-rows: repeat(100, 50px);
}
</style>
注意： 1fr 50px重複了兩次，後面跟着 20px。
2.minmax可用於設置grid-template-columns和grid-template-rows的值。它的做用是在網格容器改變大小時限制網格項的大小。爲此，須要指定網格項容許的尺寸範圍。
例如：
<div class="container">
<div class="item1">網格1</div>
<div class="item2">網格2</div>
<div class="item3">網格3</div>
<div class="item4">網格4</div>
<div class="item5">網格5</div>
</div>
<style>
.container{
display:grid;
grid-template-columns: 100px minmax(50px, 200px);
}
</style>
在上面的代碼中，grid-template-columns被設置爲添加兩列，第一列 100px 寬，第二列寬度最小值是 50px，最大值是 200px。
3.auto-fill根據容器的大小，儘量多地放入指定大小的行或列。是repeat的方法內的功能。能夠經過結合auto-fill和minmax來更靈活地佈局。
例如：
<div class="container">
<div class="item1">網格1</div>
<div class="item2">網格2</div>
<div class="item3">網格3</div>
<div class="item4">網格4</div>
<div class="item5">網格5</div>
</div>
<style>
.container{
display:grid;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
}
</style>
在上面的代碼中列的寬度會隨容器大小改變，在能夠插入一個 60px 寬的列以前，當前行的全部列會一直拉伸
4.auto-fit效果幾乎和auto-fill同樣。不一樣點僅在於，當容器的大小大於各網格項之和時，auto-fill將會持續地在一端放入空行或空列，這樣就會使全部網格項擠到另外一邊；而auto-fit則不會在一端放入空行或空列，而是會將全部網格項拉伸至合適的大小。
注意： 若是容器沒法使全部網格項放在同一行，餘下的網格項將移至新的一行。
- 1. CSS Grid 網格佈局
- 2. css grid網格佈局
- 3. CSS Grid(網格) 佈局
- 4. Css Grid網格佈局
- 5. Css網格佈局-Grid佈局
- 6. css網格佈局(display: grid | inline-grid)
- 7. CSS--使用CSS Grid（網格）佈局
- 8. Grid佈局（網格佈局）
- 9. 網格佈局grid
- 10. Grid網格佈局
- 更多相關文章...
- • ionic 網格(Grid) - ionic 教程
- • jQuery Mobile 網格 - jQuery Mobile 教程
- • JDK13 GA發佈：5大特性解讀
- • IntelliJ IDEA代碼格式化設置
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS Grid 網格佈局
- 2. css grid網格佈局
- 3. CSS Grid(網格) 佈局
- 4. Css Grid網格佈局
- 5. Css網格佈局-Grid佈局
- 6. css網格佈局(display: grid | inline-grid)
- 7. CSS--使用CSS Grid（網格）佈局
- 8. Grid佈局（網格佈局）
- 9. 網格佈局grid
- 10. Grid網格佈局