What Is CSS Grid?
CSS Grid Layout is a two-dimensional layout system that lets you create complex web layouts by defining both rows and columns simultaneously. Unlike flexbox (which is one-dimensional), CSS Grid lets you place elements precisely in both directions, making it the most powerful layout tool available in CSS.
Core CSS Grid concepts
A grid is defined by setting display: grid on a container. Key properties: grid-template-columns (defines column widths — e.g. 1fr 1fr 1fr for three equal columns), grid-template-rows (defines row heights), gap / column-gap / row-gap (spacing between cells), grid-column and grid-row on child items (spanning multiple cells), and grid-template-areas (named layout zones).
The fr unit explained
The fr (fraction) unit is unique to CSS Grid. It distributes available space proportionally. grid-template-columns: 1fr 2fr 1fr creates three columns where the middle column is twice as wide as the others, and all three fill 100% of the container. The fr unit works alongside fixed units — grid-template-columns: 300px 1fr gives a fixed sidebar and a flexible main column.
CSS Grid template areas
grid-template-areas allows you to define named zones in your layout using a visual ASCII-art-like syntax. You define a layout like: 'header header' / 'sidebar main' / 'footer footer' and then assign elements to those named areas with grid-area. This makes complex page layouts readable and maintainable.
CSS Grid vs Bootstrap Grid
Bootstrap's grid is a pre-built, 12-column responsive grid built on flexbox. CSS Grid is a native CSS layout tool with more power and flexibility. Bootstrap's grid is great for quick responsive layouts using class utilities. Native CSS Grid is better for complex, custom layouts. Canvas Builder generates Bootstrap grid HTML for rapid page production.
CSS Grid & Canvas Builder
Canvas Builder generates Bootstrap 5 HTML with responsive grid layouts built on flexbox, ready to be extended with native CSS Grid for custom design requirements.
Try Canvas Builder →