Go Ski Place


Take CSS Grid with you
Some notes here:
Grid configuration: 1 main, then grid-1 and -2 Vertical: 740′ Runs: 7 Elevation: 5,400′ Hours: 9am - 5pm
www.coffeecup.com

The main grid uses 2 rows on smaller screens. The top uses a container (grid-1) that takes up all screen height. These elements are placed in grid-1.

More notes:
Breakpoints: No grid changes, but... Mountain: Base: 3000. Summit: 9000 Vertical: 740′ Runs: 14 Hours: 9am - 5pm
www.sugarmountain.com

I am using the same grid configuration across all breakpoints: 6 columns and 5 rows. The second row has no content, but fills up the space for different height screens.

Final notes:
Line-based: Yes, line-based placement Vertical: 740′ Runs: 7 Elevation: 5,400′ Hours: 9am - 5pm
www.cataloochee.com

These 'content-wrappers' are placed on different columns and rows depending on the viewport width with 'line-based-placement'. So the positions (and sizes) change at breakpoints.

This is cool:
This element: Sits in a table create with grid Vertical: Vertical: CoffeeCup: Is cool ! Runs: 14 Hours: 9am - 5pm
www.sugarmountain.com

The container above the link uses a grid for positioning and lining up the items. To add rows, simply duplicate elements!

Breaking the grid...
Overlap: Yes, on the pics below Vertical: 740′ Runs: 7 Elevation: 5,400′ Hours: 9am - 5pm
www.cataloochee.com

A pixel top-margin is used to push the second image down. It could have been done with grid only, but this was faster :)

Grid-2 notes:
Grid setup: Similar to grid-1 Placement: Line-based (again) Runs: 7 Elevation: 5,400′ Hours: 9am - 5pm
www.cataloochee.com

The setup here is similar to grid-1. Again these content boxes are placed and stretched by positioning them on the grid lines.

Placeholder Picture
Placeholder Picture

Created with:

Free CSS Grid Builder

Design web layouts of the future.

Placeholder Picture