Understanding Grids

CSS grids are a two-dimensional layout tool that allow you to place items within columns and rows simulateously unlike Flexbox which is a one-dimensional layout tool and requires complex nesting at times.

In the past CSS grid systems based on Flexbox required a number of CSS classes to achieve two-dimensional layouts. With the introduction of CSS grids, that is no longer needed. Most grid layouts can be generated quickly using CSS within your Less. Also CSS grids are highly specific to the content placed within it. That said, there are a few common layouts and grid helpers that Dialtone provides to help you as you're laying out content. CSS Grids are a powerful layout tool, though albeit a different way of approaching layout. Unlike previous one-dimensional methods, CSS grids allow us to place content two-dimensionally (across rows and columns). To better understand grid, the following resources are a great help:

Understanding Grids documentation last updated Wednesday, June 10, 2026