[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fbuilding-a-layout-with-css-grid-using-grid-areas-and-grid-templates-properties":671,"blog-author-\u002Fblog\u002Fbuilding-a-layout-with-css-grid-using-grid-areas-and-grid-templates-properties":1117,"i-material-symbols:arrow-back-rounded":1129},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":676,"buttonUrl":676,"category":1105,"date":1106,"description":1107,"draft":1108,"editorsPick":1108,"extension":1109,"featured":1108,"image":1110,"imageAlt":1111,"meta":1112,"navigation":32,"ogImage":676,"ogImageAlt":676,"path":1113,"seo":1114,"stem":1115,"tags":676,"__hash__":1116},"blog\u002Fblog\u002Fbuilding-a-layout-with-css-grid-using-grid-areas-and-grid-templates-properties.md","Building a Layout with CSS Grid Using Grid Areas and Grid Templates Properties","Eze Thankgod","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fisaac-junior.svg",null,"eze-thankgod",{"type":679,"value":680,"toc":1084},"minimark",[681,693,698,706,712,723,728,735,740,743,768,772,795,800,806,811,817,821,839,844,850,854,860,864,867,885,887,894,899,903,909,911,918,923,927,933,935,942,947,951,956,958,965,970,974,980,983,987,990,1004,1006,1013,1018,1023,1029,1031,1038,1043,1047,1053,1055,1062,1067,1071,1077,1081],[682,683,684,685,692],"p",{},"The ",[686,687,691],"a",{"href":688,"rel":689},"https:\u002F\u002Fwww.w3schools.com\u002Fcss\u002Fcss_grid.asp",[690],"nofollow","Grid layout"," introduces a two-dimensional grid system to CSS; it simplifies designing a web page and enables you to move items from one grid line to another. Thus, the grid areas and grid template are vital CSS properties that help to define and assign a name to the grid item. In addition, these properties specify the grid item's size and location within a grid. Therefore, before jumping into this subject, it’s important that you understand the grid and how you can apply it to a web page effortlessly.",[694,695,697],"h2",{"id":696},"what-is-css-grid-layout","What is CSS Grid Layout?",[682,699,684,700,705],{},[686,701,704],{"href":702,"rel":703},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_Grid_Layout",[690],"CSS Grid"," is a two-dimensional layout that you can use to create responsive web items. It presents a grid-based layout system with rows and columns. Also, it makes it easier to design web pages without using floats and positioning. The grid system is the foundation of a solid design, and its element consists of a parent part and one or more child parts. You can also place a component into the grid within the column and row lines.",[682,707,708],{},[709,710,711],"strong",{},"Let's look at the example below for a better understanding:",[713,714,719],"pre",{"className":715,"code":717,"language":718},[716],"language-text","\u003C!DOCTYPE html>\n  \u003Chtml>\n  \u003Chead>\n  \u003Cstyle>\n .one {\n   grid-area: headline;\n   background-color: grey;\n   text-align: center;\n   padding: 50px 0;\n   font-size: 30px;}\n .two {\n   grid-area: menu;\n   background-color: purple;\n   text-align: center;\n   padding: 50px 0;\n   font-size: 30px; }\n .three {\n   grid-area: news;\n   background-color: white;\n   text-align: center;\n   padding: 50px 0;\n   font-size: 30px; }\n .four {\n   grid-area: attention;\n   background-color: yellow;\n   text-align: center;\n   padding: 50px 0;\n   font-size: 30px; }\n .five {\n   grid-area: click ;\n   background-color: pink;\n   text-align: center;\n   padding: 50px 0;\n   font-size: 30px;}\n .grid-container {\n   display: Grid;\n   grid-template-areas:\n   'headline headline headline headline headline headline'\n   'menu news news news attention attention'\n   'menu click click click click click';\n gap: 10px;\n background-color:blue;\n padding: 10px;\n}\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\u003Ch1>Grid Layout\u003C\u002Fh1>\n\u003Cdiv class=\"grid-container\">\n    \u003Cdiv class=\"one\">Headline\u003C\u002Fdiv>\n    \u003Cdiv class=\"two\">Menu\u003C\u002Fdiv>\n    \u003Cdiv class=\"three\">News\u003C\u002Fdiv>\n    \u003Cdiv class=\"four\">Attention\u003C\u002Fdiv>\n    \u003Cdiv class=\"five\">Click\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fbody>\n \u003C\u002Fhtml>\n","text",[720,721,717],"code",{"__ignoreMap":722},"",[682,724,725],{},[709,726,727],{},"Here is the outcome:",[682,729,730],{},[731,732],"img",{"alt":733,"src":734},"A webpage subdivided into a grid.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-a-layout-with-css-grid-using-grid-areas-and-grid-templates-properties\u002Fimg-001.png",[736,737,739],"h3",{"id":738},"the-importance-of-css-grid","The Importance of CSS Grid",[682,741,742],{},"There are several reasons why a developer should use CSS Grid:",[744,745,746,750,753,756,759,762,765],"ul",{},[747,748,749],"li",{},"It enables a developer to optimize the markup to allow accessibility without compromising the manipulative capacity of the visual result.",[747,751,752],{},"It makes the markup on the web page easy to understand.",[747,754,755],{},"It improves the web design user interface and enhances the user experience.",[747,757,758],{},"It allows various UIs to be implemented quickly and houses them across multiple contexts.",[747,760,761],{},"It enhances the visual impression of the web page.",[747,763,764],{},"It helps create a user-friendly web page.",[747,766,767],{},"It helps to build more complex layouts using columns and rows.",[694,769,771],{"id":770},"what-is-a-grid-area-property","What is a Grid Area Property?",[682,773,684,774,779,780,783,784,783,787,790,791,794],{},[686,775,778],{"href":776,"rel":777},"https:\u002F\u002Fwww.w3schools.com\u002Fcssref\u002Fpr_grid-area.asp",[690],"grid-area property"," specifies a grid item's size and location within a grid. It is a shorthand property, contributing a line or a span to its grid placement. Thus, it specifies the edges of its grid area. A grid area is a shorthand property that includes the following: ",[720,781,782],{},"grid-row-start",", ",[720,785,786],{},"grid-column-start",[720,788,789],{},"grid-row-end",", and ",[720,792,793],{},"grid-column-end",".",[682,796,797],{},[709,798,799],{},"Let's look at the example of the grid area:",[713,801,804],{"className":802,"code":803,"language":718},[716],"\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n\u003Cstyle>\n.grid-container {\n display: Grid;\n grid-template-columns: auto auto auto auto;\n grid-gap: 20px;\n background-color: blue;\n padding: 20px;\n}\n.grid-container div {\n background-color: grey;\n text-align: center;\n padding: 20px 0;\n font-size: 30px;\n}\n.item7 {\n grid-area: 1 \u002F 1 \u002F span 2 \u002F span 3;\n}\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\u003Ch1>The grid-area Property\u003C\u002Fh1>\n\u003Cdiv class=\"grid-container\">\n \u003Cdiv class=\"item1\">One\u003C\u002Fdiv>\n \u003Cdiv class=\"item2\">Two\u003C\u002Fdiv>\n \u003Cdiv class=\"item3\">Three\u003C\u002Fdiv>\n \u003Cdiv class=\"item4\">Four\u003C\u002Fdiv>\n \u003Cdiv class=\"item5\">Five\u003C\u002Fdiv>\n \u003Cdiv class=\"item6\">Six\u003C\u002Fdiv>\n \u003Cdiv class=\"item7\">Seven\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[720,805,803],{"__ignoreMap":722},[682,807,808],{},[709,809,810],{},"Here is the result:",[682,812,813],{},[731,814],{"alt":815,"src":816},"Seven numbered areas in the grid.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-a-layout-with-css-grid-using-grid-areas-and-grid-templates-properties\u002Fimg-002.png",[694,818,820],{"id":819},"what-is-a-grid-template-property","What Is a Grid Template Property?",[682,822,684,823,828,829,783,832,835,836,794],{},[686,824,827],{"href":825,"rel":826},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fgrid-template",[690],"grid template"," is a shorthand property that allows you to define the columns, rows and areas in the CSS grid in the container with one declaration. Note that a grid template has these properties: ",[720,830,831],{},"grid-template-rows",[720,833,834],{},"grid-template-columns"," and ",[720,837,838],{},"grid-template-areas",[682,840,841],{},[709,842,843],{},"Let's look at the example of how a CSS grid template works:",[713,845,848],{"className":846,"code":847,"language":718},[716],"\u003C!DOCTYPE html>\n  \u003Chtml>\n  \u003Chead>\n  \u003Cstyle>\n .grid-container {\n display: grid;\n grid-template: 150px \u002F auto auto auto auto;\n grid-gap: 20px;\n background-color: blue;\n padding: 20px;\n  }\n .grid-container div {\n background-color: grey;\n text-align: center;\n padding: 20px 0;\n font-size: 30px;\n  }\n  \u003C\u002Fstyle>\n  \u003C\u002Fhead>\n  \u003Cbody>\n  \u003Ch1>The grid-template Property\u003C\u002Fh1>\n  \u003Cdiv class=\"grid-container\">\n    \u003Cdiv class=\"item1\">One\u003C\u002Fdiv>\n    \u003Cdiv class=\"item2\">Two\u003C\u002Fdiv>\n    \u003Cdiv class=\"item3\">Three\u003C\u002Fdiv>\n    \u003Cdiv class=\"item4\">Four\u003C\u002Fdiv>\n    \u003Cdiv class=\"item5\">Five\u003C\u002Fdiv>\n    \u003Cdiv class=\"item6\">Six\u003C\u002Fdiv>\n    \u003Cdiv class=\"item7\">Seven\u003C\u002Fdiv>\n    \u003Cdiv class=\"item8\">Eight\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003C\u002Fbody>\n  \u003C\u002Fhtml>\n",[720,849,847],{"__ignoreMap":722},[682,851,852],{},[709,853,727],{},[682,855,856],{},[731,857],{"alt":858,"src":859},"Eight gridded cells of nearly equal size.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-a-layout-with-css-grid-using-grid-areas-and-grid-templates-properties\u002Fimg-003.png",[694,861,863],{"id":862},"types-of-grid-area-properties","Types of Grid Area Properties",[682,865,866],{},"There are different types of grid area properties, which we’ll discuss in detail below. They are as follows:",[744,868,869,873,877,881],{},[747,870,871],{},[720,872,782],{},[747,874,875],{},[720,876,786],{},[747,878,879],{},[720,880,789],{},[747,882,883],{},[720,884,793],{},[736,886,782],{"id":782},[682,888,684,889,893],{},[686,890,782],{"href":891,"rel":892},"https:\u002F\u002Fwww.w3schools.com\u002Fcssref\u002Fpr_grid-row-start.asp",[690]," property defines the grid item's start position within the grid row by specifying the inline start edge of its grid area.",[682,895,896],{},[709,897,898],{},"Here is an example of grid-row-start:",[682,900,901],{},[709,902,810],{},[682,904,905],{},[731,906],{"alt":907,"src":908},"Eight evenly sized grid cells.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-a-layout-with-css-grid-using-grid-areas-and-grid-templates-properties\u002Fimg-004.png",[736,910,786],{"id":786},[682,912,684,913,917],{},[686,914,786],{"href":915,"rel":916},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fgrid-column-start",[690]," property defines on which particular column line an item should start. Also, there are other values for the grid-column-start property, and the user can start from anywhere with the different values. There is a specific value that is affected on the same naming block as well.",[682,919,920],{},[709,921,922],{},"Now, let's look at the example below:",[682,924,925],{},[709,926,727],{},[682,928,929],{},[731,930],{"alt":931,"src":932},"Eight cells unevenly distributed over four columns.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-a-layout-with-css-grid-using-grid-areas-and-grid-templates-properties\u002Fimg-005.png",[736,934,789],{"id":789},[682,936,684,937,941],{},[686,938,789],{"href":939,"rel":940},"https:\u002F\u002Fwww.w3schools.com\u002Fcssref\u002Fpr_grid-row-end.asp",[690]," property specifies how many rows an item will span and on which row line the item will end. It indicates the row grid line where a grid item ends in a grid layout. In addition, this property, among other line-based placement grid properties, controls a grid item's size and where it sits on the grid.",[682,943,944],{},[709,945,946],{},"Let's look at the example below for clarity:",[682,948,949],{},[709,950,810],{},[682,952,953],{},[731,954],{"alt":722,"src":955},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-a-layout-with-css-grid-using-grid-areas-and-grid-templates-properties\u002Fimg-006.png",[736,957,793],{"id":793},[682,959,684,960,964],{},[686,961,793],{"href":962,"rel":963},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fgrid-column-end",[690]," property defines the columns and the items that span it, and on which column-line the item will end within the grid.",[682,966,967],{},[709,968,969],{},"Here is an example of grid-column-end:",[682,971,972],{},[709,973,727],{},[682,975,976],{},[731,977],{"alt":978,"src":979},"A grid with two rows of four columns and one merged cell across the bottom row.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-a-layout-with-css-grid-using-grid-areas-and-grid-templates-properties\u002Fimg-007.png",[682,981,982],{},"Next, let's look at the types of grid templates in this study.",[694,984,986],{"id":985},"types-of-grid-template-properties","Types of Grid Template Properties",[682,988,989],{},"Grid templates have different property types and states:",[744,991,992,996,1000],{},[747,993,994],{},[720,995,831],{},[747,997,998],{},[720,999,834],{},[747,1001,1002],{},[720,1003,838],{},[736,1005,831],{"id":831},[682,1007,684,1008,1012],{},[686,1009,831],{"href":1010,"rel":1011},"https:\u002F\u002Fwww.w3schools.com\u002Fcssref\u002Fpr_grid-template-rows.asp",[690]," property defines the number of rows and the heights of the rows in a grid. The values of the grid-template rows are space-separated lists, where each height of the row is a defined value.",[682,1014,1015],{},[709,1016,1017],{},"Let's look at an example of grid-template-rows:",[682,1019,1020],{},[709,1021,1022],{},"Now, let's look at the result:",[682,1024,1025],{},[731,1026],{"alt":1027,"src":1028},"Eight cells with the bottom four much larger than the top four.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-a-layout-with-css-grid-using-grid-areas-and-grid-templates-properties\u002Fimg-008.png",[736,1030,834],{"id":834},[682,1032,684,1033,1037],{},[686,1034,834],{"href":1035,"rel":1036},"https:\u002F\u002Fwww.w3schools.com\u002Fcssref\u002Fpr_grid-template-columns.asp",[690]," property defines the number and the widths of columns in a grid. In addition, the values are a space-separated list, where each value defines the size of the column. The number of columns in the grid is set by the numerical values defined in the list.",[682,1039,1040],{},[709,1041,1042],{},"Let's look at an example of grid-template-columns:",[682,1044,1045],{},[709,1046,727],{},[682,1048,1049],{},[731,1050],{"alt":1051,"src":1052},"Eight evenly sized cells in two columns.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-a-layout-with-css-grid-using-grid-areas-and-grid-templates-properties\u002Fimg-009.png",[736,1054,838],{"id":838},[682,1056,684,1057,1061],{},[686,1058,838],{"href":1059,"rel":1060},"https:\u002F\u002Fwww.w3schools.com\u002Fcssref\u002Fpr_grid-template-areas.asp",[690]," property defines areas within the grid. Also, it helps to name the grid items using the grid-area properties, and then reference the name in the grid-template-area property. Apostrophes also define each area. It helps to use a period to refer to a grid item with no name.",[682,1063,1064],{},[709,1065,1066],{},"Let's look at an example of the grid-template-areas property:",[682,1068,1069],{},[709,1070,810],{},[682,1072,1073],{},[731,1074],{"alt":1075,"src":1076},"Eight cells split over three columns.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-a-layout-with-css-grid-using-grid-areas-and-grid-templates-properties\u002Fimg-010.png",[694,1078,1080],{"id":1079},"conclusion","Conclusion",[682,1082,1083],{},"A grid is a collection of intersecting horizontal and vertical lines that defines columns and rows. It eases a web page's design and allows you to place items from one grid line to another. CSS Grid is a two-dimensional layout that you can use to create responsive web items. Now, you can enjoy working with grids!",{"title":722,"searchDepth":1085,"depth":1085,"links":1086},2,[1087,1091,1092,1093,1099,1104],{"id":696,"depth":1085,"text":697,"children":1088},[1089],{"id":738,"depth":1090,"text":739},3,{"id":770,"depth":1085,"text":771},{"id":819,"depth":1085,"text":820},{"id":862,"depth":1085,"text":863,"children":1094},[1095,1096,1097,1098],{"id":782,"depth":1090,"text":782},{"id":786,"depth":1090,"text":786},{"id":789,"depth":1090,"text":789},{"id":793,"depth":1090,"text":793},{"id":985,"depth":1085,"text":986,"children":1100},[1101,1102,1103],{"id":831,"depth":1090,"text":831},{"id":834,"depth":1090,"text":834},{"id":838,"depth":1090,"text":838},{"id":1079,"depth":1085,"text":1080},"Software Development","2022-11-07T00:00:00.000Z","The Grid layout introduces a two-dimensional grid system to CSS, simplifies designing a web page, and lets you move items from one grid line to another.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuilding-a-layout-with-css-grid-using-grid-areas-and-grid-templates-properties\u002Fhero.jpeg","An open IDE on a computer monitor.",{},"\u002Fblog\u002Fbuilding-a-layout-with-css-grid-using-grid-areas-and-grid-templates-properties",{"title":673,"description":1107},"blog\u002Fbuilding-a-layout-with-css-grid-using-grid-areas-and-grid-templates-properties","5x7OzSAdyRiJ-FaFA3gUcKUoUIP4-frWYJvmbLzPbHY",{"id":1118,"title":674,"body":1119,"description":722,"draft":1108,"extension":1109,"meta":1123,"navigation":32,"path":1124,"photo":1125,"photoAlt":676,"seo":1126,"stem":1127,"__hash__":1128},"authors\u002Fauthors\u002Feze-thankgod.md",{"type":679,"value":1120,"toc":1121},[],{"title":722,"searchDepth":1085,"depth":1085,"links":1122},[],{},"\u002Fauthors\u002Feze-thankgod","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Feze-thankgod.png",{"title":674,"description":722},"authors\u002Feze-thankgod","o14STAeaSHqhhO-_UWTdLv092reFi3aji2mT8I6tJjw",{"left":1130,"top":1130,"width":1131,"height":1131,"rotate":1130,"vFlip":1108,"hFlip":1108,"body":1132},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]