パーツ番号 01-14-04 ・ CSSのみ

正方形タイルのみのグリッド

すべて同じ縦横比の正方形だけで構成した整然としたグリッドです。WordPressの実績一覧やアイコンカタログの土台に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-14-04-grid">
          <div class="d01-14-04-sq">1</div>
          <div class="d01-14-04-sq">2</div>
          <div class="d01-14-04-sq">3</div>
          <div class="d01-14-04-sq">4</div>
          <div class="d01-14-04-sq">5</div>
          <div class="d01-14-04-sq">6</div>
          <div class="d01-14-04-sq">7</div>
          <div class="d01-14-04-sq">8</div>
        </div>

CSS

.prev.d01-14-04{padding:14px}
        .d01-14-04-grid{width:100%;max-width:280px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:10px}
        .d01-14-04-sq{aspect-ratio:1/1;border-radius:8px;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#94a3b8;font-weight:700}

クラス名 .d01-14-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。