Chapter 05

tailwindcss Grid Column

knaka Tech-Blog
knaka Tech-Blog
2021.04.29に更新
このチャプターの目次
  1. 概要:
  2. 関連
    1. 参考のデモページ

概要:

Grid Column レイアウト の設定の例になります

関連

https://tailwindcss.com/docs/grid-column
  • コード

https://github.com/kuc-arc-f/tailwind-sample/blob/main/src/01_grid.html

src/01_grid.html

  • grid-cols-3 : 3列の配置
  • gap-2 : グリッド間の余白　のようでした
01_grid.html
    <div class="grid grid-cols-3 gap-2">
      <div class="bg-blue-400 text-center text-white p-2 rounded">1
      </div>
      <div class="bg-blue-400 text-center text-white p-2 rounded">2
      </div>
      <div class="bg-blue-400 text-center text-white p-2 rounded">3
      </div>
      <div class="bg-blue-400 text-center text-white p-2 rounded">4
      </div>
      <div class="bg-blue-400 text-center text-white p-2 rounded">5
      </div>
    </div>

参考のデモページ

https://kuc-arc-f.github.io/tailwind-sample/src/01_grid.html

....