minmax()の値には、適用する要素の最小値と最大値を指定することができます。
minmax(min, max)
min, maxにはには、次の値を利用できます。
1,px単位
2,%単位
3,fr単位
4,auto
5,max-content
6,min-content
|
1 2 3 4 |
.example { display: grid; grid-template-columns: minmax(200px, 300px) 1fr 1fr; } |
ビューポートのサイズを変更すると、
最初の要素は100px〜200pxの間の幅になり、2番目と3番目の要素は残りの空きスペースを均等に占めるように横幅を可変させます。
IE, Edgeではベンダプレフィックス（-ms-）を加える必要がありますが、
minmax()はすべてのブラウザにサポートされています。
この記事を見た人は次の記事も見ています。
カスタムフィールド の値を全ページで取得する方法
第二十四回「地味に便利なPreserve Editor Scroll Position」
illustratorグループ化
jQueryのスライダー表示プラグイン「bxslider」
はじめまして。ブログバトンタッチ。
インスタグラムの画像を保存する
WP:カスタムタクソノミーごとの投稿とタームの一覧表示- Swiper.js
WPのカスタムタクソノミーで子カテゴリの一覧の取得方法
第五十八回「CSSプロパティの読み方講座～その1～」
Head Cleaner
第三十八回「noindexタグでindexさせない」
Atomエディタの文法チェッカー「W3C Markup Validator」
xサーバーでphpをhtmlで動作させる
WEB広告の話(ディスプレイ広告深堀り編)
wpで会員制サイトをプラグインで作成
カスタム投稿のカテゴリー表示- 指定したページでメイン画像を切り替える
スタイルシートのエラーチェック
WordPress プラグインでパスワード認証
コメント