Hey guys, it's been a very long time since I've touched HTML/CSS but I'm moving back in that direction. I need to build an online portfolio, and was wondering which method is more usable in December 2016. For instance, would a grid layout even hold up across browsers? Should I rely on the old float and absolute positioning techniques from years ago? What say you?
IM (not so humble) O
Grid systems do not hold up, period. They are applications of print methods to the web, and the web is not print. They tend to fail catastrophically in smaller viewports, e.g. mobile devices. Further, the way they are applied removes semantic context in the form of using presentational class tokens.
Now, Bootstrap is very popular and does use grids. An acquaintance calls it Bootcrap and says the best thing you can do is get a stick and scrape it off before you track up the house. If you view source, you'll know exactly what he means.
Bootstrap incorporates Less and Sass, two CSS preprocessors. These are additional layers of unnecessary abstraction that make maintenance and debugging a nightmare. (There is no sane reason to create an object-oriented CSS.)
So, don't use Bootstrap or another of that ilk. Don't even consider a grid system. And forget about the silliness that is the CSS reset. See my post, Global resets considered harmful, for the reasoning. The post is almost eight years old and still as applicable today as it was then.
If you use flexbox, keep in mind that it is still a working draft (though pretty much the final version). IE11 works, IE10 is buggy and IE<10 says, "Wha'choo talkin' about, Willis?" See browser compatibility.
There are methods to provide graceful degradation for non-supporting browsers; Google will be your friend.
Don't forget our friend, the float. It still works just fine, if not as flexibly as the flexbox.