問題タブ [grid-system]

複製

最高の CSS フレームワークとは何ですか? また、努力する価値はありますか?
Bells and Whistles CSS フレームワークを推奨できる人はいますか?
CSS フレームワークの選択を手伝ってください: 960 vs ブループリント vs ???
最高の CSS フレームワーク?
CSS フレームワークはどのように選択しますか?
最高のCSS GridFrameworkは何ですか

私はBlueprint CSSを使い始めましたが、 960 Grid SystemとYahoo!について多くのことを聞いています。グリッド。

どちらを使用するか (またはその理由) をうまく把握できないようです。

どのグリッド システムを使用すべきかについてアドバイスを求めています。使いやすさ、柔軟性、コードの読みやすさは私にとって重要です。

グリッドシステムを使用する理由を理解しようとしています。いくつか読んだけどよくわからない。私はページの html に何かを配置するだけで完了していましたが、新しいプロジェクトがあり、明らかにベスト プラクティスであるため、グリッドを使用したいと考えています。

別のSOの質問で参照されている記事を読んだところ、グリッドデザインはあらゆる種類の開発、アプリケーションフォームのデザインでさえあると書かれていました。グリッドにスナップするなどのことを考えさせられましたが、Web デザイン領域のグリッドが同じかどうかはわかりませんでした。私は、誰かが私に、私がすでに使用した Google へのリンクではなく、簡単ではあるが過度に複雑ではないビューを提供してくれることを望んでいました.

助けてくれてありがとう。

編集: この Web サイトが最も簡単 であることがわかりまし た。列内のすべてが列に収まるように「粉砕」されていますか? それは私には意味がありません。

編集:以下のグリッド 960 チュートリアルを読み、気分が良くなりましたが、最後には次のように書かれています。

プロダクション コードで Grid 960 の概念を使用することもできますが、プロダクション全体でフレームワークに固執することはお勧めしません。CSS フレームワークは他のツールと同様に、用途があります。それを念頭に置いて、プロトタイプを作成してください！

これを文脈から外そうとするつもりはありませんが、本番環境で使用しない場合、何の意味がありますか? プロトタイピングの必要性は理解していますが、プロトタイプが気に入った場合は、960 グリッドを使用してみませんか? コメントが理解できないかもしれません。ありがとう。

編集：

960 システムは生産用ですか?

私はしばらくの間 960 グリッド システムを使用してきましたが、div にパディングを追加するときに常に問題が発生します。

box-sizing: border-boxグリッド システムの CSS を変更して *grid_x* クラスに追加するのが良い/安全な方法かどうか疑問に思っています。デメリットはありますか？

これまでのところ、追加のパディングを含む内部 div を使用してきたので、グリッド クラスを含む div をいじることはありません。それはうまくいきましたが、私のレイアウトをいたるところに余分な div で埋めるだけです。

良いオプションですかbox-sizing、それとも他の回避策、解決策、提案はありますか?

どうもありがとう

私はこのページで 960 Grid System を使用しており、ここで私の instapaper ブックマークを一覧表示しています: http://labs.tonyhue.com/bookmarks/

ただし、ソーシャル メディアのセクションは他とは一線を画しています。これは、プログラミング セクションに続いて右揃えにする必要があります。何か案は？

私はTwitterBootstrapをCssフレームワークとして使用しており、モニターの大部分が現在解像度になっているときに効果的に使用できるのに、なぜそのスペースを無駄にする1280 X nのか考えています。私はBootstrapが大好きなので、今すぐ停止して、大画面用のcss（または上司が望むフルスクリーン幅）を作成するプロセス全体をやり直したくありません。

ハックを変更/変更したり、名前を付けたりすることは可能ですか？cssファイルをフルスクリーンまたは現在使用している940pxではなく1200Px以上のサイズに調整することはできますか？

ビューポート幅全体をサポートする CSS グリッド システムはありますか? ほとんどの Grid System は、960px から 1140px までの幅を意図しているようです。これは、通常のユーザーが最も展開する幅です (ほとんどの人が 1280px × 1024px を使用しているため)。

私の目的は、フル HD 解像度 (1920px × 1080px) を使用するユーザーにもレスポンシブなレイアウトを提供することです。

それを作るためのより良い/より簡単な方法があれば、plsは私に知らせてください

グリッド システムとしてSemantic.gsを使用しています。ネストされた列の例に従って、可能な限りグリッドをたどりながら、必要なものを作成しようとしています。Semantic.gs の入れ子になった列のサンプル コードを考える:

HTML

以下

私の質問は、可能な限りグリッド システム (semantic.gs) に準拠しながら、ネストされた列の親にパディング (理想的にはガターと同じ幅) を追加するための最良の方法は何ですか? 注、私は 960px の固定レイアウトを使用しています。

これは、ベージュ色の親要素の左右のパディングで達成しようとしているものの例(Photoshop、上記のコードによるとは限りません)の画像です:

更新: Sandeeps の例に従って、これを行うことができましたが、960px グリッドを使用しているとは言いませんでした。ここに私の結果があります: http://bit.ly/M5fr5N .

yui3の資料が見つかりませんでしたので、以下にご意見をお聞かせください。ベストプラクティスとその理由は何ですか？

また

よろしく、城

一度に3つのインライン画像の2つのグリッド行を表示するグリッドシステム内のループに取り組んでいます（ページネーション）。<div id="clear"></div>MySQL行が3行返されるたび に表示するようにコードをデバッグしようとしましたが、成功しませんでした。

PHP / HTML

グリッドを設定する方法は、左から右への各グリッド行内alphaに、最初の要素にomega割り当てられたクラスと最後の要素に割り当てられたクラスがあります。<div id="clear"></div>技術的に3つのMySQL行が返されるたびに表示するには、次のように機能する必要があります。

生成されたリストアイテム

しかし、そうではありません。返された6つのグリッド行内で合計18の画像に相当し<div id="clear"></div>、MySQLの行1〜3と13〜15の後に正常に生成されますが、MySQLの行6〜9の場合、<div id="clear"></div>MySQLの行6の後に表示され、9の後に表示されます。

これが理にかなっていることを願っています。どんな提案でも大歓迎です。

Foundation 3 を使用してレスポンシブ Web サイトを構築していますが、フッターとナビゲーションの背景幅を幅全体に合わせたいですか? 行に名前を付けました

これを修正する方法を探してみましたが、選択肢がありません。これはfoundation.cssファイルの小さな修正だと思いますが、私はまだ慣れていないので、現時点では圧倒されすぎています。

どんなポインタでも大歓迎です。