この記事では、レスポンシブレイアウトを作成するための優れたグリッドフレームワークを12個お勧めします。 Web デザイナーや開発者が適切なツールセットを採用し、柔軟なグリッド アーキテクチャに基づいて構築し、レスポンシブな画像をデザイン タスクに組み込めれば、レスポンシブ Web サイトの作成は難しい作業になる必要はありません。お楽しみください!
Pure は、あらゆる Web プロジェクトで使用できる、軽量で応答性の高い CSS モジュールのセットです。モバイルデバイスでの使用を十分に考慮しており、ファイルサイズは可能な限り小さく保たれており、CSSの各行は慎重に考慮されています。 Pure は Normalize.css に基づいて構築されており、ネイティブ HTML 要素のレイアウトとスタイルに加えて、最も一般的な UI コンポーネントを提供します。必要なのはこれらだけだと思います。
Tiny Fluid Grid を使用すると、Web プロジェクトのグリッド システムを定義できます。列、間隔のパーセンテージ、最小幅と最大幅を設定すると、アプリはダウンロード可能な CSS ファイルを生成します。
可変グリッド システム グリッド システムは、Web サイトの基本的な CSS グリッドを簡単に生成する方法です。生成された CSS ファイルは 960 グリッド システムに基づいています。
MUELLER は、Compass に実装された、応答性、適応性、および非応答性レイアウトのためのモジュラー グリッド システムです。列幅、シンク幅、ベースライン グリッド、メディア クエリを完全に制御できます。
Gridset を使用すると、背後にある計算を考えることなく、簡単に列を追加し、比率を定義し、間隔を設定できます。グリッド システムは徐々に Web デザインの焦点になりつつありますが、印刷レイアウトに似ていますが、はるかに複雑です。 Web ページのグリッド システムは、より柔軟で応答性が高い必要があります。しかし、グリッドシステムの計画や計画は難しいものですが、Gridsetを使用すると簡単にグリッドシステムを使用できます。
34Grid は、「均等に分散された列」レイアウトに基づいた応答性の高いグリッド システムです。他のグリッド システムと比較して、34Grid は各行に等間隔の列を提供します。
Dgrid は、最新のブラウザーとオブジェクト ストレージを最大限に活用し、軽量でモジュール式で拡張が簡単な次世代グリッド コンポーネントです。
Zen Grids は、SASS 上に構築された応答性の高いグリッド システムです。最も複雑なマークアップを削除することでレイアウトの作成が大幅に簡素化され、純粋な CSS と HTML を使用してレスポンシブ レイアウトを作成するにはグリッドベースのデザインのみが必要になります。
Cute Grids は、レスポンシブ デザインをスムーズに開始できるグリッド システムです。これはモバイルファーストであり、5 つのメディア クエリが含まれており、完全に文書化されています。
Susy は、Compass の応答性の高いグリッド システムです。新しいメディア クエリ ブレークポイントをレイアウトにすばやく追加できます。
グリッド デザイナーは、列、サイズ、間隔を定義するための多くのオプションを備えたオンライン グリッド デザイン用です。
これは柔軟な 12 列のグリッドで、任意のサイズ (行の最大幅で定義) に拡張でき、簡単にネストできるため、大量のレイアウトを作成する必要はありません。カスタム要素。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
