CSS Gridのトラック幅計算
コンテナの余白と間隔を差し引き、固定幅とfr指定を組み合わせたグリッドの各列幅を計算します。
計算結果
結果
—
計算手順
手順を1つずつ、またはまとめて表示できます。現在の入力値を使った計算手順です。
計算方法
残りの幅を配布する前にギャップを差し引いたときに、すべての固定トラックと分数トラックをカウントする。
Remaining=width−2padding−gaps−fixed widths; each fr width=remaining×weight/sum(weights)
計算例
200 pxトラックが1つ、同じフルートトラックが2つ、20 pxギャップが2つある1000 pxのエリアは、フルートトラックごとに380 pxを残す。
前提条件と入力上の注意
明示的にリストされたトラックの行。固有の最小値、min-コンテンツ、オートフィット、スパン、ボーダー、スクロールバー、または実際のCSSレイアウトエンジンはない。固定されたトラックは、出力内の部分的なトラックよりも前に出る。
このツールの使い方
自分の値を入力できますか？
はい。入力例をご自身の値に変更してください。結果・計算手順・表・対応する図が入力に応じて更新されます。空欄や無効な値がある場合は結果を消去し、不足した入力を自動的に例の値で補うことはありません。
結果は厳密ですか？
浮動小数点演算を使用し、表示時に丸めています。計算式・前提条件・記載されたデータ精度を確認して結果を解釈してください。
入力内容は送信されますか？
計算はブラウザー内で行います。アカウント・ファイルのアップロード・外部AIサービスは不要です。ページを再読み込みすると入力値は保持されません。
画面対角寸法と画素数から、有効幅・高さ、縦横比、画素密度、画素ピッチを寸法図とともに求めます。
外周の余白とスプライト間の間隔を指定し、アトラスに収まる同じ大きさのスプライト数を求めます。
既知の2点と目標xまたはyから他方の座標を求め、直線モデルで補間・外挿を明確に区別します。
広告掲載用スペースです。