

Headers, footers, full-bleed visible containers, or images are a few of the common examples. In modern layouts, a few elements completely bleed off the grid and align edge to edge on the screen. Hybrid GridsĪ hybrid grid has both fluid-width and fixed-width components.

In a fluid grid, columns either grow or shrink to adapt to the available space. The fluid grid has a flexible content width that goes edge to edge as per the screen size. While the design is made for images, it does contain some background elements to help eliminate unused or dead spaces. Fluid or Full-Width GridsĪ fluid grid has fluid-width columns, fixed gutters, and fixed side margins. Cisty is another highly-editable Instagram grid template. The fixed grid has a fixed content width that doesn’t change in a specific breakpoint range, and the flexible margins occupy the remaining space. ) Fixed GridsĪ fixed grid has fixed-width columns and flexible margins.

A grid can function in three different ways across different breakpoints( In responsive design, a breakpoint is the “point” at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience.
