All geek questions in one place

CSS Grid Floating Elements

I am currently working on my first page where I want to use a CSS grid display: grid.

This works very well, but I am facing a little problem with the element that I want floatclassically - the text floats around the image, quote, etc.

I just gave the element a float: left, and, to my surprise, is floatcompletely ignored. The element remains as the complete "row-grid element".

Short code example:

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;
}

For a larger example, I created Codepen .

Unfortunately, I did not find anything about this, so my questions are: does anyone have a solution for this? Am I missing something? Or perhaps this is not yet possible?

Thank you in advance!:)

Codepen-Link:

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

+4
2

. .

, , display: grid , .

+2

Source: https://habr.com/ru/post/1693461/

More articles:


All Articles