タグ付けされた質問 「css-grid」

CSSグリッドでシンプルなページを作成しようとしています。 私が失敗しているのは、HTMLのテキストをそれぞれのグリッドセルの中央に配置することです。 およびセレクターのdiv内側と外側の両方に別々のにコンテンツを配置して、CSSプロパティのいくつかを試してみましたが、役に立ちませんでした。left_bgright_bg どうすればよいですか？ html, body { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100vh; grid-gap: 0px 0px; } .left_bg { display: subgrid; background-color: #3498db; grid-column: 1 / 1; grid-row: 1 / 1; z-index: 0; } .right_bg { display: subgrid; background-color: #ecf0f1; grid-column: 2 …

179 html  css  centering  css-grid 

TL; DR：table-layout: fixed CSSグリッドのようなものはありますか？ 私は、月を表す4x3の大きなグリッドと、日を表す7x6のグリッドがネストされた年表示のカレンダーを作成しようとしました。 カレンダーはページを埋める必要があるため、年グリッドコンテナーの幅と高さはそれぞれ100％になります。 .year-grid { width: 100%; height: 100%; display: grid; grid-template: repeat(3, 1fr) / repeat(4, 1fr); } .month-grid { display: grid; grid-template: repeat(6, 1fr) / repeat(7, 1fr); } これが実際の例です：https : //codepen.io/loilo/full/ryXLpO/ 簡単にするために、そのペンでは毎月31日あり、月曜日から始まります。 また、問題を示すために、途方もなく小さいフォントサイズを選択しました。 グリッドアイテム（=日のセル）は、ページ上に数百個あるため、かなり凝縮されています。そして、日番号のラベルが大きくなりすぎると（左上のボタンを使用してペンのフォントサイズを自由に試してみてください）、グリッドのサイズが大きくなり、ページの本文サイズを超えます。 この動作を防ぐ方法はありますか？ 私は最初に年グリッドの幅と高さを100％と宣言したので、それがおそらく最初のポイントですが、そのニーズに合うグリッド関連のCSSプロパティを見つけることができませんでした。 免責事項： CSSグリッドレイアウトを使用せずに、そのカレンダーのスタイルを設定する簡単な方法があることを知っています。ただし、この質問は、具体的な例を解くというよりは、トピックに関する一般的な知識に関するものです。

153 css  grid-layout  css-grid 

私はかなり一般的な石積みレイアウトを実装する必要があります。ただし、いくつかの理由により、JavaScriptを使用したくありません。 パラメーター： すべての要素の幅は同じです 要素の高さがサーバー側では計算できない（画像とさまざまな量のテキスト） 必要な場合は、固定数の列を使用できます これには、最新のブラウザーであるプロパティで機能する簡単な解決策がありcolumn-countます。 そのソリューションの問題は、要素が列に順序付けられていることです。 要素を行に並べる必要がありますが、少なくともおよそ： 私が試したアプローチは機能しません： アイテムの作成display: inline-block：垂直方向のスペースを無駄にします。 アイテムを作るfloat: left：笑、いいえ。 これで、サーバー側のレンダリングを変更して、項目数を列数で割って項目を並べ替えることができますが、これは複雑でエラーが発生しやすい（ブラウザーが項目リストを列に分割する方法に基づいている）ので、可能であればそれを避けるために。 これを可能にするいくつかの新しいflexboxマジックがありますか？

134 html  css  flexbox  css-grid 

メディアクエリを使用せずにCSSグリッドを折り返すことは可能ですか？ 私の場合、グリッドに配置したい非決定的な数のアイテムがあり、そのグリッドを折り返したいです。Flexboxを使用すると、適切に適切に間隔を空けることができません。たくさんのメディアクエリも避けたいです。 ここにいくつかのサンプルコードがあります： .grid { display: grid; grid-gap: 10px; grid-auto-flow: column; grid-template-columns: 186px 186px 186px 186px; } .grid > * { background-color: green; height: 200px; } <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> コードスニペットを実行する結果を非表示スニペットを展開 そしてここにGIF画像があります： 余談ですが、私と同じようにすべてのアイテムの幅を指定することを避ける方法を誰かが教えてくれればgrid-template-columnsそれは素晴らしいでしょう。子供には自分の幅を指定することをお勧めします。

126 html  css  css-grid 

Flexboxを使用してこれを達成することは不可能であると私は収集しています。各行はその要素に合わせるために必要な最小の高さしかあり得ないのですが、これは新しいCSSグリッドを使用して達成できますか？ 明確にするために、グリッド内のすべての要素の高さを、各行だけでなく、すべての行にわたって等しくしたいと考えています。基本的に、最も高い「セル」は、その行のセルだけでなく、すべてのセルの高さを示します。

98 css  flexbox  grid-layout  css-grid 

<button>-tagの内部要素をflexboxので中央に配置しようとしていjustify-content: centerます。しかし、Safariはそれらを中央に配置しません。他のタグにも同じスタイルを適用でき、意図したとおりに機能します（<p>-tagを参照）。ボタンだけが左揃えになります。 FirefoxまたはChromeを試してみると、違いがわかります。 上書きしなければならないユーザーエージェントスタイルはありますか？または、この問題に対する他の解決策はありますか？ div { display: flex; flex-direction: column; width: 100%; } button, p { display: flex; flex-direction: row; justify-content: center; } <div> <button> <span>Test</span> <span>Test</span> </button> <p> <span>Test</span> <span>Test</span> </p> </div> コードスニペットを実行するHide resultsスニペットを展開 そしてjsfiddle：http：//jsfiddle.net/z3sfwtn2/2/

91 html  css  safari  flexbox  css-grid 

次の例では、円はグリッドの幅に適応し、アスペクト比を維持しています。コンテナの幅が縮小すると、円もそれに伴って縮小します... ただし、高さが幅よりも小さい場合（2番目のボックス）、円はグリッドの外側のオーバーラップを縮小しません。代わりに、アスペクト比を維持しながら高さにも適応させる方法はありますか？ .container { display: grid; background-color: greenyellow; margin: 5px; min-height: 10px; min-width: 10px; } .portrait { max-height: 100px; max-width: 200px; } .landscape { max-height: 200px; max-width: 100px; } .aspect-ratio { grid-column: 1; grid-row: 1; background-color: deeppink; border-radius: 50%; align-self: center; justify-self: center; } <div class="container landscape"> <svg class="aspect-ratio" viewBox="0 …

8 html  css  svg  css-grid  aspect-ratio