css-grid

0熱

1答えて

私はCSS GridとjQueryを試していますが、ここで取り残されています。私はconsole.logを印刷することができ、私の矢印キーの方向にボックスを拡張しようとしているが、それは、私は値を大きくしたいgrid-column-start値 $(document).ready(function() { console.log("ready!"); $(docu

3熱

1答えて

メイクグリッド項目は、私は私のグリッドが垂直に記入したい行

列ではなく埋める：代わりにそれの 1 4 7 2 5 8 3 6 9 は、水平方向に記入：私は数を指定したい私のグリッドで 1 2 3 4 5 6 7 8 9 列の数ではなく、行の数です。は、これは私のdiv要素が見えるものです： .grid { display: grid; grid-template-columns: 1fr 1fr 1fr;

0熱

1答えて

自動フィットを使用するときにCSSグリッドの空白を折りたたむ - 列が折り返されたときに望ましくない動作が発生する

CSSグリッドのauto-fit機能を使用して、異なる画面サイズでグリッドアイテムをきれいにラップしようとしています。これは、 tedグリッドコンテナに入れたアイテムがすべて同じサイズの場合にうまく動作します。しかし、アイテムを異なるサイズにすると、小さな画面サイズの場合、アイテムが折り返されたときに望ましくないサイジングが発生します。 .wrapper { display: gri

1熱

1答えて

オーバーフローした空き領域のバグ？

これはかなり一般的で使い物にならないようなユースケースだと思われますが、私はこれまでに実行していません。私はペンをセットしましたが、そこにそれを複製することはできません。私はなぜ私の髪を引っ張っているのか理解しようとしています。 Demo Pen 左のサイドバーには、項目のリストのカスタムスクロールウィンドウを持っていますが、overflow-y: scrollは私に素敵なスクロール可能なリストを

4熱

1答えて

CSSグリッドレイアウト - 必要な数の列にまたがる項目を作成します。

CSSグリッドレイアウト（理想的には明示的な列グリッド）を使用します。そして、x軸に沿って余分なスペースを吸収したり、他のアイテムで使用されていない数の列にまたがる柔軟なアイテムを用意したいと思います。完全な解決策は、非占有の列（flexプロパティに似ています）全体にアイテムを張るプロパティですが、CSSグリッドでは不可能です。私は例を作ってみるよ：次のレイアウトは、グリッド上に配置されて

0熱

1答えて

MacのChrome（おそらくCSS-Gridの問題）でのみ入力すると入力フィールドが小さくなる

何かを入力したときに入力欄が非常に小さくなるウェブサイトを作成しました。しかし、この動作はMacのChrome（現行バージョン63）でのみ表示されます。 Safariの同じウェブサイトやWindowsのChromeにはこれが表示されず、何が起こっているのかわからない。ここで 2つのスクリーンショット：私は、問題は、入力フィールドでのCSSのグリッド列を記入する私の試みによって引き起こされているこ

0熱

2答えて

CSSグリッドスタイルを作成する方法

私はCSSグリッドで遊んでいて、画像をテキストの隣に置き、下の<section>の列の順序を逆にするようにしました（<section>）。画面を小さくすると、画像が常にテキストの上に表示されます。私はこれでうまくいきましたが、CSSが本当に混乱しているように見えますが、私はこれをCSS Gridで可能にしなければならないと考えています。 .color:nth-child(odd) {

4熱

4答えて

CSS Grid border collapse

現在のCSSグリッドの例では、二重の罫線を避けるためにどのように罫線を崩すことができますか？これは、HTMLテーブルを使用して達成するのは簡単なことです。 display: gridを使用してどうすればよいですか？ .wrapper { display: grid; grid-template-columns: 50px 50px 50px 50px; }

6熱

1答えて

幅を埋めるためにアイテムを伸ばす方法を教えてください。彼らは緑<code>container</code>ボックスの幅全体を埋めるように、私は赤<code>item</code>ボックスを少し伸ばすことができますどのように

.container { display: grid; grid-template-columns: repeat(auto-fill, 100px); grid-gap: 3px; border: 1px solid green; } .item { border: 1px solid red;