CSS Grid Intro
The CSS grid offers a grid layout system with rows and columns. This is used mostly for complex layouts. It is also easier to design complex web layouts using CSS grid. Below is a simple div element using display grid.
Example 1:
CSS Grid Layout
Using this layout allows web developers to design responsive layout structures without using float or positioning. These grid properties are also supported on all modern browsers.
The main difference between grid layout and flexbox layout is that the former allows two-dimensional layout while the latter only allows one-dimensional layout.
CSS Grid Components
A grid layout always consists of a grid container or the parent element and the grid item/s or the elements inside the parent element. All the direct children of the grid container automatically becomes the grid items.
Example 2
The div element below acts as the grid container and the hamster images are its grid items.
Display Grid vs Inline-Grid Property
The difference between these two is that display grid makes the element a block element while the display inline-grid makes the element an inline element. See the difference below:
This div element has its display set to grid.
1
2
3
4
5
6
7
8
9
This div element has its display set to inline-grid.
1
2
3
4
5
6
7
8
9
