If Flexbox is the tool for lining things up along a single line, CSS Grid is the one for laying out a whole surface. It lets you divide a space into rows and columns, then place content into the cells that result, in the way a designer would sketch a page on squared paper.
This is the third entry in the CSS companion series, following the box model and Flexbox. Grid is the most powerful layout system in CSS, and, once the core ideas click, one of the most pleasant to use.
The Basic Idea
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;}
Setting display to grid turns an element into a grid container, and its direct children become grid items. The grid-template-columns property defines the columns, and in this example creates three of equal width. The gap property adds consistent space between rows and columns, just as it does in Flexbox.
The fr unit is a distinctive part of Grid. It stands for a fraction of the available space, so 1fr 1fr 1fr shares the width equally, while 2fr 1fr gives the first column twice the share of the second.
Properties Worth Learning First
grid-template-columns and grid-template-rows
.container { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto;}
These define the grid structure. Mixing fixed and flexible sizes is common, such as a fixed-width sidebar next to a main area that fills whatever space remains. Rows can be defined too, though they are often left to size themselves around their content.
repeat() and minmax()
.container { display: grid; grid-template-columns: repeat(3, 1fr);}.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;}
The repeat function saves writing the same column definition several times. The second example is a widely used pattern for responsive card layouts. It tells the browser to fit as many columns as it can, each at least 250 pixels wide and sharing any leftover space. As the screen narrows, the number of columns reduces by itself, with no media queries needed.
Placing Items
.featured { grid-column: 1 / 3;}.wide { grid-column: span 2;}
Items normally flow into the next free cell, but they can be told to span multiple columns or rows, or be placed at specific lines of the grid. This is how you get a featured item that stretches across the top, or an image that takes up two rows.
grid-template-areas
.page { display: grid; grid-template-columns: 250px 1fr; grid-template-areas: “header header” “sidebar main” “footer footer”;}.page > header { grid-area: header; }.page > aside { grid-area: sidebar; }.page > main { grid-area: main; }.page > footer { grid-area: footer; }
Named areas let you draw the layout almost as a diagram. It is easy to read, easy to change, and pairs well with the semantic layout elements covered earlier in the HTML series. Rearranging the layout for small screens can be as simple as redefining the template inside a media query.
Grid or Flexbox?
This is the question that causes the most confusion, and the answer is that they complement each other rather than compete. A useful rule of thumb is that Flexbox works from the content outwards along one line, while Grid works from the layout inwards in two dimensions.
- Choose Flexbox for navigation bars, button groups, toolbars and any row or column of items where content decides the sizing
- Choose Grid for overall page layouts, galleries, dashboards and anything where rows and columns need to line up together
- Use both together, with Grid shaping the page and Flexbox arranging the contents inside each cell
Why CSS Grid Genuinely Matters
- It replaces layout hacks, such as floats and fixed-width columns, with a system designed for the job, leaving cleaner and shorter CSS
- It adapts to screen size with very little code, supporting the responsive design and mobile experience Google evaluates
- Layouts are easier to read and maintain, particularly with named areas, so changes later cost less time
- It gives designers precise control without relying on heavy page builder code, which can help page speed
- It is supported by all current major browsers, so it is safe to use on production sites
Grid and WordPress
Modern WordPress themes, particularly block themes, increasingly use Grid behind the scenes. The block editor includes a Grid layout option for the Group block, with controls for columns and minimum widths, which generate Grid CSS without any code being written. Custom layouts beyond that still benefit from knowing the underlying properties, particularly when working with theme stylesheets or additional CSS.
A Quick CSS Grid Checklist
☐ Set display: grid on the parent, then define columns with grid-template-columns
☐ Use the fr unit for flexible columns and gap for spacing between them
☐ Try repeat(auto-fit, minmax(…)) for responsive card layouts
☐ Use grid-template-areas for larger page layouts that need to stay readable
☐ Combine Grid for the overall layout with Flexbox for the contents of each cell
☐ Test the layout on a real phone, not only a narrowed desktop window
Frequently Asked Questions
Is CSS Grid harder to learn than Flexbox?
It has more properties, so it can feel larger at first. The core ideas are simple though, and most layouts need only a handful of them, typically grid-template-columns, gap and occasionally grid-column or grid-template-areas.
Does CSS Grid work in all browsers?
All current major browsers support it, and have done for several years. Only very old browsers lack proper support, so most sites no longer need fallbacks.
Can I use CSS Grid in WordPress without writing code?
Largely yes. The Group block’s Grid layout option in the block editor lets you set columns and minimum widths visually. For anything more specific, a little CSS in your theme or the additional CSS panel fills the gap.
Should I replace all my Flexbox layouts with Grid?
No. Flexbox is still the better choice for single row or column arrangements, such as menus and button groups. The two work well together, and there is no need to rewrite working layouts.
Does CSS Grid affect SEO?
Not directly. It influences how well your site works on different screens, how quickly it renders and how usable it feels, all of which contribute to the page experience that search engines consider.
Want Your Site’s Layout Reviewed?
If you would like a second opinion on a layout that is not behaving across different screen sizes, get in touch for a plain conversation with no obligation and no sales pitch.