css-layout

CSS Layout

A repo for assorted CSS examples. https://portsoc.github.io/css-layout/

Custom Properties (CSS Variables)

• ex0 - set background colour using a custom property.
• ex1 - add second custom property for colour
• ex2 - using custom properties for sizing
• ex3 - custom properties with media queries
• ex4 - custom properties and cascade specificity
• ex5 - example of more complex properties

Grid

An example grid

• ex0 - No grid, default layout.
• ex1 - Add a 3x2 grid, paragraphs layout automatically.
• ex2 - As above but repeat(3, 1fr)
• ex3 - Add height to grid, grid entries share the space.
• ex4 - Whole-page control using grid and a grid-area.
• ex5 - Using more grid-areas

Grid with Custom Properties

• ex0 - A mobile-first, multi column page with grid layout. See the Alternate Stylesheet [sic] for how to simplify this CSS using custom properties.

Flexbox

Buttons

• ex0 - Traditional (no flex) layout of buttons
• ex1 - Flex layout
• Combined - Side-by-side.

Bears

• ex0 - Traditonal (block & inline-block) layouts.
• ex1 - Layout with flex - wrapping, growing & centering.
• ex2 - Alignment
• ex3 - Nested flex (vertical flex in a horizontal flex) Combined - All the bears on one page.