2. About me
I'm Davide Di Pumpo, I'm an UI developer in .
I love graphic novel, competitive videogames and cats.
Objectway
You can nd me on the internet with the nickname
MakhBeth
- -Twitter GitHub LinkedIn
5. 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
10. 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...
16. What's the matter?
Vertical stretch an element is impossible
The order is still a view issue *
* You can use margins for horizontal order...
but...
BUT...
24. RECAP
about the old good times
Tables have issues
Inline blocks have issues
Floats have issues
It's impossible (without hacks) to manage order
more important...
61. You can go for a fallback!
.FormContainer {
display: flex;
flex-wrap: wrap;
}
// Clearfix for old browser
.FormContainer:after {
display: table;
clear: both;
content: " ";
}
.Input {
flex: 1 0 300px;
float: left; // old browser support
width: calc(25% - 10px); // old browser support
}