Header

This is the base framework that I use for my character pages. Its main feature is that it allows you to easily make a grid with varying element widths, which is ironically something much more easily accomplished with flexbox than grid. It's also a fairly good Tumblr knockoff layout if you're into that.

You can copy the source code for this from Github! Or just take it from the view source page directly.

Mobile compatibility

This layout uses mobile-first CSS, which means the main CSS is for smaller screens, while a @media tag defines the CSS for larger screens. I've marked out which CSS applies to which screen sizes in the code.

Half-width section

This is a half-width section. All sections, regardless of their grid size, will take up the entire screen width on small screens (under 1024px wide).

Quarter-width section

This is a quarter-width section.

Quarter-width section

You can use 2 of these with a half-width section or 1 with a 3/4 width section.

Third-width section

This is a third-width section.

  • This
  • is
  • a
  • list
    • List
    • inside
    • of
    • list

2/3-width section

This is a 2/3-width section. This is a link.

3/4-width section

Header 3

Header 4

This is a 3/4-width section.

Quarter-width section

Are you bored yet?