When Grids Go Wrong: Debugging CSS Grid

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