The grid system as been around for centuries, since the first newspapers, posters, magazines and website layouts. For years people struggle to replicate what you have on paper to a website, tables, floats, absolute positions, alignments and elements inside elements just to make things happen.

Even with framework’s grids and flex-box, we still had some difficulties with more complex designs, were in this moment we came across this css3 property called css grid system.

Css grid is supported by the most used browsers, and you start seeing it in some of the modern website.

css grid compatibility - browsers

So, in easy words, grid is a property that allow you to give a element a certain number of columns and rows, and positions each direct child on the cell you want just by saying so. Pretty simple, right? As a two-dimensional placement and align system, makes your html code cleaner with less elements nesting.

flex

While flex-box and most frameworks, that are based on flex, are one dimension.

grid

the css grid is two-dimensional, witch allow you to place an element horizontally or vertically on a precise place.

Features
 

Sizes

The columns and rows can be defined for fixed sizes (ex: px) or flexible sizes (ex: percentage) to fit your desired layout. Css grid also introduce a new unit fr witch mean fraction. For example if I set my rows to be 1fr and the other 2fr, I know that the second row will always be twice the size of the 1st one.
 

Placement

The css grid allow to place an element on a precise place. You can do that by using line numbers, names or by targeting an area of the grid. Grid also detects the direct childs and place them on a grid cell if a placement is not specified.
 

Self-aware

The parent that is display: grid is self-aware of is direct childrens, if there is a grid that is 1 row 1 column, but it have 2 childs, it will automatic add one more row to hold the second child. This featured is really useful when feeding your site with dynamic content.

Alignment

The grid inherited the flex alignment properties, you can align everything on the cell horizontaly and verticaly. Also you can arrange the elements related to each other or separated.
 

Overlapping

The fact the grid is divided by cells doesn’t mean content can’t overlap. It’s possible to place to elements on the same cell. You can use z-index to specify their order.

want read more?
download the complete article.

Filipe Nascimento

2019-05-16