Grid
CSS Grid Layout
A two-dimensional layout system for creating complex web layouts with rows and columns simultaneously.
기술 세부사항
The Grid layout algorithm distributes space along a main axis and aligns items along the cross axis. Key properties: flex-grow (expansion ratio), flex-shrink (shrinking ratio), and flex-basis (initial size before distribution). The shorthand 'flex: 1' expands to 'flex: 1 1 0%'. Gap property replaces margin hacks for spacing. Flexbox excels at navigation bars, card rows, centering content, and any layout where items share a single axis.
예시
```css
.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-template-rows: auto 1fr auto;
gap: 1rem;
}
.sidebar { grid-row: 1 / -1; }
```