Gridlex CSS Grid Systemを使ってモダンなレイアウトを簡単に作成する

フロントエンドの開発は、の導入により根本的に改善されました CSSフレックスボックス. これにより、はるかに簡単になります グリッドと列を作成する レスポンシブレイアウトに自然に移行する.

独自のflexboxグリッドを最初からコーディングする代わりに、次のようなツールを使用する方がはるかに簡単です。 グリッドレックス. この無料のオープンソースフレックスボックスライブラリは 超軽量 そして、非常に カスタマイズが簡単.

あなたがするのはただ Gridlexスタイルシートを追加する あなたのWebページに そのグリッドクラスを操作する. 内部列はクラスを取ります .コル そしてこれらのすべてを .グリッド 容器。これはすべての列を定義します 同じ幅で そして統一されたインターフェースを作ります.

このデフォルト 上書きすることができます 追加して サイジングクラス 各列に。こうすることで、1列を幅70％、別の列を幅30％にすることができます（コンテンツ/サイドバーなど）。.

あなたはたくさんのトンを見つけるでしょう グリッドサンプル Gridlexのホームページで ライブデモ そして コードスニペット あなたのサイトにコピー＆ペーストする。それはとてもたくさんの巨大なライブラリです オプションのクラス あなたがどんなウェブサイトのための最も単純なグリッドを構築するのを手伝うために.

すべてのグリッドは合計で 合計12のミニカラム, そのため、各列がどのくらいのスペースを占めるべきかを定義できます。これはわかりにくいかもしれませんが、ビジュアルデモを見たときに意味があります。.

これが コード例 幅が異なる大きなグリッドに使用されます。

 
 
… 
 
… 
 
… 
 
 

そのことに注意してください .グリッド クラスにはすべてが含まれ、列は 12分割 （例では、これはそれぞれの幅の1/3になります）。ただし、固定列 スパン2と6 cols それぞれ、つまり一番最初の列 自動幅を使用します 残っているものに基づいて.

他の2つの列を使用して、残りの4つの列（12-6-2）があると推測できます。 合計12を打つ. これはすべて非常に単純な数学ですが、クラス名は混乱を招く可能性があります。プロジェクトでGridlexを使い始めると、すぐに命名システムを使用できます。.

Gridlexは現在 バージョン2.x そしてそれは 常に更新されている GitHubで。ブラウザのサポートが拡大するにつれて、より多くのサイトがページグリッドにこのモデルを採用するようになり、flexboxへの注目が高まることを保証します。.

あなたも見つけることができます フルギャラリー Gridlexを実行しているWebサイトを実際のWebサイトに適用したときの外観を確認する.

これまでにflexboxを使ったことがないのであれば、Gridlexは楽しいライブラリになるでしょう。しかし私はまたあなたの知識をテストし、あなたが基本を理解するのを助けるために楽しいフレックスボックスゲームを使って最初に練習することを勧めます。.

Gridlexは 無料で利用可能 GitHubレポジトリで、あるいはnpmかbowerを使って引っ張ることができます。それは提供しています 完全な文書 幅が異なる列のデモやメディアクエリを含む、メインサイトの.

あなたが持っている フルコントロール フレックスボックスのデザインとそれだけで いくつかのCSSクラスを取ります それを実現するために！また、Gridlexを使用して構築したサイトについて簡単な質問がある場合や共有したい場合は、Twitter @ webdevlintで作成者にメッセージを送信できます。.