1fr — one fractional unit of remaining space
auto — size to content
minmax(min,max) — flexible min/max bounds
repeat(n, val) — repeat a track definition
Design modern, responsive layouts effortlessly using our CSS Grid Generator. This visual tool allows you to create CSS Grid layouts without manually writing complex CSS. Configure columns, rows, gaps, alignment, and item placement while seeing your layout update instantly. Once you're satisfied with the design, copy the generated CSS and use it directly in your website or web application.
CSS Grid is one of the most powerful layout systems available in modern CSS. It gives developers complete control over both rows and columns, making it ideal for responsive web pages, dashboards, landing pages, image galleries, admin panels, and complex application layouts. Our generator simplifies the entire process with an intuitive visual interface.
1fr 2fr 1fr or repeat(4,100px).Defines the number and width of grid columns. Use fractional units, fixed widths, percentages, or repeat() to build flexible layouts.
grid-template-columns: 1fr 2fr 1fr;
Controls the height of each grid row. Rows can use fixed values, percentages, auto sizing, or repeat() functions.
grid-template-rows: repeat(4,100px);
Sets the vertical spacing between rows inside the grid container.
row-gap:20px;
Controls the horizontal spacing between columns.
column-gap:16px;
Aligns every grid item horizontally inside its own grid cell.
Controls vertical alignment of items inside their individual grid cells.
Before building layouts with CSS Grid, it's important to understand the two fundamental concepts: the Grid Container and Grid Items. Every CSS Grid layout starts with a container element. Once you apply display: grid; to that element, all of its direct child elements automatically become grid items that can be positioned anywhere within the grid.
Unlike older layout techniques that relied on floats or positioning hacks, CSS Grid provides a clean, two-dimensional layout system. You can control both rows and columns simultaneously, making it much easier to build responsive page layouts, dashboards, image galleries, pricing tables, and application interfaces.
A grid container is simply an HTML element with the display: grid; property applied.
.container{
display:grid;
}
After applying this property, every direct child becomes a grid item and can be arranged using CSS Grid properties such as grid-template-columns, grid-template-rows, gap, and grid-area.
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
Each child element automatically becomes a grid item. You can then resize, align, or reposition each item independently without changing the HTML structure.
CSS Grid and Flexbox are both powerful layout systems, but they solve different problems. Understanding when to use each one helps you build cleaner, more maintainable layouts.
| CSS Grid | Flexbox |
|---|---|
| Two-dimensional layout (rows and columns) | One-dimensional layout (row or column) |
| Ideal for entire page layouts | Ideal for small UI components |
| Supports explicit row and column placement | Automatically distributes items along one axis |
| Perfect for dashboards and galleries | Perfect for menus, buttons, and navigation bars |
| Can overlap items using grid lines | Does not provide true two-dimensional placement |
Many modern websites use both technologies together. CSS Grid handles the overall page layout, while Flexbox is commonly used inside individual grid items to align buttons, icons, navigation menus, or card content.
CSS Grid dramatically simplifies complex layouts that previously required nested tables, floats, or multiple Flexbox containers. Instead of calculating widths manually, you simply define the grid structure and let the browser position each item automatically.
CSS Grid is best suited for layouts where you need precise control over both horizontal and vertical placement. If your design consists of multiple rows and columns, Grid is usually the better choice.
For smaller interface components such as navigation bars, button groups, or form controls, Flexbox is often a simpler solution. Many professional developers combine CSS Grid for the overall page structure with Flexbox for aligning content inside individual grid items.
Position individual items anywhere within the grid by specifying their starting and ending rows and columns. This makes it easy to create magazine layouts, dashboards, hero sections, sidebars, and other advanced page structures.
.item-1{
grid-column:1 / 3;
grid-row:1 / 3;
}
.container{
display:grid;
grid-template-columns:1fr 2fr 1fr;
grid-template-rows:repeat(4,100px);
row-gap:10px;
column-gap:12px;
justify-items:center;
align-items:stretch;
}
The fractional unit distributes available space proportionally between grid columns and rows.
Quickly repeat identical track sizes without manually writing each value.
repeat(4,1fr)
Automatically sizes rows or columns based on their content.
Creates responsive tracks with minimum and maximum size limits.
minmax(200px,1fr)
fr (fraction) unit represents a portion of the available space in a CSS Grid container. For example, grid-template-columns: 1fr 2fr; creates two columns where the second column is twice as wide as the first.
repeat() function lets you define repeating rows or columns without writing the same value multiple times. For example, repeat(4, 1fr) creates four equal-width columns using a shorter and more readable syntax.
minmax() function defines a minimum and maximum size for a grid track. For example, minmax(200px, 1fr) creates a column that is at least 200 pixels wide but can grow to fill the available space, making responsive layouts easier to build.
auto-fit automatically adjusts the number of grid columns based on the available space. Empty columns collapse, allowing existing grid items to expand and fill the container. It is commonly used with minmax() to create responsive layouts without media queries.
auto-fill creates as many columns as possible within the available space, even if some remain empty. Unlike auto-fit, empty tracks are preserved, making it useful when maintaining a consistent grid structure is important.
display: grid; to it. Nested grids allow you to create more advanced layouts, such as dashboards, product cards, and complex application interfaces.
repeat(), minmax(), auto-fit, and auto-fill allow layouts to adapt automatically to different screen sizes with minimal CSS.
grid-area property specifies the position of a grid item within the grid by defining its row and column start and end lines. It can also assign a named area when using grid-template-areas, making complex layouts easier to understand and maintain.
grid-template-areas lets you define a layout using descriptive names instead of numeric grid lines. For example, you can create areas such as header, sidebar, main, and footer, making your CSS more readable and easier to maintain.