You can't ﬂoat anymore
CSS day FAENZA- 25 marzo 2016
I'm Davide Di Pumpo, I'm an UI developer in .
I love graphic novel, competitive videogames and cats.
You can nd me on the internet with the nickname
- -Twitter GitHub LinkedIn
How can I make this f*****g layout?
The holy grail layout
The Holy Grail refers to a web page layout which has multiple, equal height
columns that are defined with style sheets. It is commonly desired and
implemented, although the ways in which it can be implemented with current
technologies all have drawbacks. Because of this, finding an optimal
implementation has been likened to searching for the elusive Holy Grail.
Source - Wikipedia
Vertical align? YUP
Order? NOPE *
Come on! What's the problem guy?
Styling the element is a pain.
Try to add a padding to a row
or a max-width to a cell
or a margin...
The order is still a view issue *
* You can use translate for horizontal order...
You can go for a fallback!
// Clearfix for old browser
content: " ";
flex: 1 0 300px;
float: left; // old browser support
width: calc(25% - 10px); // old browser support