css-grid

7熱

4答えて

CSS Gridの最後の行に要素を配置する方法は？私はこのようないくつかの項目をレイアウトするCSSグリッドを使用しています

... #container { display: grid; grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%; } .item { background: teal; color: white; padding: 2

2熱

1答えて

CSSグリッド対応カードが水平方向に展開されていません。

レスポンスカードグリッドを作成するためのCSSグリッドのガイドラインに従っていますが、グリッドはカード上に垂直方向にしか表示せず、ブラウザの幅に合わせて水平方向に拡張しません。本当にありがとうございます〜！チェックアウトここではコードペン： https://codepen.io/synapse709/pen/aLdbPP .card_wrapper { display: grid

0熱

2答えて

divボックスとCSSグリッドの整列の問題

グリッドとHero画像を使用してブログ用のカスタムWordPressを作成したいとします。これは私のHTMLです： <div class="site-wrapper"> <div class="section site-menu">MenuItem 1 | MenuItem 2 | MenuItem 3 | MenuItem 4</div> <div class="se

4熱

1答えて

CSSグリッドレイアウトで特定の列または行をターゲットに設定するにはどうすればよいですか？

CSSで特定のグリッドの列または行を選択することはできますか？たとえば、3行2列のCSSグリッドレイアウト：grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr;があるとします。第2列からすべての要素を選択するにはどうすればよいですか？例：grid:nth-child(column:2)（私の考えではなく、有効なコード）。

1熱

1答えて

CSSグリッドグリッドテンプレート領域の動作

グリッドテンプレート領域で定義されたCSSグリッドがあります。誰かが次のテンプレートがうまくいかない理由を教えてもらえますか？私は、等しいセクションを持つ4x3グリッドを見ることを期待しています。私は働くグリッドのスタイルをコメントアウトするだけでなく、何が起こるのかを実演しているフィドルを持っています。私は2となぜこれが爆発するのかの違いを解読するのに問題があります。ありがとうございました。 F

0熱

1答えて

この画像に基づいてCSSグリッドでレスポンシブなレイアウトを実現する方法

私はcss-gridで3時間以上戦ってきました。 2枚のカードレイアウトと3枚のカードレイアウトの両方に、添付画像に基づいて簡単なレスポンスグリッドを作成したいと考えています。現在、私は携帯電話を使用していますが、デスクトップサイズをタブレットにリサイズするとカードが重なります。どんな助けでも大歓迎です！解決 body { font-family: arial; }

1熱

1答えて

グリッド項目：自動配置と定義済みの配置

display:gridプロパティに関する質問がありました。具体的には、2列レイアウトの場合です。このスニペットでは、基本的な2つの列を設定しました。レイアウト。このようなものがある場合は、2frセクションと1frセクションのどちらでも、列の開始位置を割り当て、grid-column: 1/2;のような場所に割り当てる必要がありますか、それとも単に暗黙的ですか？ * { paddin

4熱

3答えて

子供の潜在的な無限リストのn番目の子を選択する

私はグリッドレイアウトを持っています。私はCSSグリッドレイアウトを使用しています。潜在的に無限の数のアイテムが存在する可能性があるとします。 <div class="grid"> <div class="item"></div> <div class="item"></div>  </div> アイテムの数が無限になる可能性がある場合

-5熱

2答えて

IEでdisplay = gridが機能しないのはなぜですか？

CSSでdisplay = gridを使用しています。 Chrome & Firefoxでは正常に動作しますが、IEでは動作しません。 CSSトリックやその他のソリューション？