Debugging CSS Grid

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