Definitely, CSS Grids is most expected feature in production enviroment.
The reason behind that is Grids
free us from one way flow layout to two dimensions layout, which enable more creative and possibility on web design. In the pass, we layouted element in normal flow
and exploited float
and absolute positioning
to get more complex layout. That limited us think layout as flow stream, which is from left to right, top to bottom. To make complex layout, we had to used absolute positioning
and calculate the position in js.
Grids
change that in more elegant way, like table layout but more responsive, flexible and semantic.
We could think layout as a two dimensions cells grid(table) and align elements by specifying the cells, which is more intuition and clear.
The best part is that cell size is responsive. For exmaple, minmax()
could assign mininum and maximum of grid size and fr
unit provide the way to assign partitions of each grid cells.
Moreover, grid-gap
provide elegant way to set gutters in the grid, rather than the oly way, using margin
. The gutters made by margin
would cause two issues, the first or last element of a row reset margin and vertical gutter need to be care margin collapse
. With grid-gap
, that would be easier.
However, the CSS grid is not ready adapted in production enviroment. Because ie only particial supported on 11. Besides, it's still has bugs on other morden browser, such as fieldset
can't be grid containers.