Плавающие элементы в CSS Grid

В настоящее время я работаю над своей первой страницей, где я хочу использовать сетку CSS display: grid,

Это работает очень хорошо, но я сталкиваюсь с небольшой проблемой с элементом, который я хочу float классически - текст плавает вокруг изображения, цитаты и т. д.

Я просто дал элемент float: left и к моему удивлению, float полностью игнорируется. Элемент остается в виде полного "grid-row-item".

Пример короткого кода:

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

Источник

2 ответа

Решение

Вы не можете плавать элементы сетки. Это полностью помешает компоновке сетки.

Если вы хотите плавать элементы, либо удалите их из макета сетки, назначьте display: grid к другому промежуточному элементу, или не используйте сетку.

Источник

На самом деле есть одно решение, используйте:

float: left; in grid works as => justify-self: start;
float: right; in grid works as => justify-self: end;
Источник

Поплавки учитываются в контейнерах сетки, но они полностью игнорируются в элементах сетки.

Это поведение определено в спецификации CSS Grid в этом разделе:

Проблема обсуждалась здесь, но пока не имеет решения:

Источник

Можно получить желаемый эффект, но он требует немного дополнительной наценки. Поскольку сетка влияет только на непосредственные дочерние элементы, вы можете поместить содержимое, которое вы хотите, плавающим (изображение, блок-цитаты и т. Д.) И текст, который вы хотите обвести вокруг него, в отдельном элементе внутри контейнера, где применяется display: grid.

Например:

<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;
    }
Источник
Другие вопросы по тегам