對齊與補白
基本上在格線系統當中，對齊跟補白這兩件事情跟 Flex 大同小異。所以這個段落基本上到這邊就可以結束了（欸不是）。對齊系列基本上可用的有，
屬性預設使用姿勢justify-items, align-itemsnoemal容器區塊內的對齊、填滿相關設定。place-items-上述兩個屬性的集合寫法
align-items / justify-itemsjustify-content, align-contentnormal容器內兩個軸向對齊、填滿相關設定。
place-content-上述兩個屬性的集合寫法 align-content / justify-contentalign-self,
justify-selfauto區塊內元件對齊、填滿相關設定。place-selfauto上述兩個屬性的集合寫法 align-self /
justify-self基本上除了集合寫法，以及 justify-items, justify-self 以外，大抵上就真的跟 Flex
沒什麼差別。在實作面上也是雷同的，當然會遇到的雷也差不多。
容器
我們先來看 Grid 的容器，他包含了 一張試算表像是 Table 一樣的東西，為何會說他 像是 Table，我直接舉例給大家看就知道了，
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
}
.item1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
HTML
