CSS Layouts

Frontend Awesome! 10/20/2022

About Me

Maciej Gibas

Frontend Lead Engineer @ Infotech

☕ 🍞 ⌨️ 🏎 🏋🏼 🏃🏼 🎧 🎬

gibas.io • @gibasmaciej

Back in the_day

Tables

Simple and effective
  • First standard layout technique
  • Netscape 1993
  • HTML 3.2 1997
  • spacejam

Floats

Nooooo!!! 😱
  • First css layout technique
  • Netscape ~1998

Grid_System

Responsiveness
  • RESPONSIVE
  • iPhone 2007
  • bootstrap 1.0 2011

Current o_ptions

Block & Inline

Back to basics
  • No wrapper
  • maybe no css
  • mix and match

Columns

Newspaper columns
  • Dominantly "articles"
  • break inside
  • no horizontal gap
  • no column wraper

Flexbox

Content content content!
  • Content focused
  • single axis
  • feature rich
  • gap
  • responsivenes
  • reverse...a11y

CSS Grid

Second axis of flexbox
  • Layout focused
  • two axes
  • feature rich

What When

Under

Stacked blocks
One element under another example.
  • Content base height
  • no wrapper needed
  • no css
  • ✅ block

Side by side

Sticky blocks
One element next to another example.
  • Content base size
  • no wrapper needed
  • no css
  • ✅ inline
  • ✅ inline block

Simple columns

Columns example.
  • Newspaper columns
  • no column wrappers
  • best for breakable content
  • ✅ columns

Single axis

Single axis example.
  • "Ratio" based size
  • ✅ flexbox

Two axes

Two axes example.
  • Grid focused
  • ✅ grid

Wrapping

Wrapping before example. Wrapping after example.
  • Responsive
  • Two dimensional gap
  • ✅ Flexbox

Wrapping

Grid wrapping before example. Grid wrapping after example. Grid wrapping flex after example.
  • ✅ Flexbox

What_is coming

Or is here already!

Sub grids

No layout is imposible
  • Safari and Firefox

Sub grids

Even this is possible
Subgrid example.
  • Aligned columns
  • content based and fixed columns
  • row (item) wrapper
  • spaced rows

Masonry

Bye bye JavaScript
  • Photo galery
  • pintrest layout
  • still draft :(

Masonry

Masonry example.

Container queries

Holy grail
  • Closer to the design
  • better reusability
  • web apps

Resources

Bye