浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【CSS】一重のグリッド内で途中の隙間だけ幅を変えた様に見せる

 CSS で display: grid を使うと二次元レイアウトを自由に非常に自由に作れます。イメージ的には tr, td でレイアウトを組むやり方をよりレイアウト向けに拡張した感じです。
CSS グリッドレイアウト – CSS: カスケーディングスタイルシート | MDN
グリッドレイアウトの基本概念 – CSS: カスケーディングスタイルシート | MDN
 グリッドレイアウトはフレックスボックスばりに色々オプションがあるので初めて触る時は動かすだけでも割としんどかったです。次のグリッドレイアウトジェネレータサービスを使うとスカフォールドが簡単に作れます。
Interactive CSS Grid Generator | Layoutit Grid

 グリッドレイアウトでは gap プロパティで個々のグリッドの隙間を定義できます。便利なのですが、グリッドコンテナ全体にしか適用できないという問題もあります。これを解決したデモが次です。

 ↓のソースコード抜粋の様に隙間を定義する代わりに空の列を定義することで実装できます。

  grid-template-columns: max-content max-content 10px max-content max-content;
  grid-template-rows: repeat(2, 1fr);
  gap: 0px 10px;
  grid-template-areas:
    "name-label   name-value   . email-label email-name"
    "amount-label amount-value . submit-btn  submit-btn";

 どの様な状態かを表したのが次画像です。この様にするとデモの様に左右それぞれの塊をデザインで表現するといったことができます。

 例では一重のグリッドで表現しましたが、多重グリッドを使うとコードが増える代わりにハック感が減ります。大規模なデザインの場合は多重グリッドとコンポーネント的なコーディングで対処した方が良さそうです。

  • この記事いいね! (0)