A layout study
Twelve flexible columns, consistent gutters, and sample content built on one simple grid.
12 columns total
If all of the relative widths were changed to fixed pixels, the layout would no longer adjust with the browser window. It could become too wide for smaller screens or leave extra unused space on larger screens.
>A fluid layout changes size continuously as the browser window changes. A responsive layout uses breakpoints to change the layout at certain screen sizes. This grid stays in the same 12-column structure, so it's fluid instead of responsive.
Percentages and fractional units are useful because they can adjust to the available space. This allows the layout to grow and shrink instead of staying one fixed size.
>If all of the relative widths were changed to fixed pixels, the layout would no longer adjust with the browser window. It could become too wide for the smaller screens or leave extra unused space on larger screens.
>A maximum width of 1440 pixels gives the layout enough room on larger screens without allowing the content to become too wide. The layout can still become smaller when the browswer window is smaller, but it stops growing once it reaches the maximum width.
8 + 4 = 12 columns
Field notes
A fluid grid uses proportions instead of fixed pixel widths. This article occupies eight of the twelve available columns, while its neighboring note takes four.
The grid container expands and contracts with its available width. A fixed 16-pixel gutter separates columns, keeping the spacing consistent as the columns flex.