If you need to lay your content in one dimension, no matter if it’s horizontal (x-axis) or vertical (y-axis) and you want your layout to respond to the element’s content, then flexbox is what you’re looking for.

If you need to display your content both on the x-axis and y-axis that means you have… A grid!

Once you create your grid, it’s time to add content to the cells. Whether you wish to add images, text, or both, the best way of arranging them in the right place is by using Flexbox.

One fr equals a fraction of the available space in the grid container.

It took more than six years to have CSS Grids implemented across all browsers. Throughout its history, the spec has always been surrounded by controversy. In 2011, it was met with skepticism as the Microsoft Developer Team announced prefixed support for IE10.