Video available at https://www.youtube.com/watch?v=9g8WqKp4BGI
Talk at https://www.meetup.com/IS-CSS/events/262580285/
How do you know which layout technique you need to apply for your use case?
We will be comparing several alternatives (Float, Display, Flex, Grid), describing the strengths and limitations of the available layout modules, putting a focus on Grid.
Although we will have some simpler examples (perfect for beginners), we will also cover more advanced features (like #display: contents# and #subgrid#).
<div class="panels A">A</div>
<div class="panels B">B</div>
Grid Areas - Easy Prototyping
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr 4fr 1fr;
"H H H H H H H H H H H H"
"A C C C C C C C C C C B"
"F F F F F F F F F F F F";
● A Complete Guide to Flexbox
● A Complete Guide to Grid
● MDN: CSS layout
● MDN: Subgrid
● Grid by Example
● The Experimental Layouts Lab
● [Games] Grid Garden + Flexbox Froggy
● [Video] Flexbox vs. CSS Grid — Which is
● [Video] Hello Subgrid!
● [Video] CSS Grid: Moving From CSS
Frameworks To CSS Grid (2018 and beyond)
● CSS Grids — How Everyone Has Been
Building The Web Wrong Before 2018