JSや要素の重複なしでこのレイアウトを構築することは可能ですか？CSSのみですか？
taeo920
私はこのレイアウトを構築する方法を見つけるのに苦労してきました。社会的要素を除いて、すべての要素の高さは不明です。関連する最新の要素はオプションです。
JSに頼ったり、要素を複製したりせずにやりたいのですが、それが可能かどうかは実際にはわかりません。
モバイルとタブレットは、flexboxと「order」プロパティを使用して非常に簡単に処理できます。フロートに戻すことでデスクトップレイアウトを処理できると思いましたが、要素の高さが不明であるため、これは保証されません（つまり、本文のコピーが短い場合、最新の要素や関連する要素が左にフロートする可能性があります）。
何か案は？それとも、それを吸い上げて、デスクトップブレークポイント用にJSを使用してDOMにサイドバーを動的に追加する必要がありますか？
編集：要素の順序に注意してください！デスクトップサイドバー要素をコンテナに配置すると、フレックスボックスを使用してモバイル/タブレットでそれらを並べ替えることができなくなります。また、デスクトップレイアウトはグリッドパターンに従わないため、グリッドレイアウトが適用されるとは思いません。
ヴィンセント・スメディンガ
このような2次元のページレイアウトは、CSSグリッドが設計された目的です。Flexboxは、アイテムを1つの次元に配置するのに適しています（ただし、ネストまたはラップするときに2番目の次元が簡単に続きます）。他の人が述べているように、このレイアウトはCSSだけで完全に達成できるはずです。
One approach using CSS Grid is having three template area definitions that change on each breakpoint, as demonstrated here.
Part of the HTML and SCSS for that:
<div class="grid">
<div class="area social"></div>
<div class="area body-social"></div>
<div class="area categories"></div>
<div class="area related-latest"></div>
</div>
.area {
&.social { grid-area: social; }
&.body-social { grid-area: body-social; }
&.categories { grid-area: categories; }
&.related-latest { grid-area: related-latest; }
}
@media (min-width: 64em) {
.grid {
grid-template-areas:
"body-social social"
"body-social categories"
"body-social related-latest";
}
}
I took the liberty of combining some of your sections into areas, as I’m unaware whether the visual design would disallow it. You might have to manage some additional gutters if it does. Also note that the right column in the wide layout is currently only sized to the length of the text inside, which will probably not hold with real content. There will be more use cases I haven’t addressed, but if anything my example can be a starting point for you to work from.
わずかに異なるアプローチを定義することであろうgrid-template-columnsとgrid-template-rows、各ブレークポイントのために、正しい設定grid-columnsとgrid-rows各エリアまたはセクションのために。これは、それ自体に長所と短所がある、より明確なサイズ設定を意味します。
さらに、CSSグリッドをサポートせずにブラウザーを使用している人々にどのレイアウトを提示するかを考える必要があります。
CSSの最新のレイアウト手法について詳しくは、RachelAndrewsとJenSimmonsの記事とビデオをご覧になることをお勧めします。
他にご不明な点やご意見がございましたら、お気軽にお問い合わせください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
CSSでこのようなグリッドレイアウトを実現することは可能ですか？
- 2
HTML（5）とJavaScriptのみを使用してトレントクライアントを構築することは可能ですか？
- 3
要素の数なしでJavaで配列を構築することは可能ですか？
- 4
cssで数値の二重アウトラインを作成することは可能ですか？
- 5
Android jarにレイアウトやその他のリソースを含めることは可能ですか？
- 6
このようなRecyclerview内でカスタムレイアウトを作成することは可能ですか？
- 7
CloudFlareのタイムアウトを増やすことは可能ですか？
- 8
Androidレイアウトの外側の要素を再利用することは可能ですか？
- 9
Funcのコレクションを構築することは可能ですか？
- 10
GoJs1つの図に複数のレイアウトを含めることは可能ですか
- 11
Ionic 2を使用して携帯電話やタブレットのレイアウトを変更することは可能ですか？
- 12
vCenterなしでvSphereクライアントのみを使用することは可能ですか？
- 13
複数のアカウントでlightsailインスタンスを管理することは可能ですか？
- 14
レイアウト内の特定のレイアウトを使用してアクティビティの名前を取得することは可能ですか？
- 15
Meteorからヘッドレスノードベースのクライアントを構築することは可能ですか？
- 16
Javaのcvsclientのディレクトリ構造のみをチェックアウトすることは可能ですか？
- 17
このようなカスタムGUIをJavaで構築することは可能ですか？
- 18
このレイアウトはdivで可能ですか？
- 19
CircleCIで、別の構成で再構築することは可能ですか？
- 20
Android、Java：ドラッグ可能なリストに複数のレイアウトを含めることは可能ですか？
- 21
next（）で変更するオブジェクトへの参照を生成するイテレータを構築することは可能ですか？
- 22
二重分割せずに、解析されていない文字列のリストから辞書内包表記を構築することは可能ですか？
- 23
Kotlin Android Extensionで特定のレイアウトをプログラムで含めることは可能ですか？
- 24
複数のマスターレイアウトを作成することは可能ですか-レイアウトLaravel？
- 25
ReasonReactを使用して単一のコンポーネントを構築することは可能ですか？
- 26
関数の引数として固定サイズの配列をインプレースで構築することは可能ですか？
- 27
CSSとdivでこのレイアウトを実現するにはどうすればよいですか？
- 28
Pythonのみを使用してソフトウェアを作成することは可能ですか？
- 29
トランザクションで進化しない場合、ContractState の重複ストレージを回避することは可能ですか?
コメントを追加