A presentation at Bristol JS in in Bristol, UK by Michelle Barker
Debugging CSS Grid @MicheBarks
CSS Grid Layout Specification @MicheBarks
@MicheBarks
@MicheBarks
CSS { In Real Life } css-irl.info @MicheBarks
The birth of CSS Floats Tables @MicheBarks CSS Grid Flexbox Today
CSS Grid @MicheBarks
CSS Grid @MicheBarks +
@MicheBarks
Scaffolding (building the grid) @MicheBarks
.grid { display: grid; grid-template-rows: repeat(4, 8rem); grid-template-columns: repeat(4, 12rem); gap: 1rem; } @MicheBarks
@MicheBarks
Placing items .image { grid-row: 1 / 3; grid-column: 1 / 4; } @MicheBarks
Placing items .image { grid-row: 1 / span 2; grid-column: 1 / span 3; } @MicheBarks
Placing items .image { grid-row: span 2 / 3; grid-column: span 3 / 4; } @MicheBarks
Placing items .image { grid-row: span 2; grid-column: span 3; } @MicheBarks
Placing items .grid { display: grid; grid-template-rows: [image-start] 8rem 8rem [image-end] 8rem 8rem; } grid-template-columns: repeat(4, 12rem); gap: 1rem; .image { grid-row: image; grid-column: 1 / 4; } @MicheBarks
Placing items .grid { display: grid; grid-template-rows: [image-start] 8rem 8rem [image-end] 8rem 8rem; grid-template-columns: repeat(4, 12rem); gap: 1rem; } .image { grid-row: image; grid-column: 1 / 4; } @MicheBarks
Placing items .grid { display: grid; grid-template-rows: [image-start] 8rem 8rem [image-end] 8rem 8rem; grid-template-columns: [image-start] 12rem 12rem 12rem [image-end] 12rem; } gap: 1rem; .image { grid-area: image; } @MicheBarks
image-start image-start image-end @MicheBarks image-end
image-start image-end image-start image image-end @MicheBarks
Placing items .grid { display: grid; grid-template-rows: [image-start] 8rem 8rem [image-end] 8rem 8rem; grid-template-columns: [image-start] 12rem 12rem 12rem [image-end] 12rem; gap: 1rem; } .image { grid-area: image; } @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: repeat(4, 8rem); grid-template-columns: repeat(4, 12rem); grid-template-areas: ‘i i i .’ ‘i i i .’ ‘… .’ ‘… .’; } @MicheBarks gap: 1rem;
A B @MicheBarks
Placing items .grid { display: grid; grid-template-rows: [image-start] 8rem 8rem [image-end] 8rem 8rem; grid-template-columns: [image-start] 12rem 12rem 12rem [image-end] 12rem; } @MicheBarks grid-template-areas: ‘… .’ ‘. . text text’ ‘. . text text’ ‘. . text text’; gap: 1rem;
Placing items .grid { display: grid; grid-template-rows: [image-start] 8rem 8rem [image-end] 8rem 8rem; grid-template-columns: [image-start] 12rem 12rem 12rem [image-end] 12rem; grid-template-areas: ‘… .’ ‘. . text text’ ‘. . text text’ ‘. . text text’; } @MicheBarks gap: 1rem;
Auto placement grid-template-rows: repeat(3, 10rem); @MicheBarks
grid-auto-rows: 10rem; Implicit track @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); } .image { grid-column: span 4; grid-row: 1 / span 2; } .text { grid-column: span 4; grid-row: 2 / span 2; } @MicheBarks
.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 8rem); } .image { grid-column: span 4; grid-row: 1 / span 2; } .text { grid-column: span 4; grid-row: 2 / span 2; } @MicheBarks
.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 8rem); } .image { grid-column: span 4; grid-row: 1 / span 2; } .text { grid-column: span 4; grid-row: 2 / span 2; } @MicheBarks
@MicheBarks
@MicheBarks
.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 8rem); } .image { grid-column: 1 / span 4; grid-row: 1 / span 2; } .text { grid-column: 1 / span 4; grid-row: 2 / span 2; } @MicheBarks
.grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 8rem); } .image { grid-column: 1 / -1; grid-row: 1 / span 2; } .text { grid-column: 1 / -1; grid-row: 2 / span 2; } @MicheBarks
1 @MicheBarks -1
-4 -3 -2 -1 @MicheBarks
Equal-width columns @MicheBarks
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } @MicheBarks
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
Alignment between Grid items @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
@MicheBarks
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .item { grid-row: span 3; display: grid; grid-template-rows: subgrid; } @MicheBarks
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .item { grid-row: span 3; display: grid; grid-template-rows: subgrid; } @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 https://codepen.io/michellebarker/pen/JgEYxv
Flexbox @MicheBarks https://codepen.io/michellebarker/pen/JgEYxv
Flexbox @MicheBarks https://codepen.io/michellebarker/pen/JgEYxv
Grid @MicheBarks https://codepen.io/michellebarker/pen/JgEYxv
Grid @MicheBarks https://codepen.io/michellebarker/pen/JgEYxv
⚠ 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
Grid by Example – Rachel Andrew gridbyexample.com Layout Land – Jen Simmons bit.ly/35FWX6l Mozilla Developer Channel bit.ly/2QZCtBp @MicheBarks
CSS { In Real Life } css-irl.info @CSSInRealLife @MicheBarks
CSS Grid gives us incredible powers for building web layouts. 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 tackle some common difficulties, check out some tools for debugging and put the CSS Grid specification under the microscope.
for free. You
can too.