Tools · CSS · Grid-Spielwiese · Anleitungen
Anleitungen für Grid-Spielwiese
Drei kurze Beiträge: warum es wichtig ist, wie es geht, und ein konkreter Anwendungsfall.
Why CSS Grid Draws the Layout Before the Content Arrives
Most CSS layout starts with the content and lets the container follow. Grid turns that around: the parent declares rows and columns first, and items are placed onto its lines. That is why grid feels strange at first and why it holds alignment so well.
Anleitung lesenHow to Make a Grid Item Span Two Columns
grid-column: 1 / span 2 makes an item cover two columns. Where you put the start line, whether you also pin the row, and what happens to the items after it are the parts that decide whether the rest of the grid still looks right.
Anleitung lesenThe Holy Grail Layout With CSS Grid, and What to Change After
Header, footer, a main column between two sidebars: grid does the holy grail layout in a few lines. The first version has equal rows and equal columns, though, and that is rarely what a real page wants. Here is the whole path from preset to page.
Anleitung lesen