tailwindcssのgridのレイアウトを触ってみる

参考ページ

tailwindcss.com

サンプルコード1

    <!-- コンテナ --->
    <!-- １列を4カラムにする grid-cols-4 --->
    <div class="grid grid-cols-4">
        <!-- アイテム --->
        <div class="border-2">1</div>        
        <!-- このアイテムは２カラム分利用する --->
        <div class="border-2 col-span-2 bg-green-200">2</div>
        <!-- このアイテムは行のはじめに配置して２カラム分利用する --->
        <div class="border-2 col-start-1 col-span-2 bg-blue-100">3</div>
        <div class="border-2">4</div>
        <div class="border-2 h-16">5</div>
        <div class="border-2">6</div>
        <div class="border-2">7</div>
        <div class="border-2">8</div>
        <div class="border-2">9</div>
        <div class="border-2">10</div>
    </div>

サンプルコード実行結果1

サンプルコード2

    <!-- コンテナ --->
    <!--  --->
    <div class="grid grid-rows-3 mt-16 grid-flow-col">
        <!-- アイテム --->
        <div class="border-2">1</div>        
        <div class="border-2">2</div>        
        <div class="border-2">3</div>        
        <div class="border-2">4</div>                
        <div class="border-2">5</div>                
        <div class="border-2">6</div>
        <div class="border-2">7</div>
        <div class="border-2">8</div>
        <div class="border-2">9</div>
        <div class="border-2">10</div>
    </div>

サンプルコード実行結果2

サンプルコード3

    <div class="bg-green-200">
        <div class="p-4 grid grid-cols-4">
            <div class="col-span-4">
                ログが入ります
            </div>
            <div class="col-span-4 justify-self-center">
                <img src="image1.jpg" class="object-cover h-48 " style="width: 100vw;">
            </div>
            <div class="border-l-2 border-r-2 text-center border-blue-300">
                <div class="my-4">最新の記事</div>
            </div>
            <div class="border-r-2 text-center border-blue-300">
                <div class="my-4">最新の記事</div>
            </div>
            <div class="border-r-2 text-center border-blue-300">
                <div class="my-4">最新の記事</div>
            </div>
            <div class="border-r-2 text-center border-blue-300">
                <div class="my-4">最新の記事</div>
            </div>
        </div>
    </div>

サンプルコード実行結果3

サンプルコード4

    <footer class="bg-blue-200">
        <div class="p-8 grid grid-cols-4 gap-8">
            <div>
                <p class="mb-8">ロゴ</p>
                <address>〒123-4567 千葉県千葉市○○○○○○○</address>
            </div>
            <div>
                <div class="mb-8">最新の記事</div>
                <ul>
                    <li>記事1</li>
                    <li>記事2</li>
                    <li>記事3</li>
                </ul>
            </div>
            <div>
                <div class="mb-8">記事</div>
                <ul>
                    <li>記事1</li>
                    <li>記事2</li>
                    <li>記事3</li>
                </ul>
            </div>
            <div>
                <div class="mb-8">問合せ</div>
                <ul>
                    <li>メールアドレス</li>
                    <li>電話番号</li>
                    <li>鳩</li>
                </ul>
            </div>
            <div class="col-span-4 justify-self-center">
                Copyright© DEMODEMODEMO Co.,Ltd. All rights reserved.
            </div>
        </div>
    </footer>

サンプルコード実行結果4