A presentation at London CSS in in London, UK by Michelle Barker
When Grids Go Wrong (Debugging CSS Grid) @MicheBarks
• • • @MicheBarks Front End Developer at Ordoo Mozilla Tech Speaker Author of CSS { In Real Life }
.sidebar { float: left; width: 200px; } .clearfix { overflow: auto; } .clearfix::after { content: ”; clear: both; display: table; } @MicheBarks
CSS Grid @MicheBarks
CSS Grid @MicheBarks +
Scaffolding (building the grid) .grid { display: grid; grid-template-rows: repeat(4, 8rem); grid-template-columns: repeat(4, 12rem); gap: 1rem; } @MicheBarks
@MicheBarks
Placing items .a { grid-row: 1 / 3; grid-column: 1 / 4; } @MicheBarks
Placing items .a { grid-row: 1 / span 2; grid-column: 1 / span 3; } @MicheBarks
Placing items .a { grid-row: span 2 / 3; grid-column: span 3 / 4; } @MicheBarks
Placing items .a { grid-row: span 2; grid-column: span 3; } @MicheBarks
Placing items .grid { display: grid; grid-template-rows: [a-start] 8rem 8rem [a-end] 8rem 8rem; } grid-template-columns: repeat(4, 12rem); gap: 1rem; .a { grid-row: a; grid-column: 1 / 4; } @MicheBarks
Placing items .grid { display: grid; grid-template-rows: [a-start] 8rem 8rem [a-end] 8rem 8rem; grid-template-columns: repeat(4, 12rem); gap: 1rem; } .a { grid-row: a; } @MicheBarks grid-column: 1 / 4;
Placing items .grid { display: grid; grid-template-rows: [a-start] 8rem 8rem [a-end] 8rem 8rem; grid-template-columns: [a-start] 12rem 12rem 12rem [a-end] 12rem; } gap: 1rem; .a { grid-area: a; } @MicheBarks
Placing items .grid { display: grid; grid-template-rows: [a-start] 8rem 8rem [a-end] 8rem 8rem; grid-template-columns: [a-start] 12rem 12rem 12rem [a-end] 12rem; gap: 1rem; } .a { grid-area: a; } @MicheBarks
Placing items .a { grid-area: 1 / 1 / 3 / 4; } /* grid-row-start / grid-column-start / grid-row-end / grid-column-end */ @MicheBarks
Placing items .grid { display: grid; grid-template-rows: [a-start] 8rem 8rem [a-start] 8rem 8rem; grid-template-columns: [a-start] 12rem 12rem 12rem [a-end] 12rem; grid-template-areas: ‘a a a .’ ‘a a a .’ ‘… .’ ‘… .’; } @MicheBarks gap: 1rem;
@MicheBarks
Placing items .grid { display: grid; grid-template-rows: [a-start] 8rem 8rem [a-end] 8rem 8rem; grid-template-columns: [a-start] 12rem 12rem 12rem [a-end] 12rem; } @MicheBarks grid-template-areas: ‘… .’ ‘. . b b’ ‘. . b b’ ‘. . b b’; gap: 1rem;
Placing items .grid { display: grid; grid-template-rows: [a-start] 8rem 8rem [a-end] 8rem 8rem; grid-template-columns: [a-start] 12rem 12rem 12rem [a-end] 12rem; grid-template-areas: ‘… .’ ‘. . b b’ ‘. . b b’ ‘. . b b’; } @MicheBarks gap: 1rem;
Auto placement @MicheBarks
Auto placement @MicheBarks
Accidental implicit tracks @MicheBarks
grid-column: 3 / span 2; @MicheBarks
grid-column: 3 / span 3; @MicheBarks
grid-column: 3 / span 3; @MicheBarks
@MicheBarks
.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 8rem); } .a { grid-column: span 4; grid-row: 1 / span 2; } .b { grid-column: span 4; grid-row: 2 / span 2; } @MicheBarks
.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 8rem); } .a { grid-column: span 4; } grid-row: 1 / span 2; .b { grid-column: span 4; } @MicheBarks grid-row: 2 / span 2;
.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 8rem); } .a { grid-column: span 4; grid-row: 1 / 3; } .b { grid-column: span 4; grid-row: 2 / 4; } @MicheBarks
@MicheBarks
@MicheBarks
.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 8rem); } .a { grid-column: span 4; } grid-row: 1 / span 2; .b { grid-column: span 4; } @MicheBarks grid-row: 2 / span 2;
.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 8rem); } .a { grid-column: 1 / span 4; } grid-row: 1 / span 2; .b { grid-column: 1 / span 4; } @MicheBarks grid-row: 2 / span 2;
.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 8rem); } .a { grid-column: 1 / -1; } grid-row: 1 / span 2; .b { grid-column: 1 / -1; } @MicheBarks grid-row: 2 / span 2;
Equal-width columns @MicheBarks
.grid { display: grid; grid-template-columns: repeat(4, 1fr); } @MicheBarks gap: 40px;
grid-template-columns: repeat(4, 1fr); @MicheBarks
grid-template-columns: 2fr repeat(3, 1fr); @MicheBarks
grid-template-columns: repeat(4, 1fr); @MicheBarks
grid-template-columns: repeat(4, 1fr); @MicheBarks
@MicheBarks
Extrinsic sizing Context-based @MicheBarks
Intrinsic sizing Content-based @MicheBarks
grid-template-columns: repeat(4, 1fr); @MicheBarks
grid-template-columns: repeat(4, minmax(0, 1fr)); @MicheBarks
grid-template-columns: repeat(4, 1fr); @MicheBarks
grid-template-columns: repeat(4, 0.5fr); @MicheBarks
grid-template-columns: repeat(4, 0.2fr); @MicheBarks
Alignment between Grid cells @MicheBarks
Align-items Align-content Justify-items Justify-content Align-self Justify-self @MicheBarks
@MicheBarks
align-items: center; @MicheBarks
display: grid; display: flex; @MicheBarks
@MicheBarks
@MicheBarks
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .item { grid-row: span 3; display: grid; grid-template-rows: subgrid; } @MicheBarks
When not to use Grid @MicheBarks
⚠ Tables @MicheBarks
❌ table { display: grid; } @MicheBarks
❌ tr { display: grid; } @MicheBarks
⚠ When you don’t want items to align in rows or columns @MicheBarks
Flexbox @MicheBarks
Grid @MicheBarks
⚠ When your fallback layout takes twice as long @MicheBarks
This won’t work in IE11 .grid { display: grid; grid-template-columns: repeat(3, 1fr); } @supports not (display: grid) { .grid { display: flex; flex-wrap: wrap; } } @MicheBarks
This will work .grid { display: flex; flex-wrap: wrap; } @supports (display: grid) { .grid { display: grid; grid-template-columns: repeat(3, 1fr); } } @MicheBarks
CSS { In Real Life } css-irl.info @MicheBarks
CSS Grid gives us incredible powers for building web layouts, and there has never been a better time to start using it in production. But with so many different ways to create a grid and place items, it’s not always easy to debug when layouts don’t behave as we expect them to.
In this talk we’ll examine some common problems, and put the CSS Grid specification under the microscope to understand some of Grid’s surprising behaviours. We’ll take a look at how Grid works in harmony with (and not against!) other layout methods to build the robust, flexible web of the future.
for free. You
can too.