css網格布局用於將頁面分割成數個主要區域，或者用來定義元件內部元素間大小、位置和圖層之間的關係。像**一樣，網格布局讓我們能夠按行或列來對齊元素。 但是，使用css網格可能還是比css**更容易布局。 例如，網格容器的子元素可以自己定位，以便它們像css定位的元素一樣，真正的有重疊和層次。
gird布局是一種基於二維的網格布局，與flex和普通的浮動布局相比，他最大的優勢在於不取決dom節點的結構，而是直接把整個頁面劃分為多個格仔，繼而進行填充。
①二維布局，提供橫、豎方向布局，與table相似
②可設定具體的行數、列數，且可設定每行、每列的大小，提供多種的彈性大小控制屬性
③可定義每個格仔間的間隔（橫豎）
④可設定元素的對齊方式（基於元素所在單元格），批量控制，具體某個子元素控制
⑤可讓元素填充到指定的格仔（某行、某列，跨格仔），此功能可以對元素進行任意的布局，而無需修改html結構
在開發之前，你得先了解其相容性。總體來說，相容性還是不夠全面，但如果一些公司用於內部系統開發，grid布局將會是乙個不錯的選擇。
用於將整體劃分為每乙個各自的線，可以水平（row grid lines），也可以是垂直的（column grid lines），如下圖中的紅線藍線。
被劃分之後每乙個格仔就是單元格，也是gird布局的最小單位。
若干個單元格拼接而成的區域。
單元格與單元格之間的距離，可以垂直也可以水平。
用於定義 grid columns, rows 和areas。
用於定義主軸（水平）對齊方式
用於定於副軸（垂直）對齊方式
用於定於主軸（水平）上多跟軸線的對齊方式
用於定於副軸（垂直）上多跟軸線的對齊方式
用於定義單元格的自動遍歷順序
用於控制該元件在水平方向上佔多少個格
用於控制該元件在垂直方向上佔多少個格
合併控制項在垂直水平方向上各佔多少個格
用於定義該元件在主軸（水平）方向上內容的對齊方式
用於定義該元件在副軸（垂直）方向上內容的對齊方式
如何在不改變dom節點結構的情況下，實現如下功能：在螢幕不同解析度的情況下，頁面中的元件自動地移位。
①電腦：寬度大於1200px，布局如下：
②平板：寬度大於992px，小於1200px，布局如下：
③手機：寬度小於992px,布局如下：
****，
html**
header
subtitle
left
middle
right-top
right-middle
right-bottom
footer
.container
.container div
@media only screen and (min-width: 768px)
.subtitle
.left
.middle
.right-top
.right-middle
.right-bottom
.footer
} @media only screen and (min-width: 992px)
.subtitle
.left
.middle
.right-top
.right-middle
.right-bottom
.footer
} @media only screen and (min-width: 1200px)
.subtitle
.left
.middle
.right-top
.right-middle
.right-bottom
.footer
}
布局篇 Grid布局
特點 1 可以定義任意數量的行和列 2 行的高度和列的寬度可以使用絕對值 相對比例或自動調整的方式，可設定最大值和最小值 3 內部元素可以設定自己所在的行 列，還可以設定跨越幾行 幾列 4 可以設定內部元素的對齊方向 grid類具有columndefinitions和rowdefinitions兩個...
布局管理之Grid布局
tkinter grid常用選項 column 指定將元件放入哪列，第一列的索引為 0。columnspan 指定元件橫跨多少列。row 指定元件放入哪行，第一行的索引為 0。rowspan 指定元件橫跨多少行。sticky 對齊方式，類似 pack 方法的 anchor 選項，同樣支援 n e s...
Grid布局（網格布局）
網格布局 grid 是 css 中乙個布局方案。它將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局。以前，只能通過複雜的 css 框架達到的效果，現在瀏覽器內建了。下面這樣的布局，就是grid布局。grid 布局與 flex 布局有一定的相似性，都可以指定容器內部多個專案的位置。但...