Maciej Gibas
Frontend Lead Engineer @ Infotech
☕ 🍞 ⌨️ 🏎 🏋🏼 🏃🏼 🎧 🎬
gibas.io • @gibasmaciejCSS Layouts
Frontend Awesome! 10/20/2022
About Me
Back in the_day
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
- Content base height
- no wrapper needed
- no css
- ✅ block
Side by side
Sticky blocks
- Content base size
- no wrapper needed
- no css
- ✅ inline
- ✅ inline block
Simple columns
- Newspaper columns
- no column wrappers
- best for breakable content
- ✅ columns
Single axis
- "Ratio" based size
- ✅ flexbox
Two axes
- Grid focused
- ✅ grid
Wrapping
- Responsive
- Two dimensional gap
- ✅ Flexbox
Wrapping
- ✅ Flexbox
What_is coming
Or is here already!
Sub grids
No layout is imposible
- Safari and Firefox
Sub grids
Even this is possible
- Aligned columns
- content based and fixed columns
- row (item) wrapper
- spaced rows
Masonry
Bye bye JavaScript
- Photo galery
- pintrest layout
- still draft :(
Masonry
Container queries
Holy grail
- Closer to the design
- better reusability
- web apps
Resources
- Steven D. Anderson • grid-layout.com
- John Macpherson • css-tricks.com
- Chris Coyier • css-tricks.com
- Chris House • css-tricks.com
- Michael Benjamin • stackoverflow.com
- Rachel Andrew • smashingmagazine.com
- Una • glitch.me