css-grid

1熱

1答えて

私たちが純粋なCSSで行う場合はgrid-template-columns: [first] 15% [second] 100fr [third] 15%と書くだけですが、SASSで行うとエラーが発生します。しかし、SASS docsをチェックして "grid"を検索した場合、最初のヒットはブラケットを使用できるはずだと説明する行です...しかし、使用すべき正確な構文を示す例はなく、私はそれを理

1熱

2答えて

円滑なCSSグリッド列のアニメーション化

CSSグリッドレイアウトを使用して、ウェブサイト上のさまざまな部分を配置しています。私はgrid-column: x/x;とgrid-row x/x;を使ってページ上の位置とサイズを設定します。それは本当にうまくいっています。今、画面サイズが変更されたときに発生する2つのグリッド列の修正の間のスムーズな移行をアニメーション化しようとしています。変更はgrid-column: 3/9;からgrid

4熱

1答えて

CSSグリッドのグリッドアイテムのように動作する擬似要素

フィールドを必要とするフォームを作成しています。これらを必要に応じてマークするには、アスタリスク（*）を::before要素に置き、フィールドの右上隅にあるように右に浮動させます。これらのフィールドのいくつかはCSSグリッドに配置されており、グリッドに::before要素を追加すると、別のグリッドアイテムとして扱われ、すべてが新しいグリッド行にプッシュされます。 CSSグリッドが::before

0熱

1答えて

CSSグリッドボックス内でナビゲーションバーを垂直方向にセンタリングできない

私はこの問題を今のところ把握しようとしています。私が実際に視覚的に表現すると、それを説明することができます。私はナビゲーションバーを垂直に整列しようとしています。しかし私は、何も変更しているように見えるんalign-selfを使用して試してみました。 /* Navigation */ .navigation { overflow: hidden; margin: 0;

-1熱

1答えて

CSSグリッドを使用するCSSグリッドフレームワーク

CSSグリッドシステムをサポートするフレームワークを見つけようとしています。今のところ、主題をグーグルで探すだけで浮動小数点とFlexboxに基づくフレームワークが得られます。それはGoogleが本当に私が探しているものを見つけるのを難しくする単語 "css grid"かもしれません。誰もが推奨できる良いフレームワークを見つけましたか？

-1熱

2答えて

グリッドCSS全幅列

私はそこになりますどのように多くの列を知らないので、私のCSSグリッド項目はモバイルの「全幅」を行く作るトラブルを抱えています： https://codepen.io/matthewfelgate/pen/Kvqdmp?editors=1100 * { outline: 1px dashed red; } .box { display: grid; &__head

1熱

1答えて

空の要素が

私はこのように、CSSグリッドのテンプレート領域を使用します。 grid-template-areas: 'sidebar tags' 'sidebar categories'; それが正常に動作していますが、私は一種の、このように、空の要素を追加したいと思います： grid-template-areas: 'EMPTY sidebar tags EMPTY'

0熱

1答えて

グーグルプラスカードタイルグリッド

3列のグーグルプラスのようなカードタイルスクロールグリッドを作成するには？マテリアルUIを使用していますが、そのような機能は見つかりませんか？私は標準的なマテリアルUIグリッドを試しましたが、機能しません。

0熱

2答えて

グリッドがCSSグリッドで正しくレイアウトされていない

CSSグリッドシステムを使用してウェブサイトを作成したいが、動作していないようです。ここに私のコードは次のとおりです。 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "logo f