Who needs a grid system anymore? Some useful CSS layouts using flex
and grid
for any project.
To use, copy the CSS from styles.css
and drop it into your project. Then use the HTML markup in the provided index.html
file.
- Stack: stack items in a column
- Inline: align items in a row
- Grid Sidebar: content with scrollable sidebar
- Grid ACB: order items header (A), image (B), content (B)
- Grid Blocks: a block of N items per row
- Grid Inline: collapse block when items hit min width
- Breakout: wider columns that 'break out' of the standard width