[{"data":1,"prerenderedAt":228},["ShallowReactive",2],{"term-c\u002Fcss-grid":3,"related-c\u002Fcss-grid":210},{"id":4,"title":5,"acronym":6,"body":7,"category":190,"description":191,"difficulty":192,"extension":193,"letter":194,"meta":195,"navigation":196,"path":197,"related":198,"seo":204,"sitemap":205,"stem":208,"subcategory":6,"__hash__":209},"terms\u002Fterms\u002Fc\u002Fcss-grid.md","CSS Grid",null,{"type":8,"value":9,"toc":184},"minimark",[10,15,19,23,26,30,173,177,180],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"CSS Grid is the two-dimensional layout system — rows AND columns at the same time. Think of it like a spreadsheet you can put your whole website into. It lets you build complex page layouts with way less HTML and CSS than the old float hacks.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"CSS Grid Layout is a two-dimensional layout system that defines rows and columns simultaneously. It supports named areas, fractional units (fr), automatic track sizing, and precise placement of items anywhere in the grid. Ideal for complex page-level layouts and card grids.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".layout {\n  display: grid;\n  grid-template-columns: 250px 1fr;\n  grid-template-rows: auto 1fr auto;\n  grid-template-areas:\n    \"header  header\"\n    \"sidebar main\"\n    \"footer  footer\";\n  min-height: 100vh;\n}\n","css","",[38,39,40,56,73,90,109,118,131,141,154,167],"code",{"__ignoreMap":36},[41,42,45,49,53],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sMK4o",".",[41,50,52],{"class":51},"sBMFI","layout",[41,54,55],{"class":47}," {\n",[41,57,59,63,66,70],{"class":43,"line":58},2,[41,60,62],{"class":61},"sqsOY","  display",[41,64,65],{"class":47},":",[41,67,69],{"class":68},"sTEyZ"," grid",[41,71,72],{"class":47},";\n",[41,74,76,79,81,85,88],{"class":43,"line":75},3,[41,77,78],{"class":61},"  grid-template-columns",[41,80,65],{"class":47},[41,82,84],{"class":83},"sbssI"," 250px",[41,86,87],{"class":83}," 1fr",[41,89,72],{"class":47},[41,91,93,96,98,101,104,107],{"class":43,"line":92},4,[41,94,95],{"class":61},"  grid-template-rows",[41,97,65],{"class":47},[41,99,100],{"class":68}," auto ",[41,102,103],{"class":83},"1fr",[41,105,106],{"class":68}," auto",[41,108,72],{"class":47},[41,110,112,115],{"class":43,"line":111},5,[41,113,114],{"class":61},"  grid-template-areas",[41,116,117],{"class":47},":\n",[41,119,121,124,128],{"class":43,"line":120},6,[41,122,123],{"class":47},"    \"",[41,125,127],{"class":126},"sfazB","header  header",[41,129,130],{"class":47},"\"\n",[41,132,134,136,139],{"class":43,"line":133},7,[41,135,123],{"class":47},[41,137,138],{"class":126},"sidebar main",[41,140,130],{"class":47},[41,142,144,146,149,152],{"class":43,"line":143},8,[41,145,123],{"class":47},[41,147,148],{"class":126},"footer  footer",[41,150,151],{"class":47},"\"",[41,153,72],{"class":47},[41,155,157,160,162,165],{"class":43,"line":156},9,[41,158,159],{"class":61},"  min-height",[41,161,65],{"class":47},[41,163,164],{"class":83}," 100vh",[41,166,72],{"class":47},[41,168,170],{"class":43,"line":169},10,[41,171,172],{"class":47},"}\n",[11,174,176],{"id":175},"when-youll-hear-this","When You'll Hear This",[16,178,179],{},"\"Build the page structure with CSS Grid and use Flexbox inside each section.\" \u002F \"Grid is overkill for a simple row — use flex.\"",[181,182,183],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":58,"depth":58,"links":185},[186,187,188,189],{"id":13,"depth":58,"text":14},{"id":21,"depth":58,"text":22},{"id":28,"depth":58,"text":29},{"id":175,"depth":58,"text":176},"frontend","CSS Grid is the two-dimensional layout system — rows AND columns at the same time. Think of it like a spreadsheet you can put your whole website into.","intermediate","md","c",{},true,"\u002Fterms\u002Fc\u002Fcss-grid",[199,200,201,202,203],"Flexbox","CSS","Responsive Design","Tailwind","Bootstrap",{"title":5,"description":191},{"changefreq":206,"priority":207},"weekly",0.7,"terms\u002Fc\u002Fcss-grid","sni7mnK00jO0MX5zPqsB9KJeSFr-6Pi3lHl0PfxBjg8",[211,215,219,222,225],{"title":203,"path":212,"acronym":6,"category":190,"difficulty":213,"description":214},"\u002Fterms\u002Fb\u002Fbootstrap","beginner","Bootstrap is the OG CSS framework — add a class and get a pre-styled button, grid, modal, or navbar.",{"title":200,"path":216,"acronym":217,"category":190,"difficulty":213,"description":218},"\u002Fterms\u002Fc\u002Fcss","Cascading Style Sheets","CSS is the makeup and wardrobe for your HTML skeleton. It decides what color everything is, how big things are, and where stuff goes on the page.",{"title":199,"path":220,"acronym":6,"category":190,"difficulty":213,"description":221},"\u002Fterms\u002Ff\u002Fflexbox","Flexbox is a CSS layout system that makes positioning elements in a row or column stupidly easy.",{"title":201,"path":223,"acronym":6,"category":190,"difficulty":213,"description":224},"\u002Fterms\u002Fr\u002Fresponsive-design","Responsive design means your website looks good on EVERY screen size — from a tiny phone to a giant 4K monitor.",{"title":202,"path":226,"acronym":6,"category":190,"difficulty":213,"description":227},"\u002Fterms\u002Ft\u002Ftailwind","Tailwind is a CSS framework where instead of writing CSS files you add utility classes directly to your HTML.",1776518263130]