CSS グリッド レイアウト 正方形のセル

CSSGrid-Layoutをベースとしてダッシュボード風のビューを作成したいと考えています。画面の全長に 16 列を配置したいと考えています (応答性があるはずです)。セルを正方形にするには、セルの高さをセルの幅によって決定する必要があります。問題は、一部のセルを複数のセルにまたがりたいことです。たとえば、2x1 セルを占める要素が必要です。基本的なグリッドレイアウトがあります: .grid-container{display:grid;grid-template-column

P粉593536104 2023-08-15 20:13:32 0  1  485

CSS グリッド レイアウト、自動的に行を追加し、列幅をグリッド項目の最大幅に設定

任意の数のグリッド項目を含むグリッド レイアウトが必要で、グリッド項目がいっぱいになると、次のような新しい行が自動的に作成されます。 #grid{display:grid;width:256px;border:1pxsolidblack ;grid-gap:12px ;grid-template-columns:repeat(auto-fit,minmax(75px,1fr));}#gridspan{background-color:lig

P粉818317410 2024-03-28 11:13:36 0  1  444

グリッド レイアウトの展開をアニメーション化するにはどうすればよいですか?

グリッド レイアウトの展開をアニメーション化する方法を知りたいです。コードからわかるように、4 つの div があります。そのうちの 2 つは表示され、残りの 2 つはチェックボックスが選択されている場合にのみ表示されます。チェックボックスをオンにすると、div3 と div4 を含む別の行が追加されます。拡張機能をアニメーション化するにはどうすればよいですか?グリッドのサイズを小さくしておくことをお勧めします。アニメーションが（存在しない）マージンに影響を与えたくないのです。これもJavaScriptを使わずにやりたいと思っています。出来ますか？ <!DOCTYPEhtml>&l...

P粉937382230 2023-08-31 21:09:37 0  1  496

単一のグリッドまたは Flex を使用して多様なカード レイアウトを作成する: 実用的なガイド

写真のようなレスポンシブカードレイアウトを作成しようとしています。私が現在行っているのは、コンピューター、タブレット、モバイル デバイス用に個別のレイアウトを作成することです。次に、メディア クエリを使用して、他の 2 つのビューの表示プロパティを display:none に設定します。例: [コンピュータ] ビューにいる場合、コンピュータのカード レイアウトではディスプレイが「なし」に設定されていませんが、他の 2 台のコンピュータではディスプレイが「なし」に設定されています。これは機能しますが、多くの冗長性が生じます。 Flex または Grid を使用して 3 つのレイアウトすべてを実...

P粉808697471 2024-04-02 21:07:36 0  2  508

コンテンツの拡張を制限するグリッド項目

TL;DR: CSS グリッド レイアウト用の table-layout:fixed に似たプロパティはありますか?月を表す大きな 4x3 グリッドと、日付を表す 7x6 グリッドが内部にネストされた年表示カレンダーを作成しようとしています。カレンダーはページ全体に表示される必要があるため、年のグリッド コンテナーの幅と高さは 100% に設定されます。 .year-grid{幅:100%;高さ:100%;表示:グリッド;グリッドテンプレート:repeat(3,1fr)/r

P粉199248808 2023-08-20 19:49:37 0  2  519

vim - エディター ウィンドウの最も美しいレイアウトは何ですか?

積み重ねる場合、最適かつ最も実用的なウィンドウ レイアウトは何ですか? 2 列、2 行、複数行複数列、グリッド、または縦 T ですか? または、他の何か？

習慣沉默 2017-05-16 16:41:12 0  11  1500

html - CSSレイアウトテーブルのセル間隔

テーブルレイアウトはcellspacing=0を使用しており、上部と下部のtrの間に1pxのギャップを表示する方法

迷茫 2017-05-16 13:28:07 0  2  1037

CSSでグリッド線を表示できますか?

CSSグリッドレイアウトを学び始めました。理想的な世界では、複数のグリッド ボックスを含む div を設定し、その中に要素を正確に配置し、必要に応じてオーバーレイを提供できるようになります (Illustrator でグリッド上にスティックを使用するようなものです)。グリッドを視覚的に表現しないとこれは非常に困難です。ライブ サーバー上でグリッドを表示することはできますか? Chrome 開発ツールの「グリッド線の表示」を使用してみましたが、更新または変更を行うたびにグリッド線が消えてしまいます。または、複数の要素と空のスペースで構成されるより正確なものが必要な場合

P粉133321839 2024-03-31 20:38:21 0  2  559

Vuetify プロジェクト リストのアダプティブ グリッド レイアウト

よくあると思われる問題に遭遇しましたが、それは克服できます。オブジェクトのリストを返す API クエリがあります。ページをコンテンツが詰まったカードのグリッドとして表示したいと考えています。グリッドに 5 つの列があり、行の数がリスト内の要素の数に適応するようにしたいと考えています。実装方法はわかります。例: items[{"id":1,"title":"title1,"description":"descri] を返すクエリがあります。

P粉710478990 2024-01-29 11:36:47 0  1  492

レイアウトの問題

すみません、レイアウトについて教えていただけますか？

不言失败 2021-04-11 22:59:23 0  1  1388

画像をトリミングして移動します。グリッドレイアウト

画像を正しい位置に配置し、上下をトリミングするのに苦労しています。これは次のようになります (ヒーロー部分): https://www.behance.net/gallery/161732057/CozyMornings-online-store プロジェクト全体はグリッド上に構築されます。円形の画像を左に移動し、コンテナより大きく、上下をトリミングする必要があります。さらに、応答性が高い必要があります。画像をパッケージに入れようとしています。このラッパーに相対位置を与え、オーバーフローを非表示にします。これではありません

P粉548512637 2023-09-15 19:18:46 0  1  603

固定列と列位置を使用したグリッド自動レイアウトの混合

CSS を使用した次の HTML があります Grid<divid="grid"><divclass="main-item">Main</div></div>#grid{display:grid;grid-template-columns:repeat( 5, auto);text-align:center;}#grid>*{bo

P粉492959599 2023-09-15 16:01:55 0  1  455

デフォルトのレイアウトを変更せずに、MediaQueries を使用して、より低い解像度で表示されるレイアウトを変更することはできますか?

要素が期待どおりに表示されるようにデフォルトの解像度で「グリッド テンプレート列」レイアウトを使用していますが、それより低い解像度ではコンテナーの優先順位によってレンダリングされ、変更したい視覚効果が作成されます。デフォルトの解像度の場合: ディスプレイの左側、次にディスプレイの反対側、その下にレンダリングされます。解像度が低い場合は、要素をこのレイアウトでレンダリングする必要があります。次に、要素を 1 つずつ下に配置します。 <divclassName='containerabout_container'><div>&l

P粉301523298 2023-09-16 14:17:29 0  1  903

CSS グリッドを使用したカスタム レイアウト: 特定の要素をターゲットにする

CSS グリッドを使用してこのデザインを再現する必要があり、結果を取得するために特定のグリッド要素を配置しようとしましたが、成功しませんでした。これが現在のものです。いくつか修正する必要がありますが、その前に構造を正しく整えたいと思っています。コード スニペットを添付します: .grid-container{display:grid;grid-template-columns:repeat(13,minmax(30px,auto));gap:30px;}.grid-item{background-colo

P粉144705065 2024-03-28 11:25:39 0  1  286

LAN内でWebページにアクセスできないのはなぜですか?

この Web ページは静的 Web ページであり、チュートリアルに従ってセットアップした後は、LAN 内の他のコンピュータからアクセスできなくなります。

玛雅婚纱婚庆阿科 （财务） 2021-01-10 11:33:29 0  1  1225

Tailwind CSS を使用してグリッド内の項目の最後の行を中央に配置するにはどうすればよいですか?

Tailwind (React を使用) を使用して最終プロジェクトをグリッド レイアウトに配置しようとすると問題が発生します。基本的には 3 つのアイテムが必要で、3 つのアイテムが残っていない場合、つまり 2 つまたは 1 つがある場合は、それらを中央に配置したいと考えています。ある種のコルスパンを試しましたが、期待どおりに機能しませんでした。私がやろうとしていることをよりわかりやすく説明するために、いくつかの図を添付しました。 現在のレイアウト: 2 項目が残っている望ましいレイアウト: 1 項目が残っている望ましいレイアウト: <divclassName="xl:gri...

P粉311563823 2023-08-28 20:06:09 0  1  465

LAN の Web サイトで、イントラネット デバイスが接続できず、Web ページを開けませんか?

皆さんこんにちは。ローカル Web サイトとイントラネット機器が Web ページに接続できないのはなぜですか? 何が起こっていますか? アドバイスをお願いします。ありがとうございます。

phpcn_u70761 2017-12-06 16:44:32 0  5  1881

左右の配置が間違っている

描画すると左右の配置が違うのはなぜですか?

P粉653371603 2022-01-18 19:02:01 0  1  1174

グリッドを使用してこの特定のデザインを作成する: ステップバイステップ ガイド

この画像に似たレイアウトを作成しようとしています。このグリッドを使用してみましたが、実現できません。 <ulclass="container"><liclass="first"></li><liclass="first"></li><liclass="third"></li

P粉662361740 2024-04-06 20:29:08 0  2  831

css - Flex レイアウトの問題

ヘッダーはフレックスレイアウトを使用しています 検索ボックスを横方向中央に配置したい ネイティブIOSのレイアウトと同様に、左右のコンテンツに影響されません 横方向中央のままです 実装した記憶があります以前はあったのですが、flex.cssを使ってから忘れてしまいましたので、ぜひご覧ください。

曾经蜡笔没有小新 2017-05-19 10:47:50 0  4  1053