css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。
如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。
E

css grid colspan sample code:

學習

音樂藝文

職場產業

<div class="draft-block draft--p left">css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。</div>
<div class="draft-block draft--p left">如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。</div>
<div class="embed-block-prerender" data-type="gist" data-id="cb24e8fb6cc7a2a7340e6079f9091795"></div>
<div class="draft--imgNormal draft-block"><div><div style="height:313px" class="image-block-prerender" data-src="https://images.vocus.cc/79fdf210-ef1c-46ed-9ce1-279a611cfdb0.jpg" data-width="313" data-height="516" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left">css grid colspan sample code:</div>
<div class="embed-block-prerender" data-type="gist" data-id="f900628daa2a962ba7b64e12f4119c88"></div>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left">grid-column: xxx / span xxx;   =&gt;表示從第幾欄開始往右佔幾欄</div>
<div class="draft-block draft--p left">以上述 grid-column: 2 / span 2; 來說結果如下: 其實寫成grid-column: span 2;也可以達到一樣效果，因為本身就是第2欄了，有點贅述。</div>
<div class="draft-block draft--p left"></div>
<div class="draft--imgNormal draft-block"><div><div style="height:1917px" class="image-block-prerender" data-src="https://images.vocus.cc/c4af1259-c23e-4f9d-a0bc-713998111917.jpg" data-width="1917" data-height="785" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left">接著改成 grid-column: 1 / span 2; ，結果如下:</div>
<div class="draft-block draft--p left">因為本身是第2欄卻說要從第1欄開始，因此會換一行再往右佔兩欄。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1919px" class="image-block-prerender" data-src="https://images.vocus.cc/42961cc5-887b-4104-8ffa-6414bfce0b28.jpg" data-width="1919" data-height="957" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left">接著改成 grid-column: 3 / span 2; ，結果如下:</div>
<div class="draft-block draft--p left">因為本身是第2欄卻說要從第3欄開始，所以原本第2欄會空一格。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1919px" class="image-block-prerender" data-src="https://images.vocus.cc/dde1ab99-256f-416f-a406-183fa7203539.jpg" data-width="1919" data-height="771" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left"></div>
<div class="hr__AtomHrContainer-sc-1afmttx-0 dsBIOm draft-block"><pre class="hr__HrWrapper-sc-1afmttx-1 hUbgX draft--hr"><hr class="hr__Hr-sc-1afmttx-2 iegMSY"></pre></div>
<div class="draft-block draft--p left">接著看看rowspan範例:</div>
<div class="embed-block-prerender" data-type="gist" data-id="0f9ccf9cfcf479d77195633123cf6422"></div>
<div class="draft-block draft--p left">結果如下:</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1919px" class="image-block-prerender" data-src="https://images.vocus.cc/9f97fe39-13b9-4643-b686-39f3f212d939.jpg" data-width="1919" data-height="287" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">grid-column: 2;<br>grid-row: 2 / span 2; </div>
<div class="draft-block draft--p left">這段其實可以簡化成: grid-row: span 2; 意思一樣。</div>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left">接著改成:</div>
<div class="draft-block draft--p left">grid-column: 1;<br>grid-row: 2 / span 2; </div>
<div class="draft-block draft--p left">結果如下:</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1917px" class="image-block-prerender" data-src="https://images.vocus.cc/12b75bb4-2689-4982-9493-4abfa6e617d7.jpg" data-width="1917" data-height="251" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left"><span style="font-style: italic; ">本筆記參考:<br>1. </span><a href="https://blog.boggy.tw/2021/07/08/grid-column/" target="_blank" class="draft--a"><span style="font-style: italic; ">https://blog.boggy.tw/2021/07/08/grid-column/</span></a></div>

<p>css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。</p>
<p>如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。</p>
<figure>E</figure>
<p><br></p>
<p><br></p>
<p>css grid colspan sample code:</p>
<figure>E</figure>
<p><br></p>
<p>grid-column: xxx / span xxx; &nbsp;&nbsp;=&gt;表示從第幾欄開始往右佔幾欄</p>
<p>以上述 grid-column: 2 / span 2; 來說結果如下: 其實寫成grid-column: span 2;也可以達到一樣效果，因為本身就是第2欄了，有點贅述。</p>
<p><br></p>
<p><br></p>
<p><br></p>
<p>接著改成 grid-column: 1 / span 2; ，結果如下:</p>
<p>因為本身是第2欄卻說要從第1欄開始，因此會換一行再往右佔兩欄。</p>
<p><br></p>
<p><br></p>
<p>接著改成 grid-column: 3 / span 2; ，結果如下:</p>
<p>因為本身是第2欄卻說要從第3欄開始，所以原本第2欄會空一格。</p>
<p><br></p>
<p><br></p>
<p><br></p>
<p>接著看看rowspan範例:</p>
<figure>E</figure>
<p>結果如下:</p>
<p><br></p>
<p>grid-column: 2;<br>
grid-row: 2 / span 2;&nbsp;</p>
<p>這段其實可以簡化成: grid-row: span 2; 意思一樣。</p>
<p><br></p>
<p>接著改成:</p>
<p>grid-column: 1;<br>
grid-row: 2 / span 2;&nbsp;</p>
<p>結果如下:</p>
<p><br></p>
<p><br></p>
<p><em>本筆記參考:<br>
1. </em><a href="https://blog.boggy.tw/2021/07/08/grid-column/"><em>https://blog.boggy.tw/2021/07/08/grid-column/</em></a></p>

css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。

如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。

Instantly share code, notes, and snippets. You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

table_colspan.html

grid_colspan.html

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欄會空一格。

grid_rowspan.html

這段其實可以簡化成: grid-row: span 2; 意思一樣。

本筆記參考:
1. https://blog.boggy.tw/2021/07/08/grid-column/

CSS grid 達成類似 table colspan, rowspan 排版

css grid在排版非常好用，搭配media query即可達到RWD的效果，以下直接附上sample code:

E


結果如下:
width > 1200px:

width 

width 

width 


接著刻意讓第三個框框高度設為400px，畫面結果如下:

可以看到第二列的格