CSS Grid Layout

CSS grid layout gives us grid-based layout system without using float and position. It provides us to create two dimensional layout web page in the line items with both rows and columns. Like tables, grid layout also author to align elements into rows and columns. It is method of creating Grid-based layout that is described in CSS and not in HTML.

A grid layout consists of one parent element (Grid container) and one or more child elements (Grid items) inside it. The child elements are displayed as a grid-based layout inside the parent element. The horizontal line of grid items are called grid rows and the vertical line of grid items are called grid columns. The space between rows and columns of grids are called gutter (grid-gap). Gap size of grid layout can be adjusted. There is also the grid lines which we use for placing a grid items in the gird container.

Flexbox is only one dimensional layout with the line items in a row or column only. Grid is for two dimensional layout. It acts very similar to a Flexbox by only using row grid or column grid. Web developer can create more complex responsive web design layout more easily and consistently. It allows for more standardize code that supports browser. Since October 2017, Chrome, Firefox, Safari, and Edge support CSS grid without vendor prefixes.

 

View my more blogs on medium