Distributing Space

Miriam Suzanne @ Smashing Online

May 8, 2020

USS Enterprise,
from Star Trek The Next Generation
opening credits

Design Unknown Content
On An Unknown Canvas

CSS is Contextual

Primary Question… How Will This Change?

??? Content

??? Viewport

Since 2010 Responsive Web Design™

Fluid % Images
Fluid % Columns
@media Queries

A wide-screen wireframe with different sizes

Grid Math Sux It’s a `%` Hack

.grid-span {
  width: percentage( /* 23.7288136% */
    ((3 * 4em) + (2 * 1em)) / ((12 * 4em) + (11 * 1em))
  );
  margin-right: percentage( /* 01.6949153% */
    1em / ((12 * 4em) + (11 * 1em))
  );
  padding-left: percentage( /* 08.4745763% */
    ((1 * 4em) + (1 * 1em)) / ((12 * 4em) + (11 * 1em))
  );
}

Not perfect, but… ✅ For Effort

??? Writing Mode

??? Fonts

??? Interface

??? Resolution

??? Aspect Ratio

??? Color Gamut

??? &c…

CSS has Real Layout Tools

Not just Grid or Flexbox, but an entire system…

2018… Intrinsic Web Design

Fluid & Fixed
Stages of Squishiness
Truly Two-Dimensional Layouts
Nested Contexts
Expand & Contract Content
Media Queries, As Needed

Fluid & Fixed
Stages of Squishiness
Truly Two-Dimensional Layouts
Nested Contexts
Expand & Contract Content
Media Queries, As Needed

But First… Control the Box Model

Default… Content-Box

Often… Border-Box

Reset Global Box-Sizing

*, *::before, *::after { box-sizing: border-box; }

Box Properties 👎 Shouldn’t Inherit

html { box-sizing: border-box; }
* { box-sizing: inherit; }

Re-Introducing The Display Property

New… Display: Contents

Remove those pesky extra divs…

New… Display: Flow-Root

“A mini layout in your layout”…

Flow-Root Block Formatting Context

Clear floats, prevent margin-collapse…

Also… Multiple-Value Display

inline-block saw it coming…

Display-Outside Inline Flow-Root…

Behavior in parent layout

Display-Inside Inline Flow-Root

Context for child layout

Get Explicit Block Flow, Block Flex…

The default outer value, when only inner is set

Get Explicit Block Flow

The default inner value, when only outer is set

block ➡ block flow
flex ➡ block flex
inline-flex ➡ inline flex
inline-block ➡ inline flow-root

Writing Modes

horizontal-tb | vertical-rl/lr | sideways-rl/lr

Text-Orientation

mixed | upright | sideways

See the Pen Writing Modes & Orientation by @miriamsuzanne on CodePen.

miriamsuzanne.com

subtle use for list-headers

Understand Logical Dimensions

Writing-Mode Relative

Inline ↔ Axis Text Flow & Box Stretching

Block ↕ Axis Text Wrap & Box Stacking

Relative to… Physical Space

*-top/*-bottom/*-right/*-left

Relative to… Writing Mode

*-inline/*-block & *-start/*-end

See the Pen Logical properties demo: inline form by @miriamsuzanne on CodePen.

Intrinsic Sizes

max-content | min-content | &c.

See the Pen Intrinsic Sizing by @miriamsuzanne on CodePen.

fit-content(`<max>`)

grid-only for now, so we’ll come back to it

Intrinsic Aspect Ratios Using Image Width/Height

to avoid layout jank

Flex Container… display: flex

Content-Out Sharing Space

use grid for layout-in

.default-values {
  flex-direction: row; // column[-reverse]
  flex-wrap: nowrap; // wrap | wrap-reverse
}

See the Pen Flex-flow by @miriamsuzanne on CodePen.

Flex Items… flex-grow: 1

Distribution of Available Space

Flex Items… flex-shrink: 1

Distribution of Unavailable Space

Flex Items… flex-basis: auto

The ideal starting width, before flexing

Four Flex Shorthand Values

initial | auto | none | <grow>

Initial Shrink, If Necessary

Same as 0 1 auto

Auto Shrink or Grow

Same as 1 1 auto

None Don’t Flex

Same as 0 0 auto

Share Space Equally

Same as <grow> 1 0

Box Alignment

currently in flexbox & grid…

🤯 On Both Axis

Inline Axis justify-*

justify-content | justify-items | justify-self

Block Axis align-*

align-content | align-items | align-self

Shorthand place-*

place-content | place-items | place-self

Positional Values

start | end | center …

Baseline Values

baseline | first baseline | last baseline

Distributed Values

stretch | space-between | space-around | space-evenly

Overflow Keywords

safe | unsafe

Real Gutters*

row-gap | column-gap | gap

order: 3

In flex or grid layout…

See the Pen Flex-Order by @miriamsuzanne on CodePen.

!important Accessibility Issues

*-reverse | order

Authors must use order and the grid-placement properties only for visual, not logical, reordering of content.

– Grid Specification

Use ordering To Improve Readability

Always check your tab-order…

Start with structured & accessible HTML
Create a responsive & responsible layout
If you re-order, consider updating the DOM

Viewport Relative Units

vw | vh | vmin | vmax

Full-Height…

height: 100vh

Sticky-Footer…

min-height: 100vh

Responsive Type

font-size: calc(1em + 2vw)

Breaking Out

margin-inline: calc(50% - 50vw)

Watch out for… 100vh Phone Jank

Replaced Elements… object-fit & object-position

object-position ~= background-position

Same values, but for placing an object

object-fit: fill

contain | cover | scale-down

Multicolumn columns: 5 10em;

column-count | column-width

See the Pen Multicolumn by @miriamsuzanne on CodePen.

Design Unknown Content On An Unknown Canvas