HTML Grid

CSS headaches may pop up at the worst time. So lets take a look at the Grid which is a major tool in the toolkit.

The grid is similar to an invisible partition of any screen size. It allows you to easily create responsive web pages. From a simple 1 column grid to the more complex multiple columns and rows, you can fully control every region of your screen regardless of viewport size.

Here's an example of a complex layout.
It has 9 columns.

Take away: If you have a lot of centered columns and are using the grid for the layout, without anchoring the left side (margin:2em) you will have layout issues when testing different devices. The reason is that as the screen size reduces in width, the first column will slide all the way to the left with no margin.

The EM and REM

Any hard-coded widths or heights can stop Responsiveness, use wisely. The em and rem seem to work better than the static pt or px unit, as they are relative units.

Font-sizes work well when specified in the em and or rem unit. Note however, that a font size not applied directly to a text element will affect the entire container. Any container size change may cause other adjustments.

The Repeat

If 3 columns are needed then they can be hard-coded. But the best thing about using the repeat is that the minmax spec. allows a min value, which is the breakpoint for responsiveness, no media queries needed because of how repeat works. The max value of .25fr affected the space between and space around the columns. Its like a width feature for columns.

Auto-fit is a wonderful way to have the browser decide the column layout within the bounds of minmax. Combined with a width setting, the columns fit to only 80% of the window. This is a good way to contrain the outer dimensions of the columns.

Grid Areas

Strategic section layout. Note that the header is a static relative size, because we only want that height. To hide a row, set height to zero.

Width and Height

In the root element, set the Width and Height to 100%. Each grid cell acts as a container and using percentages is relative to that cell.

Meta tag

Finallt, set this tag in the root html page of your site.

Yes it's possible to create a responsive web site using only the grid. Each component's overall width and height will affect the overall design.

Each tweak requires a review to fix any issues created. Press F12 and change device viewports for each you will support (test both vertical and horizontal) directions.

Finally be patient, it takes a while to understand the grid internals. Keep working at it will become more and more familiar. Over time you will become a layout marvel.