CSS Grid

CSS Grid is a two-dimensional layout system that allows you to create complex grid-based layouts with rows and columns simultaneously. Unlike Flexbox which works in one direction at a time, Grid lets you control both horizontal and vertical placement of elements, making it ideal for overall page layouts, image galleries, and complex component arrangements.

To create a responsive portfolio gallery, you use display: grid with grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) to automatically create columns that are at least 300px wide but grow to fill available space. Add gap: 20px for consistent spacing between items, and the layout automatically adjusts to different screen sizes without media queries.