CSS GRID LAYOUT

LET'S BUILD TOGETHER

http://rocka.co

xergioalex

Sergio A. Florez

TECH LEAD && FULL STACK DEVELOPER

DESARROLLO FRONT-END

DISPLAYS

Display property in CSS defines how the components(div, hyperlink, heading, etc) are going to be placed on the web page

DISPLAY FLEX

FLEX: Browser Compatibility

FLEX: Cheatsheet

FLEX: Exercises

DISPLAY GRID

since (2017)

GRID: Browser Compatibility

GRID: Cheatsheet

GRID: Exercises

FLEXBOX

VS

GRID

DEMO TIME!

CSS GRID EXCERCISES

MOVIES EXCERSICE

VIDEOS PLAYER EXCERSICE

BONUS!

line-clamp

Enable in Firefox Inspector
devtools.inspector.color-scheme-simulation.enabled

Enable in Firefox Inspector
ui.prefersReducedMotion: 1

prefers-reduced-motion

LET'S BUILD TOGETHER

http://rocka.co

xergioalex

Sergio A. Florez

TECH LEAD && FULL STACK DEVELOPER

ยกMUCHAS GRACIAS!

Css Grid Layout

By Sergio Alexander Florez Galeano

Css Grid Layout

Talk about css grid layout and some css tricks and insights extracted from the state of css survey (2020).

  • 1,204