Simplified Grid

The Grids offer a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

To apply grid layout to the child elements, the parent container should have display: grid; or display: inline-grid; included.

Grid-2

Grid-2 is used for placing 2 items in a grid. We can have the items placed in 2 columns. You need to include class grid-2 for the parent container and grid-item for the child container, as shown below.

You can resize the Browser window and see that the grid items will be responsive according to the screen width.

Grid-3

Grid-3 is used for placing 3 items in a grid. We can have the items placed in 3 columns. You need to include class grid-3 for the parent container and grid-item for the child container, as shown below.

You can resize the Browser window and see that the grid items will be responsive according to the screen width.