[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-1-en-105":3,"doc-seo-573455-105":53,"doc-detail-573455-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-layout-basic-concepts-of-grid-layout","CSS Grid Layout - Basic Concepts of Grid Layout","","CSS Grid Layout introduces a two-dimensional grid system for CSS, using intersecting horizontal and vertical grid lines to place elements across defined column and row tracks. After establishing a grid on a parent container (display: grid or inline-grid), all direct children become grid items that can be arranged as grid cells, spanning multiple cells to form rectangular grid areas. Key terminology covers tracks, numbered grid lines for positioning, gutters via grid-gap, and the fr unit for flexible, responsive track sizing.",{"@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-layout-basic-concepts-of-grid-layout/573455/",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-layout-basic-concepts-of-grid-layout/573455.png","ImageObject",442,249,{"name":88,"@type":89},"SundayMiles","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},"How do you create a CSS grid container?","Question",{"text":108,"@type":109},"Set an element to display: grid or display: inline-grid. All direct children of that element automatically become grid items.","Answer",{"name":111,"@type":106,"acceptedAnswer":112},"What are grid tracks and how are rows/columns defined?",{"text":113,"@type":109},"Use grid-template-columns and grid-template-rows to define rows and columns. These create grid tracks, which are the spaces between grid lines.",{"name":115,"@type":106,"acceptedAnswer":116},"What does the fr unit mean in CSS Grid?",{"text":117,"@type":109},"The fr unit represents a fraction of the available space in the grid container. It allows flexible track sizes that grow and shrink for responsive layouts and can be combined with fixed sizes.","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},573455,1792033660,{"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":135,"language":136,"language_code":57,"site_id":56,"html_lang":57,"table_of_contents":137,"faqs":138,"seo_title":139,"seo_description":61,"update_tm":140,"read_time":141},1099529839202,"https://ap-avatar.wpscdn.com/davatar_a8503ba1806abce46bf441b54a3ca4cd","CONTENT MANAGEMENT  \nCSS GRID LAYOUT  \nBASIC CONCEPTS OF GRID LAYOUT  \nMA Web Design and Content Planning Vanessa A Costa  \nFeb 2018  \nCSS GRID LAYOUT  \n􀂃 Introduces a two-dimensional grid system to CSS;  \n􀂃 The grid is the intersecting set of horizontal and vertical lines, where elements are placed respecting these column and row lines;  \n􀂃 It can be used to layout major page areas or smaller user interface elements;  \n􀂃 After defining a grid on the parent element, all direct children become grid items;  \n􀂃 Grid is a powerful specification and when combined with other parts of CSS such as flexbox, can help you to create layouts that were previously impossible to build in CSS.  \nIt all starts by creating a grid in your grid container.  \nTERMINOLOGY  \nThe Grid  \nGrid Container  \nTo create a grid container just declare  \ndisplay: grid or display: inline-grid on an element. All direct children of that element will become grid items.  \nGrid Cells  \nIs the smallest unit on a grid. Conceptually it is like a table cell. When the grid is defined as a parent the child items will lay themselves out in one cell each of the defined grid.  \nGrid Tracks  \nTo define rows and columns on the grid, it is used the grid-template-columns and the grid-template-rows properties. These define grid tracks. A grid track is the  \nspace between any two lines on the grid. There are column tracks and row tracks.  \nGrid Lines  \nWhen we define a grid we define the grid tracks.  \nGrid then gives us numbered lines to use when positioning items.  \nIn our five column, three row grid we have six column lines and 4 row lines (number of columns or rows +1) .  \nGrid Areas  \nItems can span one or more cells both by row or by column, and this creates a grid area.  \nGrid areas must be rectangular.  \nExample: grid area spans two row and two column tracks.  \nGutters (grid-gap)  \nGutters or alleys between grid cells can be created using the shorthand grid-gap, or grid-column-gap and grid-row-gap  \nproperties.  \ngrid-column-gap: 10px;  \ngrid-row-gap: 1em;  \ngrid-gap:10px (shortcut for both)  \nThe fr Unit  \nFixed and Flexible Track Sizes  \n▪ A grid can be created with fixed track sizes, using pixels for example. This sets the grid to the specified pixel which fits to the desired layout;  \n• But is also possible to create a grid using flexible sizes with percentages or with the new fr unit designed for this purpose, the creation of flexible grid tracks;  \n• The unit fr – fraction of the available space in the grid container;  \n• Using the fr unit allows to create flexible grids, which is great for a responsive web;  \n• The fr unit grows and shrinks in proportion of the available space;  \n• It can be combined with fixed sizes;","cbCaidc9uTvmSEns","https://ap.wps.com/l/cbCaidc9uTvmSEns","pdf",1843375,26,"English","# CSS Grid Layout\n## Basic Concepts of Grid Layout\n## Terminology\n### The Grid, Grid Container, Grid Cells\n### Grid Tracks and Grid Lines\n### Grid Areas and Gutters\n### The fr Unit\n## Fixed and Flexible Track Sizes","[{\"question\":\"How do you create a CSS grid container?\",\"answer\":\"Set an element to display: grid or display: inline-grid. All direct children of that element automatically become grid items.\"},{\"question\":\"What are grid tracks and how are rows/columns defined?\",\"answer\":\"Use grid-template-columns and grid-template-rows to define rows and columns. These create grid tracks, which are the spaces between grid lines.\"},{\"question\":\"What does the fr unit mean in CSS Grid?\",\"answer\":\"The fr unit represents a fraction of the available space in the grid container. It allows flexible track sizes that grow and shrink for responsive layouts and can be combined with fixed sizes.\"}]","CSS Grid Layout - Basic Concepts of Grid Layout | PDF",1791940070,9]