TIL+ from CSSBattle

A presentation at Tech Talk @ Tagesspiegel in January 2024 in by Gunnar Bittersmann

Slide 1

Slide 2

Slide 3

.Til { @container widget (width > 18em) { grid-template: “image description” “image form” /1fr 3fr; } } @container widget(width>18em){.Til{grid-template:”image description”“image form”/1fr3fr}} ☠

Slide 4

.Til { @container widget (width > 18em) { grid-template-areas: “image description” “image form”; grid-template-colums: repeat(1, 1fr) 3fr; } }

Slide 5

Slide 6

Slide 7

.Til { @container widget (width > 18em) { grid-template-areas: “image description” “image form”; grid-template-colums: 1fr+3fr; } }

Slide 8

.Til { @container widget (width > 18em) { grid-template-areas: “image description” “image form”; grid-template-colums: repeat(1, 1fr) auto; } }