Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSS Grids

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Klaus Klaus
June 26, 2018
Programming
8
0

CSS Grids

Basic Introduction into CSS Grids

Avatar for Klaus

Klaus

June 26, 2018

Other Decks in Programming

See All in Programming
contenteditable と日本語入力に向き合う
Avatar for taki colorful12
0
200
現場と育てるRailsモデリング 〜Spreadsheetから始めたモデル設計〜
Avatar for siroemk siroemk
2
600
全ての永続トークンを、生まれる前に消し去りたい！
Avatar for sylph01 sylph01
2
940
S3 TablesのIcebergデータに、AIエージェントからアクセスしてみた / 20261016developersio2026joetsu-accessing-iceberg-in-s3tables-via-agent
Avatar for kasacchiful kasacchiful
PRO
0
160
Agentic Software Factoryに、すごく賢いIF文を。 / super smart IF statement into the Agentic Software Factory.
Avatar for r-kagaya rkaga
8
2.2k
残高管理から台帳サービスへの進化
Avatar for kobaryo artoy
1
200
月間100万人のサービス刷新で、 技術選定をHonoに振り切った話
Avatar for bara yutobara
8
6.6k
Verilogで学ぶCPU自作入門
Avatar for uyuki uyuki234
8
4.1k
Compiling a real-world CLI tool to native with Static Hermes
Avatar for Tzvetan Mikov tmikov2023
0
120
【加筆修正版】Laravel のアプリケーションをどこにデプロイするか #phpcon_ehime
Avatar for akase244 akase244
0
150
Domain-Driven Transformation
Avatar for Henning Schwentner hschwentner
2
2.3k
Starting & Sustaining Code-Based E2E Testing for Non-Coding QA Teams( #jasstniigata )
Avatar for teyamagu teyamagu
PRO
1
1k

Featured

See All Featured
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.4k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
590
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
2
2.2k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.6k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
530
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.9k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
1k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
31k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
890
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k

Transcript

  1. Welcome ￫ Technologieplauscherl 26.06.2018 ￫ Thank you for coming! ￫

    netural.com/jobs

  2. CSS Grids Klaus Fischer @klausinger supersimple.at

  3. Content ￫ What? ￫ Why me? ￫ Why YOU should

    care? ￫ Flexbox vs. Grid ￫ Demo

  4. What? ￫ CSS properties for a grid layout ￫ No

    JS ￫ Don’t touch the markup!

  5. Why me?

  6. Why me? Josef Müller-Brockmann Swiss graphic designer & teacher

  7. None
  8. None

  9. Grid systems in graphic design / Rastersysteme für die visuelle

    Gestaltung. Josef Müller-Brockmann Teufen 1981.
  10. None
  11. None

  12. History Time! http://alistapart.com/article/the-story-of-css-grid-from-its-creators 1990 Tables 2000 Floats 2010 Flexbox 2015

    CSS Grid 201? ?

  13. Why YOU should care? ￫ Responsive landscape grows ￫ We

    need appropriate tools to "respond" ￫ Standardized technique ￫ No libraries / dependencies ￫ Combine with Flexbox

  14. Yes, please use.

  15. Flexbox Grid ￫ single-axis oriented ￫ two-dimensional oriented

  16. Flexbox Grid ￫ single-axis oriented ￫ focus: space-distribution along 1

    axis ￫ two-dimensional oriented ￫ dramatic transformations without markup changes

  17. Flexbox Grid ￫ single-axis oriented ￫ focus: space-distribution along 1

    axis ￫ bottom-up ￫ two-dimensional oriented ￫ dramatic transformations without markup changes ￫ top-down

  18. Flexbox Grid ￫ single-axis oriented ￫ focus: space-distribution along 1

    axis ￫ bottom-up: content-size based approach ￫ two-dimensional oriented ￫ dramatic transformations without markup changes ￫ top-down: overlapping / spanning

  19. Pre-Demo Know-How

  20. Demo ￫ Basic Grid ￫ Holy Grail Layout ￫ Explicit

    vs. implicit grid ￫ "Grid Toolkit" used for gridsystems https://codepen.io/klausinger/pen/WyyqmL?editors=1100 https://codepen.io/klausinger/pen/ZRjZJG?editors=1100#0

  21. Wait! There’s more! ￫ Implicit / Explicit Grid ￫ Overlapping

    content (Posters) ￫ Layering with z-index

  22. Resources ￫ https://gridbyexample.com/ ￫ http://labs.jensimmons.com/ ￫ https://github.com/rachelandrew/gridbugs ￫ https://alistapart.com/ ￫

    https://supersimple.at/gridsystems