Grid – Proper layout organisation.
Written by Nadja Vukićević 19 March 2021

What is Grid?

Grid is a very useful CSS tool.  It is a two-dimensional system for website layout organisation and it helps a lot to present and place elements on it.  It can be compared to flexbox which is a one-dimensional system. The one-dimensional layout has elements in one row or column, and in a two-dimensional system elements have to be arranged in various columns or rows. Otherwise, both systems are better than the old ways of arranging layouts. The old way involved the use of float and in-line block options, within which the appearance of a website was often very uncertain. By using the Grid tool, you can solve layout problems and develop your website more efficiently. 

When do we use it?

In most cases, Grid is combined with a flexbox tool. This combination can improve the whole layout organisation through the website development process. 

Example

In the picture below we have one container with container class and child elements (elements contained in a container) called item.

slika 1

We need to adjust the CSS by setting display: grid

slika 2

After container making, the next step would be to put sizes for columns and rows by using grid-template-columns and grid-template-rows options. Please note that here the sizes in pixels are given arbitrarily, while in a specific code you have to enter the exact pixel size for each row and column so that the layout turns out as you imagined. 

slika 3

Setup of child elements by using grid-column and grid-row would look like this:

slika 4

This completes the initial creation of the container with the grid elements and you get a nicely planned layout of the site. As with flexbox, the way grid elements are arranged is not crucial because CSS itself allows their reallocation. This is why creating a mobile layout application is much easier, because, through just a few lines of code in CSS, a grid layout made for a desktop can be adapted to a mobile one.  

When can it be difficult to use Grid?

Problems can occur if older versions of browsers that don’t support Grid are used. Fortunately, there is a Can I use the site so that can be easily checked. Whether you are a beginner or an experienced programmer, you should carefully study the documentation before using this tool to avoid making any room for possible errors. 

N. Stevanović

BACK
Tags: , , , , , ,

JOIN THE MAILING LIST