レスポンシブなレイアウトを作成するための 12 の優れたグリッド フレームワークをお勧めします_html/css_WEB-ITnose

この記事では、レスポンシブレイアウトを作成するための優れたグリッドフレームワークを12個お勧めします。 Web デザイナーや開発者が適切なツールセットを採用し、柔軟なグリッド アーキテクチャに基づいて構築し、レスポンシブな画像をデザイン タスクに組み込めれば、レスポンシブ Web サイトの作成は難しい作業になる必要はありません。お楽しみください!

Pure

Pure は、あらゆる Web プロジェクトで使用できる、軽量で応答性の高い CSS モジュールのセットです。モバイルデバイスでの使用を十分に考慮しており、ファイルサイズは可能な限り小さく保たれており、CSSの各行は慎重に考慮されています。 Pure は Normalize.css に基づいて構築されており、ネイティブ HTML 要素のレイアウトとスタイルに加えて、最も一般的な UI コンポーネントを提供します。必要なのはこれらだけだと思います。

Tiny Fluid Grid

Tiny Fluid Grid を使用すると、Web プロジェクトのグリッド システムを定義できます。列、間隔のパーセンテージ、最小幅と最大幅を設定すると、アプリはダウンロード可能な CSS ファイルを生成します。

可変グリッド システム

可変グリッド システム グリッド システムは、Web サイトの基本的な CSS グリッドを簡単に生成する方法です。生成された CSS ファイルは 960 グリッド システムに基づいています。

Mueller グリッド システム

MUELLER は、Compass に実装された、応答性、適応性、および非応答性レイアウトのためのモジュラー グリッド システムです。列幅、シンク幅、ベースライン グリッド、メディア クエリを完全に制御できます。

GridSet

Gridset を使用すると、背後にある計算を考えることなく、簡単に列を追加し、比率を定義し、間隔を設定できます。グリッド システムは徐々に Web デザインの焦点になりつつありますが、印刷レイアウトに似ていますが、はるかに複雑です。 Web ページのグリッド システムは、より柔軟で応答性が高い必要があります。しかし、グリッドシステムの計画や計画は難しいものですが、Gridsetを使用すると簡単にグリッドシステムを使用できます。

34 グリッド システム

34Grid は、「均等に分散された列」レイアウトに基づいた応答性の高いグリッド システムです。他のグリッド システムと比較して、34Grid は各行に等間隔の列を提供します。

dGrid

Dgrid は、最新のブラウザーとオブジェクト ストレージを最大限に活用し、軽量でモジュール式で拡張が簡単な次世代グリッド コンポーネントです。

Zen Grids

Zen Grids は、SASS 上に構築された応答性の高いグリッド システムです。最も複雑なマークアップを削除することでレイアウトの作成が大幅に簡素化され、純粋な CSS と HTML を使用してレスポンシブ レイアウトを作成するにはグリッドベースのデザインのみが必要になります。

Cute Grids

Cute Grids は、レスポンシブ デザインをスムーズに開始できるグリッド システムです。これはモバイルファーストであり、5 つのメディア クエリが含まれており、完全に文書化されています。

Susy

Susy は、Compass の応答性の高いグリッド システムです。新しいメディア クエリ ブレークポイントをレイアウトにすばやく追加できます。

グリッド デザイナー

グリッド デザイナーは、列、サイズ、間隔を定義するための多くのオプションを備えたオンライン グリッド デザイン用です。

グリッド

これは柔軟な 12 列のグリッドで、任意のサイズ (行の最大幅で定義) に拡張でき、簡単にネストできるため、大量のレイアウトを作成する必要はありません。カスタム要素。