+1 vote

What is Fixed Grid, Fluid Grid or Hybrid Grids?

in UI/UX Designing by (320 points)

1 Answer

0 votes
by (150 points)

Grid Behavior

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.)

Fixed Grids

A fixed grid has fixed-width columns and flexible margins. 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.

Fluid or Full-Width Grids

A fluid grid has fluid-width columns, fixed gutters, and fixed side margins. The fluid grid has a flexible content width that goes edge to edge as per the screen size. In a fluid grid, columns either grow or shrink to adapt to the available space.

Hybrid Grids

A hybrid grid has both fluid-width and fixed-width components.

In modern layouts, a few elements completely bleed off the grid and align edge to edge on the screen. Headers, footers, full-bleed visible containers, or images are a few of the common examples. If the content width is more than the available screen size, a fixed grid dramatically turns into a fluid grid adapting to the entire available space on the screen to adequately fit the content.

Source Credit: https://medium.muz.li/responsive-grid-design-ultimate-guide-7aa41ca7892