One of the best things about XAML is the ability to create both simple and complex layouts with a handful of container controls. Although clearly inspired by HTML, XAML introduces a bunch of controls that serve mostly for managing layouts rather than displaying some content. If you wanted simple layout and if you wanted to avoid being labeled as “the one who used tables”, you would have to resort to some pretty nasty stuff. But no matter what you did to your floating divs, you could not create a simple 2×2 grid layout.
So if you want the power of tables, but wanted to write correct HTML+CSS, you could use Bootstrap or similar frameworks. You get fluid grid design and you can spend time designing other things instead of battling with HTML and writing your own JS code. Finally, all was well…or at least better. We still lacked “native” solution for designing grid layouts. Browsers are capable of doing that, if only there was a way…
And that way is CSS Grid Layout. The strange thing is that I am testing it in Internet Explorer 10. The same browser made popular by the definition “does it work in IE? No? It is HTML5 feature”. You still need to add
-ms- prefix though.
After small fiddling with jsbin, here is a result (remember, only in IE10):
You can read more on Hugo’s blog post: Future of CSS layout: CSS Grid.