Two Dimensional CSS Grid Layout

Mozilla CSS Grid

You may know grid frameworks in CSS. How about Two-Dimensional (2 Axis) and without a framework. Yes, Two Dimensional CSS Grid Layout is a new layout model that has powerful abilities to control the sizing and positioning which aligns in both the dimensions. Moreover, it is layout framework without the framework.

One Dimensional / Axis Arrangement

In the web world, you might have known about the popular css layout ‘flexbox’ for distributing space and aligning content in some direction (single axis/dimension).
Note: For Android, Flexbox layout has been released just a couple of months back. Cool, we are using this feature for years ..

Flex Layout Example

Flex Layout Example

Two Dimensional / Axis Arrangement

How about using grids without frameworks like bootstrap.
Now introducing the arrangements across both the axis as Two-Dimensional Grid Layout with the dimension ‘flexible length’ – fr unit. The native support for display: grid commenced from browsers versions that are released in March 2017.

Grid Layout Example

Grid Layout Example

Grid Layout Example

To achieve the below layout, we may use css frameworks like bootstrap and will put column 123 in a row and column 456 in next row and these rows in a container and ….. Oh stop ..

Simple Grid Layout

Simple Grid Layout


This is now more simpler​ with just few lines​.

.grid-container {
    display: grid;
    grid-template-columns: 50% 100px 1fr;
    grid-template-rows: 100px 200px;
    grid-gap: 20px;
}

​Well explained with examples in mozilla’s ​article.

Sharing is caring!

Leave a Reply

Your email address will not be published. Required fields are marked *