And the need for a method of arranging content in a 2-dimensional space that uses the same concepts that have been used by print designers for many years was recognized. Designers for print media usually work with a grid system that organizes content on a page. While flexbox is a huge step forward, it doesn’t adequately address all the needs of front-end designers.

It made it a lot easier to create a responsive row or column-based layouts. But these frameworks have their own learning curve and often introduce significant overhead in unused CSS code.Īlong came flexbox to help with some of these problems. CSS frameworks-like Bootstrap or Zurb Foundation-sprung up to help with the difficulties of creating a responsive grid layout. But floats are clumsy, fragile, and generally hard to work with. They mixed content with style, prohibited semantic markup, and made it hard for screen readers to sort the information in a meaningful way.Īfter dropping the use of tables, the first solution was to use the CSS float to position elements on a web page. There are only two CSS declarations needed to center elements using CSS grid.Do you remember the days when people used tables to arrange content on websites? HTML tables were ideal for arranging content in a grid-style layout. It turns out that you can use display: grid to center elements as quickly as when using flexbox.ĭefine display: grid on an element (see this CodePen as an example), pair the grid-declaration with align-items and justify-items and you're good to go! You just centered the child of this element. I have to admit that even when CSS grid is cross-browser supported nowadays, I didn't use it much yet.

Display grid align center