CSS grid 達成類似 table colspan, rowspan 排版
css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。
如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。
css grid colspan sample code:
grid-column: xxx / span xxx; =表示從第幾欄開始往右佔幾欄
以上述 grid-column: 2 / span 2; 來說結果如下: 其實寫成grid-column: span 2;也可以達到一樣效果，因為本身就是第2欄了，有點贅述。
接著改成 grid-column: 1 / span 2; ，結果如下:
因為本身是第2欄卻說要從第1欄開始，因此會換一行再往右佔兩欄。
接著改成 grid-column: 3 / span 2; ，結果如下:
因為本身是第2欄卻說要從第3欄開始，所以原本第2欄會空一格。
接著看看rowspan範例:
結果如下:
grid-column: 2;
grid-row: 2 / span 2;
這段其實可以簡化成: grid-row: span 2; 意思一樣。
接著改成:
grid-column: 1;
grid-row: 2 / span 2;
結果如下:
分享至
成為作者繼續創作的動力吧！
