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.

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.

fairyprincess

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

  • name: lamorna
  • pronouns: she / her
  • location: england

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?