Good designers spend a great deal of time sweating over typography. They agonise over typefaces, iterate through type scales and meticulously apply white space, all in the service of the reader. Then comes along a table with the temptation to get creative, and all thoughts of the reader go out of the window. And yet tables are there to be read, referenced and used, not merely looked at.

Tables come in many forms. Some contain simple numbers, others are complex with mixtures of numeric data and textual information. Some require reading row by row, others are scanned vertically. The potential use for tables is as varied as the written word. They can be financial statements, bus timetables, multilanguage dictionaries, tables of contents, numerical conversions, pricing options, feature comparisons, technical specifications, and so on.

The Flexbox Layout officially called CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.

Many designers and developers find this flexbox layout easier to use, as positioning of the elements is simpler thus more complex layouts can be achieved with less code, leading to simpler development process. Flexbox layout algorithm is direction based unlike the block or inline layout which are vertically and horizontally based. This flexbox layout should be used for small application components, while new

I’ve always found flexbox pretty easy to work with — a breath of fresh air after years of floating and clearfixing.

Recently though, I found myself fighting against it; something was flexing when I didn’t think it should be flexing. I fixed it, something else got squashed. I fixed that, then something else got pushed right off the screen. What in the George W Bush was going on?

In the end I got it all working, but the sun had set and my process had been the old CSS fiddle-a-roo. Or … what’s that game where you have to whack a mole and then another mole pops up and you have to whack that one too?

I’ve always found flexbox pretty easy to work with — a breath of fresh air after years of floating and clearfixing.

Recently though, I found myself fighting against it; something was flexing when I didn’t think it should be flexing. I fixed it, something else got squashed. I fixed that, then something else got pushed right off the screen. What in the George W Bush was going on?

In the end I got it all working, but the sun had set and my process had been the old CSS fiddle-a-roo. Or … what’s that game where you have to whack a mole and then another mole pops up and you have to whack that one too?

Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.

For example, line-height can be set as a length or a unitless value , but the default is normal. OK, but what normal is? We often read that it is (or should be) 1, or maybe 1.2, even the CSS spec is unclear on that point. We know that unitless line-height is font-size relative, but the problem is that

Now, on to one of the more baffling ‘reasons’ for using rems and ems. (I don’t know why I’m numbering these headings.)

It explains (accurately) that by using a combination of rems and ems, you can create a component (say, a modal window) that can scale to different sizes just by changing a single font-size on the root element of the component.

It makes sense. In the same way that “if you often murder people, it is handy to carry a shovel in the boot of your car” makes sense.

It’s great advice I’m sure. But I can’t remember the last time I did a murder, and I can’t recall the last time I wanted a component that grew in all dimensions, paddings and font-sizes, by the same factor, by changing just one value.

To create this grid we need to use grid-template-columns and grid-gap.

Grid-template-columns declare how the columns of a grid will be laid out, it take a series of values separated by spaces, that declare the size of each column; the number of values specified give us the number of columns.

For example, a four column grid of 250px wide columns can be expressed like this:

grid-template-columns: 250px 250px 250px 250px;

That same layout can also be expressed with a handy repeat keyword.

grid-template-columns: repeat(4, 250px);

Grid-gap specifies the size of gutters in grid layout, it can accept one or two values, if you specify two values you are defining both the row and the column’s gutter size.

Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.

For example, line-height can be set as a length or a unitless value , but the default is normal. OK, but what normal is? We often read that it is (or should be) 1, or maybe 1.2, even the CSS spec is unclear on that point. We know that unitless line-height is font-size relative, but the problem is that