Building layouts the way the web intended

🇲🇾 👾 🏀 🚲 🖌️ 👟 💻 🖊️ 🎙 🐈‍⬛ 🧗 🏳️‍🌈

@hj_chen

Screens, screens, screens

A range of screen sizes — Image source: Inch Calculator

Today, I will be sharing with you about laying out content on the web. And honestly, regardless of which technology stack you're using, odds are you will need to render and display content on a digital screen. And that screen could be any size these days.

If your content is going to be rendered by a browser engine, then your main mode of communication with the browser for styling content has to be CSS. And I'm sure everyone today has their own opinion about CSS, some of you might love it as much as I do, while others might see of it as a hard-to-deal with API you would like to avoid as much as possible.

Regardless of your opinions on CSS, I'm not here to tell you what to think or how to feel. The reality is that browser engines today are much more capable than before, they can lay out content much better than before. And we need to know how to make full use of the browser's web layout capabilities.

Technology evolves very fast, I know, but as of now, most web interactions involve a screen. And these screens can be as small as a watch-face or as large as a 70-inch super HDTV. And you, the developer or designer or creator, can't really control this.

Image credit: Jyotika Sofia Lindqvist

Layout technique: `float`

Item A

Item B

Item C

Layout technique: `inline-block`

Item A

Item B

Item C

The parent-child relationship

Diagram showing a container with 3 children elements within

Layout technique: `flex`

A flex item

Another flex item

Flex items are also flex children

All direct children of the flex container become flex children

When you set the display property of a box to flex, it creates a flex formatting context for its immediate children. Elements in a flex formatting context have a different set of behaviours from those in block or inline formatting contexts.

Flex formatting context

Flexbox devtools

Screenshot of flexbox overlay in Firefox

The `flex` property

Diagram showing each component of the flex shorthand

Sizing in flexbox

View demo

Flex directions

View demo

No actual grid

Boxies aligned with flex showing how there is no relationship between rows and 'columns'

But as nice as flexbox is, there is still a limitation. Or maybe its more accurate to say, it is something that flexbox was not meant to do. And that is to create actual grids that recognise an x and y axis.

All other layout models on the web only provide control in a single dimension. Elements in every layout model are laid out one after another. And when we force them to be the same width, they naturally just line up in a grid. However, every element has no idea of its own position in relation to any other element around it.

Grid systems built on these single dimension layout models rely on math to get items to line up neatly in rows and columns. This is a large reason why there were numerous grid libraries that would do the math for you and provide you the appropriate CSS classes to apply to your elements instead.

Real two-dimensional awareness

Boxies aligned with grid showing how there is an actual 2-dimensional grid

Layout technique: `grid`

Item A

Item B

Item C

Item D

Item E

Item F

A better way of building grids

View demo

The magic sauce

No, just kidding. It's just that alignment really ties it all together.

Diagrams of boxies showing how alignment works for flex and grid

Box alignment properties

Property	Axis	Aligns	Applies to
`justify-content`	main/inline	content within element (effectively adjusts padding)	block containers, flex containers and grid containers
`align-content`	cross/block	content within element (effectively adjusts padding)	block containers, flex containers and grid containers
`justify-items`	inline	items inside box (controls child items)	block containers and grid containers
`align-items`	cross/block	items inside box (controls child items)	flex-containers and grid-containers
`justify-self`	inline	element within parent (effectively adjusts margins)	block-level boxes, absolutely-positioned boxes and grid items
`align-self`	cross/block	element within parent (effectively adjusts margins)	absolutely-positioned boxes, flex items and grid items

Can we put it all together?

View demo

Дякую!

https://chenhuijing.com

@hj_chen

@huijing

Font is Bitter by Huerta Tipografica.
Sunflower illustration by pikisuperstar

Building layouts the way the web intended

Screens, screens, screens

Layout technique: float

Layout technique: inline-block

The parent-child relationship

Layout technique: flex

Flex formatting context

Flexbox devtools

The flex property

Sizing in flexbox

Flex directions

No actual grid

Real two-dimensional awareness

Layout technique: grid

A better way of building grids

The magic sauce

Box alignment properties

Can we put it all together?

Дякую!

Layout technique: `float`

Layout technique: `inline-block`

Layout technique: `flex`

The `flex` property

Layout technique: `grid`