CSS Grid Demo

Grid Layout

The content box - this one - and the navigation box to the left are elements of a CSS grid container. Grids are a great mechanism for laying out web pages. It's very easy to place page parts whereever they are needed. Much easier than using floats or absolute positions. The grid container takes care of all the details to make a fluid design. You can see how the grid is used to compose this page by right-clicking on the page and selecting view page source.


The navigation bar, on the left, uses CSS to emphasize selection. As the mouse hovers over a link, the link is framed in a gray border, its background changes to white, and its padding increases. This creates some visual emphasis that may be useful for navigation, but can easily be overdone.
Complete Guide to Grid, CSS Grid by Example, Things I learded reading the CSS Grid Spec , The CSS Fractional Unit (fr)