Grid.css - Web開発者のための最小限のグリッドシステム

Bootstrapのような大規模なフロントエンドフレームワークには、 独自のグリッド設定. しかし、彼らも たくさんの手荷物が付いてくる あらかじめデザインされたページ要素とJavaScriptコンポーネントの形で.

もっと小さくて合理化されたグリッドシステムを探しているなら、あなたは好きになるでしょう Grid.css.

この無料のオープンソースライブラリには、伝統的なものが同梱されています。 12列グリッドシステム あなたはどんなレイアウトのために構築することができます。 CSSは本当に使いやすく、ファイル自体も 560バイトしかない （それは半分KBです！）

始めるのはとても簡単で、必要なだけです。 1つのCSSファイル ヘッダに追加.

あなたは見つけることができます 直接ダウンロードリンク Grid.cssホームページまたは公式のGitHubリポジトリにあります。あなたも使用することができます 生CDNバージョン 自分でホストせずにGitHubから直接このファイルを埋め込む.

今、あなたはあなたの列構造を設定することができます あなたが欲しい要素を使う （div、sectionなど）.

これは一般に .行 要素（コンテナ） 多くの人と一緒に 内部列要素. 列クラス 数字を使う コンテナ内の合計スペースを定義する, .col4 合計12列のうち4列を占める.

これが スニペットの例 デモから

カラムクラスであれば、好きなカラムクラスを自由に組み合わせて使用​​できます。 12まで追加.

これはあなたもできることを意味します ページを再構築する しかしあなたが望むのは、 異なる行コンテナ. 例えば、あなたはあなたのヘッダのために1つの大きなスパンを持つことができますがあなたのページ本体のために2つの異なるrow / col設定を使う.

当然、このライブラリは 100％無料 そして オープンソース, だからあなたは自由に編集をすることができます.

作者、アーメド・タレク, Butnsも作った これは、多くのボタンUIキットの変種です。それ Grid.cssとうまくペア, したがって、どちらも新しいWebプロジェクトを開始するときに選択する優れたライブラリです。.