容器
我們先來看 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
你所不知道的「補白」
首先，你必須要知道這幾個常用屬性的可用值，
屬性預設值可用值justify-contentnormalflex-start,flex-end,center,space-between,
space-aroundalign-contentnormalflex-start,flex-end,center,space-between,
space-aroundalign-itemsstretchflex-start,flex-end,center,baseline,stretch
align-selfautoauto,flex-start,flex-end,center,baseline,stretch好了，請留意兩個屬性的預設值，align-content 與 align-items 預設都是使用 stretch
。換句話說，當你什麼事情都沒有做的時候，他會幫你自動 填滿
