CSS 그리드 생성기

CSS Grid Layout is a two-dimensional layout system for the web. It lets you arrange items into rows and columns, and provides precise control over sizing, positioning, and layering. Unlike Flexbox (which is one-dimensional), Grid handles both horizontal and vertical alignment simultaneously, making it ideal for complex page layouts, dashboards, and card grids.

The fr unit (fraction) is a flexible length unit introduced with CSS Grid. It represents a fraction of the available space in the grid container. For example, repeat(3, 1fr) creates three equal-width columns that share the available space equally. You can combine fr units with fixed sizes like 200px or minmax() for powerful responsive layouts.

The minmax() function defines a size range for grid tracks. It takes two values: a minimum and a maximum. For example, minmax(200px, 1fr) means the track will be at least 200px wide, but can grow up to 1fr of the remaining space. This is perfect for responsive designs where you want a minimum size but also flexibility.

Yes. CSS Grid is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and mobile browsers. The generated code uses standard CSS Grid syntax with no vendor prefixes needed for current browser versions.