CSS GridTwo dimensions at once: the properties for rows, columns and placement.ComputingGrid controls the container; children can also place themselves.Defining the gridgrid-template-columns: 1fr 2frrepeat(3, 1fr) – three equalrepeat(auto-fit, minmax(200px, 1fr))gap: 1remUnitsfr – a share of what is leftminmax(a, b) – clamped betweenauto – as big as the contentmin-content / max-contentPlacing childrengrid-column: 1 / 3 – span twogrid-column: span 2grid-row: 2grid-area: nameAligningjustify-items – across a cellalign-items – down a cellplace-items: center – bothauto-fit with minmax gives a responsive grid with no media queries atall.CSS Gridlearnposters.com
CSS Grid — printable computing wall chart from LearnPosters. Free vector PDF, US Letter and A4.

What’s on the CSS Grid poster

15 entries in 4 groups.

Grid controls the container; children can also place themselves.

auto-fit with minmax gives a responsive grid with no media queries at all.

Questions about the CSS Grid poster

What’s on the CSS Grid poster?
15 entries in 4 groups. Grid controls the container; children can also place themselves. Defining the grid: grid-template-columns: 1fr 2fr, repeat(3, 1fr) – three equal, repe…; Units: fr – a share of what is left, minmax(a, b) – clamped between, auto – as big as…; Placing children: grid-column: 1 / 3 – span two, grid-column: span 2, grid-row: 2, gr…; Aligning: justify-items – across a cell, align-items – down a cell, place-items: cent…. auto-fit with minmax gives a responsive grid with no media queries at all.
Who is the CSS Grid poster for?
CSS Grid belongs to the Computing section rather than to a school year, because computing is not something one grade owns. Anyone learning the web can pin it up — a beginner, a student mid-course, or someone revising years later.
When should you use the CSS Grid poster?
Use grid when you are placing things in both directions. Use flexbox when it is one row or one column. A wall chart earns its place by being glanceable from where the work is happening, so CSS Grid belongs on the wall where that computing work actually happens, within glancing distance, rather than filed away.
What other posters go with CSS Grid?
Accessibility, ARIA and How a Browser Renders sit alongside CSS Grid in the Computing section. Printed together they make a wall rather than a single sheet, which is how a reference set actually gets used.AccessibilityARIAHow a Browser Renders
Is the CSS Grid poster free to download and print?
Yes. CSS Grid downloads as a free PDF with no account, no email and no watermark, like everything else in the Computing section. Print as many copies as you like for a home, a classroom, a library or a tutoring group; reselling the file is the only thing the licence rules out.Read the licence
What size does the CSS Grid poster print at?
CSS Grid is a vector PDF laid out for US Letter, and prints on A4 with Fit to page — the same file, no separate download. Because every mark on it is drawn rather than photographed, it stays sharp enlarged to A3, A2 or A1 at a copy shop. Colour carries emphasis only, so a greyscale print of CSS Grid loses nothing.Printing guide

Related posters

Charts that sit alongside CSS Grid on the same wall.

Browse every Computing poster, or start from the full catalogue.