css-grid

0熱

1答えて

CSSグリッドで表示される配列のコンポーネントの変更された順序をアニメーション化する方法はありますか？ここは短いboilerplate

-2熱

1答えて

*{ margin: 0; margin-bottom: 200px; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } .grid-container {

0熱

1答えて

CSSグリッドの行内にカードを展開する

私はビューポートのサイズと行の数に応じて1〜4列のレスポンシブCSSグリッドに取り組んでいます。各グリッドボックス（マテリアルスタイルのカード）のコンテンツはオンデマンドで展開し、より多くのデータを表示します。 1つの列（電話機サイズの画面）しかない場合はすべてが完全に機能しますが、複数の列に展開されるとすぐに私はまだ分かりません。 1つのカードをクリックしてデータを展開すると、同じ行の他のすべて

2熱

2答えて

CSS-grid、JS-mouse onClickイベント

私のHTMLには、1つの親divがあり、その中に25個のdivがあります。 <div class="container> <div class="faces"></div> <div class="faces"></div> <div class="faces"></div> . . . . . </div> 私

0熱

1答えて

CSSグリッドテンプレートエリアの孫要素を移動する

私はCSS grid-template-areasを学びたいと思っています。しかし、私のコードが意図したエリアのテンプレートのように機能していません。 "タイトルタイトル" "の両方-Aの両方-B" "左から右"、左側を「 -b右-b " すべての左の項目は、対応する（" a "または" b "）右の項目の左側にある必要があります。 * { border: 1px solid b

0熱

1答えて

IEとEdgeでCSSグリッドが動作しないのはなぜですか？

は、私はこのような構造を持つグリッドをやっている：我々はそれを見る場合https://codepen.io/anon/pen/PEpYoy .grid-list { \t padding: 0; \t display: -ms-grid; \t display: grid; \t list-style: none; \t -ms-grid-columns: 1fr 1

2熱

2答えて

最も幅の広い要素の幅は、行内のすべての兄弟の幅を設定します

CSSのフレックスボックスとCSSグリッドに関するチュートリアルはたくさん読んでいますが、このシンプルな（？）のことを率直に説明することはできません。私が望むのは、コンテナ内の要素すべてが、最も広い要素と同じ幅であることです。私はそれらがコンテナの全幅を埋めることを望んでいません。ちょうどすべて最大幅まで成長します。それはCSSでできますか？このHTML考えてみましょう： <div clas

1熱

3答えて

CSSグリッドの内側にdivを配置する

私はHTML/CSS/JSを書くことを学んでいます。私はCSS Gridに取り掛かり始め、グリッドボックス内のアイテムを水平方向と垂直方向に整列させるのに苦労しています。グリッドはレイアウトを作成するのに非常に強力で、何らかの理由で私はこの部分を理解できません。私はhead-content-containerをヘッダの中央に配置したいと思う。研究中私はTHISウェブサイトとTHISを見つけました

-1熱

2答えて

CSSでグリッド領域を使用してコンテンツを持つ要素を非表示にするにはどうすればよいですか？

私はCodePenで基本的なWebレイアウトを作成して、グリッド領域がCSSグリッドモジュールでどのように機能するかをよりよく理解しています。 .表記を使用しても、grid-template-areasプロパティに適用すると、項目を実際に「隠す」わけではないことが判明しました。ここに私のコードを参照してください：https://codepen.io/isaacasante/pen/KZmyKV

1熱

1答えて

グリッドセルの中に要素を垂直に配置する方法は？

<div class='card'> <div class='imgwrap'>...</div> <div class='cardr'> <a class='infor' href='...'>lorem ipsum</a> </div> </div> CSS .card{ display:grid; grid-template-columns: 54px au