When Grids Go Wrong: Debugging CSS Grid

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

Accidental implicit tracks @MicheBarks

grid-column: 3 / span 2; @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

.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

@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

.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