CSS Grid Playground
Visually design powerful, two-dimensional web layouts. Adjust columns, rows, and gaps interactively to generate your CSS Grid code instantly.
Grid Settings
Interactive Preview
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
justify-content: start;
align-content: start;
}The Ultimate Guide to CSS Grid Layout
Welcome to the CSS Grid Playground. Before CSS Grid was introduced, web developers relied on a series of hacks to create page layouts. We used HTML tables, then we used CSS floats (and the dreaded "clearfix"), and eventually, we moved to Flexbox. While Flexbox is amazing, it was fundamentally designed to lay out items in a single direction (a row or a column). CSS Grid is the first CSS module created specifically to solve the two-dimensional layout problems of the web.
Understanding the Grid Container
To use CSS Grid, you must first define a parent element as a grid container by applying display: grid;. Once applied, all direct children of that container automatically become "grid items."
From there, you dictate the structure of the grid using two core properties: grid-template-columns and grid-template-rows. These properties allow you to explicitly define the number of tracks (columns and rows) and their respective sizes.
The Magic of the 'fr' Unit
While you can define column widths using pixels (px) or percentages (%), CSS Grid introduced a brand new unit specifically designed for flexible layouts: the fractional unit (fr).
The fr unit represents a fraction of the available free space in the grid container. If you set grid-template-columns: 1fr 1fr 1fr;, the browser will divide the available width into three equal columns. If you change it to 1fr 2fr 1fr, the middle column will take up twice as much space as the outer columns. This eliminates the complex math previously required when using percentages and calculating margins.
Our interactive playground heavily utilizes the repeat() function (e.g., repeat(3, 1fr)), which is a shorthand way of telling the browser to create three equal columns.
Managing Gutters with 'gap'
In the era of floats and Flexbox (before modern updates), adding consistent spacing between items required complex negative margin hacks. CSS Grid makes this trivial with the gap property.
By defining gap: 20px; on the grid container, the browser automatically creates 20px of empty space (gutters) between every row and column, without pushing the outer edges of the grid items away from the container bounds. Try dragging the Gap slider in our playground to see how cleanly the layout breathes without breaking.
Alignment in the Grid
CSS Grid provides powerful alignment properties that control how the entire grid aligns within the container, assuming the container is larger than the grid itself.
- justify-content: Aligns the entire grid along the horizontal (row) axis. Options like
center,end, orspace-betweendictate how the columns are distributed. - align-content: Aligns the entire grid along the vertical (column) axis. This is only noticeable if you have defined fixed-height rows and a taller container.
Note: These properties align the grid tracks. If you want to align the content inside an individual grid cell, you would use justify-items and align-items.
When to Use CSS Grid vs Flexbox
The golden rule of modern CSS layout is:
- Use CSS Grid for the macro layout. If you are laying out the main skeleton of a page (Header, Sidebar, Main Content, Footer), CSS Grid provides the rigid, two-dimensional structure required.
- Use Flexbox for the micro layout. If you are aligning a series of navigation links, or centering an icon next to some text, Flexbox is perfect for handling one-dimensional content flow.
By using our interactive CSS Grid Playground, you can rapidly prototype the macro structure of your web application, copy the generated code, and dive straight into building your content.
