web-dev-qa-db-ja.com

CSSグリッドのフローティング要素

私は現在、CSSグリッドを使用したい最初のページで作業していますdisplay: grid。

それは非常にうまく機能しますが、私が古典的に欲しい要素である小さな問題に遭遇しましたfloat古典的に-テキストは画像や引用などに浮かびます。

私は単に要素にfloat: leftと、驚いたことに、floatは完全に無視されます。要素は完全な「グリッド行アイテム」のままです。

短いコード例：

main {
  display: grid;
  grid-template-columns: 5% 5% 1fr 5% 5%;
}

main > * {
  grid-column: 3;
}

blockquote {
  grid-column: 2 / -2;
}

blockquote.float-left {
  grid-column: 3;
  float: left;
}

より大きな例として、 Codepen 。を作成しました

残念ながら、私はこれについて何も見つけていないため、私の質問は次のとおりです。これに対する解決策はありますか？見落としましたか？それとも、それはまだ不可能ですか？

前もって感謝します！ :)

Codepen-Link：

https://codepen.io/anon/pen/GQWPWX

csscss-floatcss-grid
6
Max

グリッドアイテムはフロートできません。これを行うと、グリッドのレイアウトが完全に妨げられます。

要素をフロートしたい場合は、グリッドレイアウトから要素を削除するか、display: gridを他の中間要素に割り当てるか、グリッドレイアウトを使用しないでください。

5
BoltClock

フロートはグリッドコンテナーでは尊重されますが、グリッドアイテムでは完全に無視されます。

この動作は、このセクションのCSSグリッド仕様で定義されています。

問題についてはここで説明しましたが、まだ解決策はありません。

3
Michael_B

必要な効果を得ることができますが、少し余分なマークアップを追加する必要があります。グリッドは直接の子要素にのみ影響するため、フロートしたいコンテンツ（画像、ブロック引用など）とその周りに流したいテキストを、display：gridが適用されるコンテナー内にネストされた別のdivに配置できます。

例えば：

<div class="playerinfo">
<div class="content">
<img class="floatleft" src="images/kane-williamson-sml.jpg" alt="Kane Williamson">
<p> Kane Stuart Williamson (born 8 August 1990) is a professional cricketer from New Zealand who currently plays as a batsman for Northern Districts in New Zealand domestic cricket, the Sunrisers Hyderabad in theIPL, and New Zealand internationally. He made his first-class debut in December 2007 and his IPL debut in 2015.[1] He made his U-19 debut against the touring Indian U-19 team in 2007 and was named captain of the New Zealand U-19 team for the 2008 U-19 Cricket World Cup. Williamson also represented New Zealand at the ICC Cricket World Cup 2011 hosted by Subcontinental nations and the ICC Cricket World Cup 2015 hosted by New Zealand and Australia. On 14 August 2013, Williamson signed for Yorkshire for the rest of the English county season. On February 16 2015, Sunrisers Hyderabad signed Williamson in the IPL for US$96,500.
            </p>
            </div>
        </div>

このCSSを使用するとうまくいきます。

.playerinfo{
        display: grid;
    }

    .floatleft {
        float: left;
        padding-right: 5px;
        padding-bottom: 1px;
    }
1
Anthony Swanink