Instagramのコード

と云うわけでコードはこんな感じ。 これだけでテーブルが組めるのだから素晴らしい。

■ CSS

.grid_insta {
    display: grid;                         /* グリッドコンテナを作る            */
    grid-template-columns:100px  100px;    /* 100pxが2個並ぶ                   */
    grid-auto-rows: 100px;                 /* 縦方向は100pxで繰り返す           */
    column-gap: 4px;                       /* コンテンツの隙間                  */
    row-gap: 4px;                          /* コンテンツの隙間                  */
}


■ html

<div class="grid_insta">
    <div>
        <a href="https://www.instagram.com/p/B1ubPTEg59V/">
        <img border="0" src="https://hogehoge01.jpg" width="100" height="100" /></a>
    </div>
    <div>
        <a href="https://www.instagram.com/p/B1mt-lAAanf/">
        <img border="0" src="https://hogehoge01.jpg" width="100" height="100" /></a>
    </div>
    <div>
        <a href="https://www.instagram.com/p/B1lTrSdg1QG/">
        <img border="0" src="https://hogehoge03.jpg" width="100" height="100" /></a>
    </div>
    <div>
        <a href="https://www.instagram.com/p/B1lTrSdg1QG/">
        <img border="0" src="https://hogehoge03.jpg" width="100" height="100" /></a>
    </div>
    <div>
        5番目のコンテンツ
    </div>
    <div>
        6番目のコンテンツ
    </div>
    <div>
        7番目のコンテンツ
    </div>
    <div>
        8番目のコンテンツ
    </div>
    <div>
        9番目のコンテンツ
    </div>
    <div>
       10番目のコンテンツ
    </div>
</div>

--
☂