[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-1-en-105":3,"doc-seo-573453-105":53,"doc-detail-573453-en":126},{"code":4,"msg":5,"data":6},0,"success",[7,14,19,24,29,34,39,44,49],{"id":8,"doc_module":9,"doc_module_name":10,"category_name":11,"show_sort_weight":12,"slug":13},11,1,"Template","Presentations",90,"presentations",{"id":15,"doc_module":9,"doc_module_name":10,"category_name":16,"show_sort_weight":17,"slug":18},12,"Resumes",80,"resumes",{"id":20,"doc_module":9,"doc_module_name":10,"category_name":21,"show_sort_weight":22,"slug":23},14,"Invoices",70,"invoices",{"id":25,"doc_module":9,"doc_module_name":10,"category_name":26,"show_sort_weight":27,"slug":28},15,"Posters",60,"posters",{"id":30,"doc_module":9,"doc_module_name":10,"category_name":31,"show_sort_weight":32,"slug":33},16,"Social Media",50,"social-media",{"id":35,"doc_module":9,"doc_module_name":10,"category_name":36,"show_sort_weight":37,"slug":38},17,"Forms",40,"forms",{"id":40,"doc_module":9,"doc_module_name":10,"category_name":41,"show_sort_weight":42,"slug":43},18,"Letters",30,"letters",{"id":45,"doc_module":9,"doc_module_name":10,"category_name":46,"show_sort_weight":47,"slug":48},21,"Paper Templates",5,"papers-templates",{"id":50,"doc_module":9,"doc_module_name":10,"category_name":51,"show_sort_weight":4,"slug":52},158,"General","general-158",{"code":4,"msg":54,"data":55},"ok",{"site_id":56,"language":57,"slug":58,"title":59,"keywords":60,"description":61,"schema_data":62,"social_meta":119,"head_meta":121,"extra_data":123,"updated_unix":125},105,"en","grid-cheat-sheet-grid-layout-cheatsheet","Grid-Cheat-Sheet - grid layout cheatsheet","","Concise cheatsheet covering CSS Grid concepts and practical examples. Explains grid layout primitives such as grid lines, cells, tracks, and grid areas, then demonstrates core syntax including display: grid/inline-grid/subgrid, grid-template-* for rows, columns, and areas, and gap/gutter sizing. Includes automatic item placement, grid-auto-flow modes, placement controls (grid-row/column start/end, span), item and container alignment (align-content/justify-content, align-items/justify-items, align-self/justify-self), and grid template patterns like headers and repeat() columns, plus curated learning resources.",{"@graph":63,"@context":118},[64,80,101],{"@type":65,"itemListElement":66},"BreadcrumbList",[67,71,74,77],{"item":68,"name":69,"@type":70,"position":9},"https://docshare.wps.com","Home","ListItem",{"item":72,"name":10,"@type":70,"position":73},"https://docshare.wps.com/template/",2,{"item":75,"name":11,"@type":70,"position":76},"https://docshare.wps.com/template/presentations/",3,{"item":78,"name":59,"@type":70,"position":79},"https://docshare.wps.com/template/grid-cheat-sheet-grid-layout-cheatsheet/573453/",4,{"url":78,"name":59,"@type":81,"image":82,"author":87,"headline":59,"publisher":90,"fileFormat":93,"inLanguage":57,"description":61,"dateModified":94,"datePublished":95,"encodingFormat":93,"isAccessibleForFree":96,"interactionStatistic":97},"DigitalDocument",{"url":83,"@type":84,"width":85,"height":86},"https://docshare.wps.com/thumbnails/grid-cheat-sheet-grid-layout-cheatsheet/573453.png","ImageObject",442,249,{"name":88,"@type":89},"MrHarris58","Person",{"url":68,"name":91,"@type":92},"DocShare","Organization","application/pdf","2026-10-17","2026-10-14",true,{"@type":98,"interactionType":99,"userInteractionCount":76},"InteractionCounter",{"@type":100},"ViewAction",{"@type":102,"mainEntity":103},"FAQPage",[104,110,114],{"name":105,"@type":106,"acceptedAnswer":107},"What are the main grid building blocks covered in this cheatsheet?","Question",{"text":108,"@type":109},"It covers grid lines, cells, tracks, and grid areas, and shows how they relate to layout structure.","Answer",{"name":111,"@type":106,"acceptedAnswer":112},"How can you define rows, columns, and areas in CSS Grid from the document?",{"text":113,"@type":109},"Use grid-template-rows, grid-template-columns, and grid-template-areas to specify track sizes and named area strings.",{"name":115,"@type":106,"acceptedAnswer":116},"How does the cheatsheet explain placement and alignment of grid items?",{"text":117,"@type":109},"It describes automatic placement (grid-auto-flow), explicit placement via grid-row/column start/end and span, and alignment controls including align/justify for both the whole grid and individual items.","https://schema.org",{"og:url":78,"og:type":120,"og:title":59,"og:site_name":91,"og:description":61},"article",{"robots":122,"canonical":78},"index,follow",{"doc_id":124,"site_id":56},573453,1792023081,{"code":4,"msg":5,"data":127},{"doc_id":124,"user_id":128,"nickname":88,"user_avatar":129,"doc_module":9,"category_id":8,"category_name":11,"doc_title":59,"doc_description":61,"doc_content":130,"file_id":131,"file_url":132,"file_type":133,"file_size":134,"view_count":76,"is_deleted":4,"is_public":9,"is_downloadable":9,"audit_status":9,"page_count":9,"language":135,"language_code":57,"site_id":56,"html_lang":57,"table_of_contents":136,"faqs":137,"seo_title":138,"seo_description":61,"update_tm":139,"read_time":4},687212988360,"https://ap-avatar.wpscdn.com/davatar_276721f389ce27ea32af1340a28f341c","grid layout cheatsheet  \nby @alsacreations  \ngrid concept s and example  \ngrid line  \n\n|  |  |  |\n| --- | --- | --- |\n| \u003Cbr>1 |  |  |\n| 3 | 2 |  |\n|  | 4 |  |\n|  |  |  |\n\ngrid cell  \n\n|  |  |  |\n| --- | --- | --- |\n| \u003Cbr>1 |  |  |\n| 3 | 2 |  |\n|  | 4 |  |\n|  |  |  |\n\ngrid track  \n\n| \u003Cbr>1 |  |  |\n| --- | --- | --- |\n| 3 | 2 |  |\n|  | 4 |  |\n|  |  |  |\n\ngrid area  \n\n|  |  |  |\n| --- | --- | --- |\n| \u003Cbr>1 |  |  |\n| 3 | 2 |  |\n|  | 4 |  |\n|  |  |  |\n\n.parent { display: grid;  \ngrid-template-columns: 100px 1fr;  \ngrid-template-rows: auto 1fr auto;}  \n.one { grid-row: 1;  \ngrid-column: 1;}  \n.two {  \ngrid-row: 1 / 3;  \ngrid-column: 2;}  \n.three {  \ngrid-row: 2 / 4;  \ngrid-column: 1;}  \n.four { grid-row: 3;  \ngrid-column: 2;}  \ndefi ning the grid  \ndisplay  \ngrid· inline-grid · subgrid  \n\n| grid-template-rows\u003Cbr>none · line name · track size · auto |\n| --- |\n| grid-template-columns\u003Cbr>none · line name · track size · auto |\n| grid-template-areas\u003Cbr>none · string |\n\ngrid-template grid  \nshortcut for grid-template-rows|-column  \nshortcut for…everything  \ngaps  \nspecifying size of row and column gutters  \n\n|  |  |  |\n| --- | --- | --- |\n| \u003Cbr>1 | 2 |  |\n| 3 | 4 |  |\n|  |  |  |\n\n|  |  |  |\n| --- | --- | --- |\n| \u003Cbr>1 |  |  |\n| \u003Cbr>3 | 2\u003Cbr>\u003Cbr>4 |  |\n|  |  |  |\n\n.parent {  \nrow-gap: 50px;}  \n.parent {  \ncolumn-gap: 50px;}  \n\n| \u003Cbr>1\u003Cbr>\u003Cbr>3 | \u003Cbr>2\u003Cbr>\u003Cbr>4 |  |\n| --- | --- | --- |\n|  |  |  |\n\n.parent {  \ngap: 50px 10px;}  \nauto placement  \nautomatic placement for items that aren't placed  \n\n|  |  |  |  |  |\n| --- | --- | --- | --- | --- |\n|  | 1 | 2 | 3 |  |\n|  | 4 | 5 | 6 |  |\n|  | 7 | 8 |  |  |\n|  |  |  |  |  |\n\n\n|  |  |  |  |  |\n| --- | --- | --- | --- | --- |\n|  | 1 | 4 | 7 |  |\n|  | 2 | 5 | 8 |  |\n|  | 3 | 6 |  |  |\n|  |  |  |  |  |\n\n\n|  |  |  |  |  |  |\n| --- | --- | --- | --- | --- | --- |\n|  | 1 |  | 2 | 4 |  |\n|  |  | 3 |  | 5 |  |\n|  | 6 |  |  |  |  |\n|  |  |  |  |  |  |\n\n.parent {  \ngrid-auto-flow: row;}  \n.parent {  \ngrid-auto-flow: column;}  \n.parent {  \ngrid-auto-flow: dense;}  \np lacing items  \ngrid-row-start  \nauto · line name · line number  \ngrid-column-start  \nauto · line name · line number  \ngrid-row-end  \nauto · line name · line number  \ngrid-column-end  \nauto · line name · line number  \ngrid-row  \nshortcut for grid-row-start|end  \ngrid-column  \nshortcut for grid-column- *  \ngrid-area  \nshortcut for…everything  \nspan N  \nkeyword for row or column spanning  \n.two {  \ngrid-row-start: 1;  \ngrid-row-end: 3;}  \n\n|  |  |  |\n| --- | --- | --- |\n| \u003Cbr>1\u003Cbr>3 | 2 |  |\n|  |  |  |\n\n.two {  \ngrid-row: 1 / 3;}  \n\n|  |  |  |\n| --- | --- | --- |\n| \u003Cbr>1\u003Cbr>3 | 2 |  |\n|  |  |  |\n\n.two {  \ngrid-row: 1 / span 2;}  \n\n|  |  |  |\n| --- | --- | --- |\n| \u003Cbr>1\u003Cbr>3 | 2 |  |\n|  |  |  |\n\n.four {  \ngrid-area: 2 / 2 / 3 / 3;}  \n\n|  |  |\n| --- | --- |\n| \u003Cbr>1 2 |  |\n| \u003Cbr>3 4 |  |\n|  |  |\n\nitem alignment container alignment  \nalign-content  \nvertical alignment for whole grid start · end · center · stretch · space-around space-between · space-evenly  \njustify-content  \nhorizontal alignment for whole grid start · end · center · stretch · space-around space-between · space-evenly  \n\n| place-content\u003Cbr>shortcut for align-content and justify-content |\n| --- |\n| align-items\u003Cbr>vertical alignment for items in their cells start · end · center · stretch |\n| justify-items\u003Cbr>horizontal alignment for items in their cells start · end · center · stretch |\n| place-items\u003Cbr>shortcut for align-items and justify-items |\n\njustify-self  \nhorizontal alignment for specific item in its cell start · end · center · stretch  \nalign-self  \nvertical alignment for specific item in its cell start · end · center · stretch  \nplace-self  \nshortcut for align-self and justify-self  \npatterns  \n.parent {  \nalign-content: center;  \njustify-content: center;}  \n\n|  |  |  |\n| --- | --- | --- |\n|  | |  |\n|  |  |  |\n\n.parent {  \ngrid-auto-rows:  \nauto 1fr auto;}  \n\n|  |  |\n| --- | --- |\n| \u003Cbr>header |  |\n| \u003Cbr>main |  |\n| \u003Cbr>footer |  |\n|  |  |\n\n.parent {  \ngrid-template-columns: repeat(2,","cbCaiiA0JGkLpi4y","https://ap.wps.com/l/cbCaiiA0JGkLpi4y","pdf",78309,"English","# Grid concept s and example\n## Grid primitives: line, cell, track, area\n## Defining the grid: display and grid-template\n## Gaps and placement\n## Item/container alignment and patterns\n## Resources","[{\"question\":\"What are the main grid building blocks covered in this cheatsheet?\",\"answer\":\"It covers grid lines, cells, tracks, and grid areas, and shows how they relate to layout structure.\"},{\"question\":\"How can you define rows, columns, and areas in CSS Grid from the document?\",\"answer\":\"Use grid-template-rows, grid-template-columns, and grid-template-areas to specify track sizes and named area strings.\"},{\"question\":\"How does the cheatsheet explain placement and alignment of grid items?\",\"answer\":\"It describes automatic placement (grid-auto-flow), explicit placement via grid-row/column start/end and span, and alignment controls including align/justify for both the whole grid and individual items.\"}]","Grid-Cheat-Sheet - grid layout cheatsheet | PDF",1791940065]