TIL from CSSBattle

TIL from CSSBattle

.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}} ☠

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

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

.Til { @container widget (width > 18em) { grid-template-areas: “image description” “image form”; grid-template-colums: repeat(1, 1fr) 3fr; /* Reason for this syntax: In our build process, spaces get lost in container queries. The CSS parser can handle missing spaces after quotation marks and closing parenthesis. TODO: After updates, replace with grid-template: “image description” “image form” /1fr 3fr; */ } }