Skip to content

Instantly share code, notes, and snippets.

@LucienLee
Created December 12, 2017 15:42
Show Gist options
  • Save LucienLee/f9774822b9c674f1b05f7c8446130c2d to your computer and use it in GitHub Desktop.
Save LucienLee/f9774822b9c674f1b05f7c8446130c2d to your computer and use it in GitHub Desktop.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment