Sign in Registration

How to use CSS grid features, properties summary

Over the entire existence of websites for their development, various approaches have been used for the necessary placement of elements on the page. Among such approaches were: table layout, using around elements with float , flexible layout with flex . But all these approaches are still not very convenient for development, since you have to make an effort to place the elements in the right way. Finally, a completely new page layout system comes to CSS - CSS grid .


The topic of CSS grid is quite large, the purpose of this article is just a quick look at the available properties for use in development. The CSS grid properties fall into two categories: properties for containers and properties for the elements themselves that are placed inside the container. This technology actively uses a new unit of measurement - fr (fraction), which usually represents a fraction of the free space in the grid.

What CSS grid properties are there for containers ? Consider the list below:

As you can see, the technology under consideration has all the necessary properties for flexible positioning of container elements. And what CSS grid properties are there for elements placed in a container ? Consider them also, the list below:

We have examined properties for flexible positioning of elements on the page using the new technology of web page layout. But apart from properties, there are also special CSS grid functions :

Instead of a conclusion, it should be said that the CSS grid technology is quite new, its support began to appear only in new versions of modern browsers. So it might be worthwhile to wait a bit until this technology becomes ubiquitous.

Comments (0)
For commenting sign in or register.

Latest articles

Popular sections


Login to the web version
Android app:
Available on Google Play

Share this

Subscribe to