[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-1-en-105":3,"doc-seo-573454-105":53,"doc-detail-573454-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","css-grid-cheat-sheet-summary","CSS Grid Cheat Sheet - summary","","Concise CSS Grid reference covering browser compatibility and key grid concepts for both legacy Microsoft-prefixed implementations and the modern specification. Includes the grid parent container settings such as grid-gap, grid-row-gap, grid-column-gap, and grid-template-columns/rows, plus grid child placement rules for columns and rows with align-self overrides. Also provides a quick view of supported versions across IE, Edge, Firefox, Chrome, Safari, and Opera, updated in 2018.",{"@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/css-grid-cheat-sheet-summary/573454/",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/css-grid-cheat-sheet-summary/573454.png","ImageObject",442,249,{"name":88,"@type":89},"moss~","Person",{"url":68,"name":91,"@type":92},"DocShare","Organization","application/pdf","2026-10-15","2026-10-14",true,{"@type":98,"interactionType":99,"userInteractionCount":73},"InteractionCounter",{"@type":100},"ViewAction",{"@type":102,"mainEntity":103},"FAQPage",[104,110,114],{"name":105,"@type":106,"acceptedAnswer":107},"What CSS Grid properties define the grid structure for columns and rows?","Question",{"text":108,"@type":109},"Use grid-template-columns and grid-template-rows to define the column and row templates for the grid container.","Answer",{"name":111,"@type":106,"acceptedAnswer":112},"How do you control the gap between grid cells in CSS Grid?",{"text":113,"@type":109},"Use grid-gap or the specific properties grid-row-gap and grid-column-gap to set vertical and horizontal spacing between cells.",{"name":115,"@type":106,"acceptedAnswer":116},"How are individual grid items positioned within the grid?",{"text":117,"@type":109},"Set grid-column-start and grid-column-end to place items horizontally, and grid-row-start and grid-row-end (or the corresponding row placement properties) to place them vertically, with align-self for alignment overrides.","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},573454,1792033698,{"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":73,"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},962090895452,"https://ap-avatar.wpscdn.com/davatar_a8503ba1806abce46bf441b54a3ca4cd","CSS Grid Cheat Sheet  \nby Ryan Johnson (CITguy) [via](via cheatography.com/138/cs/2309/)[ cheatography.com/138/cs/2309/](via cheatography.com/138/cs/2309/)  \nBrowser Compatibility  \n| Browser | Latest Spec | Old Spec |\n| --- | --- | --- |\n| IE | n/a | 10-11 |\n| Edge | 16+ | 12-15 |\n| Firefox | 52+ | n/a |\n| Chrome | 57+ | n/a |\n| Safari | 10.1+ | n/a |\n| Opera | 44+ | n/a |\n\ncaniuse: \"CSS Grid\"  \nMSDN: \"Grid layout (Windows)\"  \nMDN: \"CSS Grid Layout\"  \nGrid Parent (old spec)  \n\n| -ms-grid-columns: \u003Ctr ack s> Define template for columns in a grid |\n| --- |\n| -ms-grid-rows: \u003Ctr ack s>\u003Cbr>Define template for rows in a grid |\n| (\u003Ctr ack s>)[\u003Cin teg er>] |\n| A way of defining repeating tracks. (e.g. (1fr) [12], ( 1fr 2fr) |\n| [3], etc.) |\n\nMSDN: \"Tracks (Columns and Rows)\"  \nGrid Child (old spec)  \n-ms-grid-column: \u003Cin teg er>  \nColumn Placement (default: 1)  \n-ms-grid-column-span: \u003Cin teg er>  \nNumber of columns to span (default: 1)  \n-ms-grid-column-align: \u003Cal ign men t>  \nAlignment within a column  \n\u003Cal ign men t> = start | center | end | [ stretch]  \n-ms-grid-row: \u003Cin teg er>  \nRow Placement (default: 1)  \n-ms-grid-row-span : \u003Cin teg er>  \nNumber of rows to span (default: 1)  \nGrid Child (old spec) (cont)  \n| -ms-grid-row-align: \u003Cal ign men Alignment within a row \u003Cal ign men t> = start |] | t>\u003Cbr>center | end | [ stretch |\n| --- | --- |\n\nMSDN: \"Grid Items\"  \nGrid Parent (latest spec)  \ngrid-gap: \u003Cga p> | \u003Cga p :r ow> \u003Cga p :c ol>  \nDefine gap between grid cells. MDN  \nShorthand for grid-row-gap and grid-column-gap .  \ngrid-row-gap: \u003Cga p>  \nDefine vertical gap between grid cells. MDN  \ngrid-column-gap: \u003Cga p>  \nDefine horizontal gap between grid cells. MDN  \ngrid-template-columns: \u003Ctr ack -li st>  \nDefine the horizontal (column) template of the grid. MDN  \ngrid-template-rows: \u003Ctr ack -li st>  \nDefine the vertical (row) template of the grid. MDN  \nGrid Child (latest spec)  \ngrid-column-start: \u003Cin teg er>  \nStarting column where grid cell should be placed. MDN  \ngrid-column-end: \u003Cin teg er>  \nEnding column where grid cell should be placed.(default: value of grid-c olu mn- start) MDN  \nalign-self: \u003Cal ign men t>  \nOverride parent grid column alignment. MDN  \nBy Ryan Johnson (CITguy)  \n[cheatography.com/citguy/](cheatography.com/citguy/)  \nNot published yet.  \nLast updated 2nd December, 2018. Page 1 of 1.  \nSponsored by Readable.com Measure your website readability!  \n[https://readable.com](https://readable.com)","cbCaiksqL9ZsEr4t","https://ap.wps.com/l/cbCaiksqL9ZsEr4t","pdf",51040,"English","# Browser Compatibility\n## Grid Parent (old spec)\n## Grid Child (old spec)\n## Grid Parent (latest spec)\n## Grid Child (latest spec)","[{\"question\":\"What CSS Grid properties define the grid structure for columns and rows?\",\"answer\":\"Use grid-template-columns and grid-template-rows to define the column and row templates for the grid container.\"},{\"question\":\"How do you control the gap between grid cells in CSS Grid?\",\"answer\":\"Use grid-gap or the specific properties grid-row-gap and grid-column-gap to set vertical and horizontal spacing between cells.\"},{\"question\":\"How are individual grid items positioned within the grid?\",\"answer\":\"Set grid-column-start and grid-column-end to place items horizontally, and grid-row-start and grid-row-end (or the corresponding row placement properties) to place them vertically, with align-self for alignment overrides.\"}]","CSS Grid Cheat Sheet - summary | PDF",1791940066]