coding180 icon
Overview of Grid layout

Overview of Grid layout

Home > Tutorials > CSS > CSS Grid Layout

Grid layout (Grid) is the most powerful CSS layout solution.

It divides web pages into grids, and different grids can be combined arbitrarily to make various layouts.

css grid layout example

The layout shown above is the master of the Grid layout.

The Grid layout is somewhat similar to the Flex layout, both of which can specify the positions of multiple items inside the container. However, they also have major differences.

The flex layout is an axis layout, and only the position of the "item" relative to the axis can be specified, which can be regarded as a one-dimensional layout.

The Grid layout divides the container into "rows" and "columns", generates cells, and then specifies the cell where the "item is located", which can be regarded as a two-dimensional layout. Grid layout is far more powerful than Flex layout.

In the next lesson we are going to talk about basic grid concepts.


Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel