A presentation at State Of The Browser in in London, UK by Michelle Barker
When Grids Go Wrong (Debugging CSS Grid) @MicheBarks
@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) @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: 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: 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
@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
Grids without media queries? @MicheBarks
.auto-fill { grid-template-columns: repeat(auto-fill, 18rem); } .auto-fit { grid-template-columns: repeat(auto-fit, 18rem); } @MicheBarks
@MicheBarks
.auto-fill { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); } .auto-fit { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } @MicheBarks
@MicheBarks
@MicheBarks
Auto-fill Fill the grid with items @MicheBarks
Auto-fit Fit the items into the grid @MicheBarks
@MicheBarks
grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); @MicheBarks
@MicheBarks
:root { —outerPad: 1rem; —gridPad: 1rem; } .item { —totalOuterPad: calc(2 * var(—outerPad)); —totalGridPad: calc(2 * var(—gridPad)); —totalPad: calc(var(—totalOuterPad) + var(—totalGridPad)); } @MicheBarks max-width: calc(100vw - var(—totalPad)); https://codepen.io/michellebarker/pen/RwbQGvJ
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
CSS { In Real Life } css-irl.info @MicheBarks / @CSSInRealLife @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.