何年もの間、実際の 2 次元レイアウトが必要なデザインが、入れ子になったフレックス コンテナのスタックに手を伸ばすという私の本能でした。別の行内の列内のカードの列、それぞれが曲がり、それぞれがスペースを求めて他のカードと戦いました。ピクセルが最終的に希望する場所に着地するという意味で機能しましたが、それは決して適切なツールではなく、デザインを変更する必要があるたびにショートカットの料金を支払いました。CSS グリッドはまさにこのために構築され、それを避けるのをやめた日、レイアウト コードが短くなり、マークアップがきれいになりました。
あまりにも長い間グリッドから遠ざけていたのは構文でした。 grid-template-columns: repeat(3, minmax(0, 1fr)) は指を転がすようなフレーズではなく、あなたが宣言するトラックと表示されるボックスの関係は、それが数十回起こるのを見るまでは明らかではありません。 "私は欲しいものを知っています"そして"私はそれを生成するプロパティを知っています"まさにジェネレーターが閉じるものです。
ザ・ CSS グリッドジェネレータ 列と行の数を設定し、各軸のサイズを選択し、ギャップをダイヤルし、配置を調整しながら、ライブ プレビューが目の前でリフローします。表示されるものを生成する正確な CSS は、その下にあるコピー対応ボックスに配置されます。暗記する必要がある仕様から、クリックして構築するレイアウトにグリッドが変わります。
tl;dr: CSS Gridは2 次元のレイアウトモデルで 行と列を同時に制御します コンテナがそれを駆動して通ります
grid-template-columns、grid-template-rows、gap、そして4 つはプロパティを正当化し、整列させます このジェネレータは、それらすべてを公開し、ライブプレビューを表示し、使用するクリーンなCSSを放出しますrepeat()そして、fr単位. preview は出力した宣言と同じ宣言でレンダリングされるため,表示されているものはまさにあなたが貼り付けたものです.それはサインアップなしでブラウザー内で完全に実行されます.
CSS グリッド ジェネレーターはどのような問題を解決しますか?
CSS Gridの難しさは複雑ではないということです抽象的であるということです構造 (" 3 つの等しい列の間に少しスペースがある") を記述しブラウザがジオメトリを計算しますその間接的な点が全体のポイントですなぜならそれが単一のメディアクエリなしでグリッドを応答させるものだからですしかし間接的なものは頭の中で見ることはできません repeat(3, 1fr) そして、レンダリングされたボックスのグリッドを見ることができる方法で、結果を即座に感じます。
ジェネレーターは書き込み-保存-更新ループを 1 つのインタラクションに折りたたみます。列数を変更すると、3 つのボックスが 4 つになります。トラックを から切り替えます 1fr にする auto そして列はその内容の幅にスナップします. あなたはギャップを上げて箱は呼吸します. これを10 分後に,分数単位はあなたが翻訳する記号であることを停止し,あなたが意図的に到達するものになります.そして,あなたが探索を終えると,あなたは転写するメモを残されていません,なぜなら,作業中のCSSは出力ボックスにすでにあなたのために書かれているからです.
2 つ目の、より静かな利点があります 操作によってレイアウトを構築すると、ツールは有効で整形式のCSSのみを発光するように強制されます 壊れたものを生成することはできません grid-template-columns クリックすることで値を取得できるため、出力は常に自信を持って貼り付けることができます。その信頼性が、すべてのルールを最初から作成するのではなく、一連のビジュアル CSS ビルダーを近くに保管する理由です。
グリッドコンテナはどのプロパティを制御しますか?
CSS Grid は flexbox と同様に、コンテナとそのアイテムの間で責任を分割します。コンテナはトラックと全体的な構造を定義します。これがレイアウトの決定の大部分が実行される場所であるため、ジェネレーターが焦点を当てる場所です。各コンテナ プロパティが行うことは次のとおりです。
| 財産 | 制御するもの | 共通の価値観 |
|---|---|---|
grid-template-columns |
列の数とサイズ | repeat(3, 1fr)、 200px 1fr、 auto |
grid-template-rows |
行の数とサイズ | repeat(2, auto)、 100px、 1fr |
gap |
トラック間のスペース | たとえば、任意の長さ 16px や 20px 10px |
justify-items |
行軸に沿ったアイテムの位置 | stretch、 start、 center、 end |
align-items |
列軸に沿ったアイテムの位置 | stretch、 start、 center、 end |
justify-content |
グリッドがコンテナよりも狭い場合の行軸上の位置を追跡します | start、 center、 space-between |
align-content |
列軸上のトラック位置 | start、 center、 space-between |
このスティックを作るメンタルモデルは、トラックとアイテムの区別です。 grid-template-columns あんど grid-template-rows グリッドの空の車線であるトラックを定義します その隙間はそれらの車線の間に位置します The justify-items あんど align-items プロパティは、各アイテムを、それが占めるセル内に配置します justify-content あんど align-content スペアルームがあるときに、トラックのセット全体をコンテナ内に配置します。ジェネレーターはこれら 2 つのレベルを視覚的に分離して保持するため、セル内でアイテムを移動することと、ページ内でグリッド全体を移動することの違いを感じることができます。
fr単位の意味は?
ザ・ fr unit はモデル全体に対して支払う CSS Grid のピースであり、コピーするよりも理解する価値があります。 1つ fr は、任意の固定サイズとギャップが減算された後のグリッドコンテナ内の空き領域の1 分数を表す。 と書く場合 grid-template-columns: 1fr 1fr 1fr、the container& #39; s available width is divided in three equal parts.と書く 2fr 1fr 1fr そして、最初の列はスペースの半分を取り、他の 2 列は残りを分割します。ブラウザはサイズ変更ごとにこれらの分数を再計算します。そのため、分数ベースのグリッドはブレークポイントなしで流動的です。
これは、ほとんどのレイアウトでグリッドがパーセンテージよりも優れているようにする動作です。 のセット 33.33% 列はギャップを無視してオーバーフローします パーセンテージとギャップを足すと コンテナよりも多くなるからです 分数単位はギャップを取り出した後に計算されますので repeat(3, 1fr) ギャップが常にフィットします。ジェネレータのデフォルトは です 1fr まさにこの理由のための列、そしてあなたはギャップを変えるときに3 つの等しい列がそれらの比率を保持するのを見ることができます 代わりにそのコンテンツを抱く列が必要な場合は、それを切り替えます auto、 min-content、または max-content そしてすぐに違いを見てください。
3 列レイアウトを作成するにはどうすればよいですか?
これは人々がグリッドで構築する最も一般的なものの1 つであり、レシピは2 行です コンテナを設定します display: grid そしてそれを与えます grid-template-columns: repeat(3, 1fr)。 とすると、コンテンツが必要とする数の行に流れ込む3 つの等しい列が生成されます。 a を追加します gap そして、あなたはカードのレイアウトを持っています.
ジェネレーターで、列数を 3 に設定し、サイズをオンのままにします 1fr、そしてプレビューは等しいセルのグリッドをレイアウトします 出力ボックスは以下を示します:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}
これが入力するのではなくクリックして構築する価値がある理由は、実際のレイアウトが決してこれほどきれいではないからです サイドバーを固定幅にしてコンテンツを曲げるか、最初の行を残りの行よりも高くする必要があります それらの変更のそれぞれは、ジェネレーターの1 つのコントロールと出力の1 つの編集された値であり、スタイルシートにコミットする前に効果を確認します グリッドと特定のブロックに対するフレックスベースのアプローチのどちらかをまだ決定している場合、 flexbox generator はコンパニオン ツールであり、このガイドの後半の比較では、それぞれがいつ勝つのかについて説明します。
グリッドオーバーフレックスボックスはいつ使用すればよいですか?
これは両方のモデルを知ったら一番重要な質問です正直な答えはレイアウトが持つ次元数に依存するということです Flexboxは1 次元ですアイテムを1 つの軸、行または列に沿って配置し尋ねたらラップします グリッドは2 次元です 行と列を一緒に制御するため、アイテムはその行と列の両方によって一度に位置決めできます。
私が使う実用的なルールはこれです 一連のものを一列に並べている場合 ナビゲーションバー、タグの列、ツールバー、フォームフィールドのスタック、つまりflexboxです 行と列の両方がある構造体を並べる必要がある場合、ヘッダー、サイドバー、コンテンツエリアを備えたページシェル、またはすべてのカードがクリーンなグリッドライン上に座っているギャラリー、つまりグリッドを配置している場合、この2 つはライバルではありません; グリッドセルにはフレックスコンテナが含まれることが多く、フレックスアイテムは小さなテーブルとしての分割です。
| 質問 | フレックスボックス | CSS グリッド |
|---|---|---|
| 寸法 | 一度に 1 つの軸 | 行と列を一緒に |
| に最適 | ツールバー、ナビ、アイテムの行、ラッピングタグ | ページレイアウト、ギャラリー、ダッシュボード、フォーム |
| によって駆動されるサイズ | コンテンツ、そして配信 | 宣言するトラックテンプレート |
| アライメント | justify-content、 align-items |
同じプラス justify-items、 align-content |
| 通常の使用 | グリッドセルの内部 | 全体のページまたはセクションのフレーム |
ジェネレーターは、両方の方法で同じ視覚結果を構築し、どちらがクリーナールールを生成するかを確認できるため、このコンクリートを作ります。等しいカードのギャラリーの場合、グリッド付き repeat() は2 本のラインで、flex はすべての子供に幅がある包装容器です。 1列でアイテムを端まで広げる必要がある場合は、で曲げます space-between は 短道.
ギャップ、正当化する内容、調整する内容の違いは何ですか?
この3 つは、いずれも空間を扱っているため、しばしば混乱するが、異なるレベルで動作する。 としている gap プロパティはトラック間の固定間隔を設定し、それはあなたがほとんどすべてのグリッドで使用する1 つです。 1 つの値は行と列を均等にスペースします; 2 つの値は、行ギャップと列ギャップを別々に設定します、順序行で次に列でジェネレータは、独立して2 つのギャップを設定し、それらが異なる場合にのみ速記を発するので、出力は状況が許す限り短いままです。
justify-content あんど align-content、対照的に、grid& #39; sトラックがコンテナよりも小さい場合にのみ、配布するためのスペアルームを残して、何かをしてください。 あなたの列がすべて固定ピクセル幅であり、それらがコンテナを満たしていない場合、 justify-content: center 線路のブロック全体を中心に置きます space-between はそれらを端まで押し出します。 と fr すでに幅を埋め尽くしている列、これらのプロパティには配布するものがなく、何もしないように見えるため、一般的な混乱の原因です。ジェネレータは、デフォルトのままにすると出力からそれらを省略します startとなり、コピーされた規則中のすべての行は目に見える効果を持つものである。 有意義な宣言のみを発するその習慣は、私が で頼りにしているものと同じである グラディエントジェネレータ そして、 box-shadow generator、ノーオプラインだらけのルールは一見信用できないルールだから。
ジェネレータはどのようにプレビューを正直なままにしますか?
任意のビジュアルビルダーの罠は、プレビューとエクスポートされたコードがバラバラになる可能性があることです。プレビューをある方法でレンダリングし、別の方法でコードを生成するツールは、再現しないレイアウトを教えるため、役に立たないというよりも悪いです。このジェネレーターは、単一の宣言リストからプレビューとコピーされた CSS の両方を構築することで、それを回避します。どのプロパティを放出するかを決定する同じ関数が、プレビューボックスのスタイルを設定する関数であるため、表示される内容はまさに貼り付け内容と一致しません。
その設計選択が、出力で使用される理由です repeat() 1 つ以上のトラックを持つ任意の軸の場合。 1 つのトラックは裸のサイズとして放出されますが、2 つ以上のトラックは に崩壊します repeat(n, size)、これは人間が書くであろうことと、カウントが大きくなっていくにつれてルールを読み取れる状態に保つことの両方です。小さなことですが、それは出荷する出力と書き換える出力の差です。
レスポンシブカードグリッドを段階的に構築します
よく使うワークフローはこうです。 column count at three と size on から始めます 1fr.等しい3 つの流体列ができました. 行のサイズは に設定します. auto したがって、各行は最も高いカードに合わせて成長します。カードの場合は約 20 ピクセル、快適なものにギャップを上げます。これは完全な応答性の高いカード グリッドであり、出力は 4 行です。
メディアのクエリなしでそれを単独でラップするには、実際のプロジェクトの次のステップはスワップです repeat(3, 1fr) のため repeat(auto-fill, minmax(240px, 1fr))、これは、ブラウザにできるだけ多くの240 ピクセル最小列をフィットさせ、それらを塗りつぶすために伸ばすように指示します ジェネレータは、固定カウントの開始点を与えます; その1 つの編集は、それを自己ラッピンググリッドに開始点を理解することは、編集を明白にするものであり、それが、それを貼り付けるのではなく、構築することによってレイアウトを学習するための議論全体である このように動作するツールのセットを組み立てるためのより広範なケースは、上のピースにあります Web 開発者ツールキット、そしてその背後にあるワークフローの習慣は次のとおりです 開発者の生産性向上ツール ガイド.
CSS Gridをサポートするブラウザは何ですか?
CSS Grid は現在のすべてのブラウザでサポートされており、何年も前からサポートされています。このジェネレータが発行するプロパティは標準で接頭辞が付けられていないため、出力は Chrome、Firefox、Safari、Edge で機能し、プロジェクトが今日現実的にターゲットにしているブラウザのベンダー プレフィックスやフォールバックはありません gap 最後に広く着陸したグリッド コンテナ内のプロパティも、現在では普遍的にサポートされています。つまり、コピーする CSS は書かれたとおりに実稼働環境に対応できるということです。これは、グリッドの初期には必ずしも真実ではなく、モデルが最終的にプログレッシブ機能強化ではなくデフォルトの選択となる理由の 1 つです。基礎となるルールについては、W3C の CSS グリッド レイアウト モジュール レベル 1 仕様が主要なソースであり、ジェネレーターがそれに従う直感を与えたら読む価値があります。
これと並行して、より広範なビジュアル ツールキットを構築している場合は、 border-radius generator あんど CSS クランプジェネレータ セットを丸めます コーディング ツール ガイド 私が最もリーチするものを集めます。
よくある質問
CSSグリッドジェネレータとは何ですか?
CSS グリッド ジェネレーターは、選択した設定から CSS グリッド レイアウト コードを構築するビジュアル ツールです。列、行、トラック サイズ、ギャップ、位置合わせを選択し、結果のライブ プレビューとともにグリッド テンプレート CSS を出力します。
CSS Grid における fr 単位の意味は何ですか?
fr単位は、グリッドコンテナ内の空き領域の一部を表します。 grid-template-columns: repeat(3, 1fr)は、利用可能な幅の等しいシェアをそれぞれ取る3 つの列を作成し、コンテナのサイズが変更されるとリフローします。
CSS Gridとflexboxの違いは何ですか?
CSS Gridは、行と列を一緒に制御する2 次元モデルで、ページレイアウトやカードグリッドに最適です Flexboxは1 次元で、単一の軸に沿ってアイテムを配置し、ツールバーと行を補完し、しばしば一緒に使用されます。
応答性の高いグリッドを作成するにはどうすればよいですか?
fr単位を使用してトラックが利用可能な幅を共有するようにし、repeat()をminmax()と結合し、それ自体をラップするグリッドに対してauto-fillまたはauto-fitを拡張できる開始点としてfrトラックでrepeat()を放射するジェネレータである。
CSS Gridのギャッププロパティとは何ですか?
gap はグリッドトラック間の間隔を設定します。 single value spaces both rows and columns equally; 2 つの値は行ギャップと列ギャップを別々に設定し、 order row-gap then column-gap に設定します。
生成されたグリッド CSS は、本番環境で使用しても安全ですか?
はい。 CSS グリッドは最新のすべてのブラウザでサポートされており、ツールは標準の接頭辞なしのプロパティを放射します。すべての処理はブラウザで行われるため、アップロードされるものは何もなく、ツールはロードされるとオフラインで動作します。
CSS グリッド ジェネレーターはモバイルで動作しますか?
はい。このツールは完全に応答性があり、携帯電話、タブレット、デスクトップ上の最新のブラウザで動作します。生成された CSS は、ビルドするデバイスに関係なく同一です。
このCSSグリッドジェネレータは無料ですか?
はい。サインアップも透かしも使用制限もなく完全に無料です。生成されるグリッド CSS は、あらゆるプロジェクトで使用できます。
