[{"data":1,"prerenderedAt":800},["ShallowReactive",2],{"navigation":3,"/blog/css-grid":50},[4],{"title":5,"path":6,"stem":7,"children":8,"page":49},"Blog","/blog","blog",[9,13,17,21,25,29,33,37,41,45],{"title":10,"path":11,"stem":12},"Unlocking the Power of Django: A Developer-Friendly Architecture Guide","/blog/django-arhitecture","blog/01.django-arhitecture",{"title":14,"path":15,"stem":16},"Getting Started with Go: Why You Should Learn Golang","/blog/intro-go","blog/02.intro-go",{"title":18,"path":19,"stem":20},"Recursion in JavaScript: The Art of Functions Calling Themselves","/blog/recursion-js","blog/03.recursion-js",{"title":22,"path":23,"stem":24},"What Go Got Right and Wrong: A Thoughtful Look Back","/blog/golang-pro-and-cons","blog/04.golang-pro-and-cons",{"title":26,"path":27,"stem":28},"JavaScript Performance Optimization: A Practical Guide for Better Web Applications","/blog/js-perf","blog/05.js-perf",{"title":30,"path":31,"stem":32},"Understanding Go Slices: A Powerful Data Structure","/blog/go-slices-article","blog/06.go-slices-article",{"title":34,"path":35,"stem":36},"The Model Context Protocol (MCP): Giving AI \"Hands\"","/blog/mcp-article-complete","blog/07.mcp-article-complete",{"title":38,"path":39,"stem":40},"CSS Grid Mastery: Advanced Layout Techniques for Intermediate Developers","/blog/css-grid","blog/08.css-grid",{"title":42,"path":43,"stem":44},"Modern JavaScript: Mastering the Fetch API with Async/Await","/blog/fetch-api","blog/09.fetch-api",{"title":46,"path":47,"stem":48},"How to Use AWS for Cloud-Based Web Development","/blog/aws-webdev","blog/10.aws-webdev",false,[51,795],{"id":52,"title":38,"author":53,"badge":59,"body":61,"date":782,"description":783,"extension":784,"image":785,"meta":786,"navigation":398,"path":39,"readingTime":787,"seo":792,"stem":40,"tags":793,"__hash__":794},"blog/blog/08.css-grid.md",[54],{"name":55,"to":56,"avatar":57},"Norbert Br3tt","https://www.linkedin.com/in/norbert-brett/",{"src":58},"https://res.cloudinary.com/nbrett/image/upload/v1725625689/IMG_0698_d0nhun.jpg",{"label":60},"CSS",{"type":62,"value":63,"toc":771},"minimark",[64,69,78,81,89,94,105,108,111,115,118,122,125,256,478,485,489,492,550,556,567,571,582,630,637,648,724,734,737,741,744,748,761,764,767],[65,66,68],"h1",{"id":67},"css-grid-finally-clicked-for-me-heres-what-made-it-stick","CSS Grid Finally Clicked for Me — Here's What Made It Stick",[70,71,72,73,77],"p",{},"Storytime: I spent an embarrassing amount of time using CSS Grid like a slightly better Flexbox. Two-dimensional layout? Sure. But I was still writing ",[74,75,76],"code",{},"grid-template-columns: repeat(3, 1fr)"," and calling it a day, completely ignoring half the power sitting right there in the spec.",[70,79,80],{},"Then I had to build a magazine-style layout with overlapping elements, and everything changed.",[70,82,83,84,88],{},"Let me show you what I wish someone had explained to me earlier — not just the syntax, but the ",[85,86,87],"em",{},"mental model"," that makes it all make sense.",[90,91,93],"h2",{"id":92},"why-grid-is-different-and-why-that-matters","Why Grid Is Different (and Why That Matters)",[70,95,96,97,100,101,104],{},"Flexbox thinks in one dimension. You've got a row ",[85,98,99],{},"or"," a column, and items flow along it. Grid thinks in two dimensions simultaneously. Rows ",[85,102,103],{},"and"," columns, at the same time, with items placed explicitly on that canvas.",[70,106,107],{},"That distinction sounds small. It isn't.",[70,109,110],{},"Once you internalize it, you stop fighting the layout and start composing it — like a designer would.",[90,112,114],{"id":113},"before-you-do-anything","Before You Do Anything",[70,116,117],{},"Open your browser DevTools. Seriously. Chrome and Firefox both have a dedicated Grid inspector that shows you the grid lines, named areas, and track sizes as you work. It's one of the best DX improvements in browser tooling in recent years. You'll want it open the whole time.",[90,119,121],{"id":120},"setting-up-your-grid","Setting Up Your Grid",[70,123,124],{},"Let's start with a real example — a simple article layout with a header, sidebar, main content, and footer.",[126,127,132],"pre",{"className":128,"code":129,"language":130,"meta":131,"style":131},"language-html shiki shiki-themes vitesse-dark","\u003Cdiv class=\"layout\">\n  \u003Cheader>Header\u003C/header>\n  \u003Caside>Sidebar\u003C/aside>\n  \u003Cmain>Main Content\u003C/main>\n  \u003Cfooter>Footer\u003C/footer>\n\u003C/div>\n","html","",[74,133,134,167,190,209,228,247],{"__ignoreMap":131},[135,136,139,143,147,151,154,158,162,164],"span",{"class":137,"line":138},"line",1,[135,140,142],{"class":141},"s_pn2","\u003C",[135,144,146],{"class":145},"s3QIE","div",[135,148,150],{"class":149},"st-jp"," class",[135,152,153],{"class":141},"=",[135,155,157],{"class":156},"sNJcY","\"",[135,159,161],{"class":160},"s7rlk","layout",[135,163,157],{"class":156},[135,165,166],{"class":141},">\n",[135,168,170,173,176,179,183,186,188],{"class":137,"line":169},2,[135,171,172],{"class":141},"  \u003C",[135,174,175],{"class":145},"header",[135,177,178],{"class":141},">",[135,180,182],{"class":181},"sNpkn","Header",[135,184,185],{"class":141},"\u003C/",[135,187,175],{"class":145},[135,189,166],{"class":141},[135,191,193,195,198,200,203,205,207],{"class":137,"line":192},3,[135,194,172],{"class":141},[135,196,197],{"class":145},"aside",[135,199,178],{"class":141},[135,201,202],{"class":181},"Sidebar",[135,204,185],{"class":141},[135,206,197],{"class":145},[135,208,166],{"class":141},[135,210,212,214,217,219,222,224,226],{"class":137,"line":211},4,[135,213,172],{"class":141},[135,215,216],{"class":145},"main",[135,218,178],{"class":141},[135,220,221],{"class":181},"Main Content",[135,223,185],{"class":141},[135,225,216],{"class":145},[135,227,166],{"class":141},[135,229,231,233,236,238,241,243,245],{"class":137,"line":230},5,[135,232,172],{"class":141},[135,234,235],{"class":145},"footer",[135,237,178],{"class":141},[135,239,240],{"class":181},"Footer",[135,242,185],{"class":141},[135,244,235],{"class":145},[135,246,166],{"class":141},[135,248,250,252,254],{"class":137,"line":249},6,[135,251,185],{"class":141},[135,253,146],{"class":145},[135,255,166],{"class":141},[126,257,261],{"className":258,"code":259,"language":260,"meta":131,"style":131},"language-css shiki shiki-themes vitesse-dark",".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\nheader  { grid-area: header; }\naside   { grid-area: sidebar; }\nmain    { grid-area: main; }\nfooter  { grid-area: footer; }\n","css",[74,262,263,273,289,312,330,338,349,359,371,387,393,400,422,441,460],{"__ignoreMap":131},[135,264,265,268,270],{"class":137,"line":138},[135,266,267],{"class":141},".",[135,269,161],{"class":149},[135,271,272],{"class":141}," {\n",[135,274,275,279,282,286],{"class":137,"line":169},[135,276,278],{"class":277},"sm68I","  display",[135,280,281],{"class":141},":",[135,283,285],{"class":284},"sXjYR"," grid",[135,287,288],{"class":141},";\n",[135,290,291,294,296,300,304,307,310],{"class":137,"line":192},[135,292,293],{"class":277},"  grid-template-columns",[135,295,281],{"class":141},[135,297,299],{"class":298},"sxA9i"," 250",[135,301,303],{"class":302},"s_wWq","px",[135,305,306],{"class":298}," 1",[135,308,309],{"class":302},"fr",[135,311,288],{"class":141},[135,313,314,317,319,322,324,326,328],{"class":137,"line":211},[135,315,316],{"class":277},"  grid-template-rows",[135,318,281],{"class":141},[135,320,321],{"class":284}," auto",[135,323,306],{"class":298},[135,325,309],{"class":302},[135,327,321],{"class":284},[135,329,288],{"class":141},[135,331,332,335],{"class":137,"line":230},[135,333,334],{"class":277},"  grid-template-areas",[135,336,337],{"class":141},":\n",[135,339,340,343,346],{"class":137,"line":249},[135,341,342],{"class":156},"    \"",[135,344,345],{"class":160},"header  header",[135,347,348],{"class":156},"\"\n",[135,350,352,354,357],{"class":137,"line":351},7,[135,353,342],{"class":156},[135,355,356],{"class":160},"sidebar main",[135,358,348],{"class":156},[135,360,362,364,367,369],{"class":137,"line":361},8,[135,363,342],{"class":156},[135,365,366],{"class":160},"footer  footer",[135,368,157],{"class":156},[135,370,288],{"class":141},[135,372,374,377,379,382,385],{"class":137,"line":373},9,[135,375,376],{"class":277},"  min-height",[135,378,281],{"class":141},[135,380,381],{"class":298}," 100",[135,383,384],{"class":302},"vh",[135,386,288],{"class":141},[135,388,390],{"class":137,"line":389},10,[135,391,392],{"class":141},"}\n",[135,394,396],{"class":137,"line":395},11,[135,397,399],{"emptyLinePlaceholder":398},true,"\n",[135,401,403,405,408,411,413,416,419],{"class":137,"line":402},12,[135,404,175],{"class":145},[135,406,407],{"class":141},"  {",[135,409,410],{"class":277}," grid-area",[135,412,281],{"class":141},[135,414,415],{"class":181}," header",[135,417,418],{"class":141},";",[135,420,421],{"class":141}," }\n",[135,423,425,427,430,432,434,437,439],{"class":137,"line":424},13,[135,426,197],{"class":145},[135,428,429],{"class":141},"   {",[135,431,410],{"class":277},[135,433,281],{"class":141},[135,435,436],{"class":181}," sidebar",[135,438,418],{"class":141},[135,440,421],{"class":141},[135,442,444,446,449,451,453,456,458],{"class":137,"line":443},14,[135,445,216],{"class":145},[135,447,448],{"class":141},"    {",[135,450,410],{"class":277},[135,452,281],{"class":141},[135,454,455],{"class":181}," main",[135,457,418],{"class":141},[135,459,421],{"class":141},[135,461,463,465,467,469,471,474,476],{"class":137,"line":462},15,[135,464,235],{"class":145},[135,466,407],{"class":141},[135,468,410],{"class":277},[135,470,281],{"class":141},[135,472,473],{"class":181}," footer",[135,475,418],{"class":141},[135,477,421],{"class":141},[70,479,480,481,484],{},"Notice ",[74,482,483],{},"grid-template-areas"," — that's the part that made Grid click for me. You're literally drawing the layout in ASCII art. It's visual, readable, and when you come back to it three months later, you'll immediately know what's happening.",[90,486,488],{"id":487},"the-part-everyone-skips-placement","The Part Everyone Skips: Placement",[70,490,491],{},"Here's where Grid gets genuinely exciting. Items don't have to follow document order.",[126,493,495],{"className":258,"code":494,"language":260,"meta":131,"style":131},".hero-image {\n  grid-column: 1 / -1; /* span the full width */\n  grid-row: 1 / 3;     /* overlap into the second row */\n}\n",[74,496,497,506,527,546],{"__ignoreMap":131},[135,498,499,501,504],{"class":137,"line":138},[135,500,267],{"class":141},[135,502,503],{"class":149},"hero-image",[135,505,272],{"class":141},[135,507,508,511,513,515,518,521,523],{"class":137,"line":169},[135,509,510],{"class":277},"  grid-column",[135,512,281],{"class":141},[135,514,306],{"class":298},[135,516,517],{"class":181}," / ",[135,519,520],{"class":298},"-1",[135,522,418],{"class":141},[135,524,526],{"class":525},"sux-A"," /* span the full width */\n",[135,528,529,532,534,536,538,541,543],{"class":137,"line":192},[135,530,531],{"class":277},"  grid-row",[135,533,281],{"class":141},[135,535,306],{"class":298},[135,537,517],{"class":181},[135,539,540],{"class":298},"3",[135,542,418],{"class":141},[135,544,545],{"class":525},"     /* overlap into the second row */\n",[135,547,548],{"class":137,"line":211},[135,549,392],{"class":141},[70,551,552,553,555],{},"That ",[74,554,520],{}," is shorthand for \"the last grid line.\" I personally use it constantly — it means you don't have to know how many columns you have to span all of them.",[70,557,558,559,562,563,566],{},"This is how you get overlapping elements without ",[74,560,561],{},"position: absolute"," hacks. The image sits ",[85,564,565],{},"in the flow"," of the grid, but visually overlaps the content below it. Clean, intentional, and accessible.",[90,568,570],{"id":569},"common-pitfall-implicit-vs-explicit-grid","Common Pitfall: Implicit vs. Explicit Grid",[70,572,573,574,577,578,581],{},"One thing that tripped me up early: if you place an item outside your defined grid, the browser creates ",[85,575,576],{},"implicit"," tracks to hold it. By default, those tracks are ",[74,579,580],{},"auto"," sized — often collapsing to zero height.",[126,583,585],{"className":258,"code":584,"language":260,"meta":131,"style":131},"/* Fix implicit row sizing */\n.layout {\n  grid-auto-rows: minmax(100px, auto);\n}\n",[74,586,587,592,600,626],{"__ignoreMap":131},[135,588,589],{"class":137,"line":138},[135,590,591],{"class":525},"/* Fix implicit row sizing */\n",[135,593,594,596,598],{"class":137,"line":169},[135,595,267],{"class":141},[135,597,161],{"class":149},[135,599,272],{"class":141},[135,601,602,605,607,610,613,616,618,621,623],{"class":137,"line":192},[135,603,604],{"class":277},"  grid-auto-rows",[135,606,281],{"class":141},[135,608,609],{"class":277}," minmax",[135,611,612],{"class":141},"(",[135,614,615],{"class":298},"100",[135,617,303],{"class":302},[135,619,620],{"class":141},",",[135,622,321],{"class":284},[135,624,625],{"class":141},");\n",[135,627,628],{"class":137,"line":211},[135,629,392],{"class":141},[70,631,632,633,636],{},"Add ",[74,634,635],{},"grid-auto-rows"," to your container and you'll save yourself a debugging session.",[90,638,640,641,644,645],{"id":639},"level-up-minmax-and-auto-fill","Level Up: ",[74,642,643],{},"minmax()"," and ",[74,646,647],{},"auto-fill",[126,649,651],{"className":258,"code":650,"language":260,"meta":131,"style":131},".card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 1.5rem;\n}\n",[74,652,653,662,672,705,720],{"__ignoreMap":131},[135,654,655,657,660],{"class":137,"line":138},[135,656,267],{"class":141},[135,658,659],{"class":149},"card-grid",[135,661,272],{"class":141},[135,663,664,666,668,670],{"class":137,"line":169},[135,665,278],{"class":277},[135,667,281],{"class":141},[135,669,285],{"class":284},[135,671,288],{"class":141},[135,673,674,676,678,681,683,685,687,689,691,694,696,698,700,702],{"class":137,"line":192},[135,675,293],{"class":277},[135,677,281],{"class":141},[135,679,680],{"class":277}," repeat",[135,682,612],{"class":141},[135,684,647],{"class":284},[135,686,620],{"class":141},[135,688,609],{"class":277},[135,690,612],{"class":141},[135,692,693],{"class":298},"280",[135,695,303],{"class":302},[135,697,620],{"class":141},[135,699,306],{"class":298},[135,701,309],{"class":302},[135,703,704],{"class":141},"));\n",[135,706,707,710,712,715,718],{"class":137,"line":211},[135,708,709],{"class":277},"  gap",[135,711,281],{"class":141},[135,713,714],{"class":298}," 1.5",[135,716,717],{"class":302},"rem",[135,719,288],{"class":141},[135,721,722],{"class":137,"line":230},[135,723,392],{"class":141},[70,725,726,727,729,730,733],{},"This is one of my favorite CSS patterns, full stop. Cards that automatically reflow from 1 to 2 to 3 columns based on available space — no media queries required. The ",[74,728,647],{}," keyword creates as many tracks as will fit; ",[74,731,732],{},"minmax(280px, 1fr)"," says each track is at least 280px wide but can grow.",[70,735,736],{},"It's responsive design without the breakpoint math. Delightful.",[90,738,740],{"id":739},"accessibility-check","Accessibility Check",[70,742,743],{},"Grid doesn't reorder elements in the DOM — only visually. That means screen readers and keyboard navigation still follow document order. If your visual order differs significantly from your source order, double-check the experience with a screen reader. A layout that looks great but reads backwards is still a problem.",[90,745,747],{"id":746},"go-build-something","Go Build Something",[70,749,750,751,753,754,756,757,760],{},"CSS Grid rewards experimentation. The spec is large, but you don't need all of it on day one. Start with ",[74,752,483],{}," for named layouts, add ",[74,755,647],{}," + ",[74,758,759],{},"minmax"," for responsive card grids, and reach for explicit placement when you need overlap.",[70,762,763],{},"The browser DevTools inspector is your friend here. Draw a grid, inspect it, break it, fix it. That's how it sticks.",[70,765,766],{},"You've got this. Go make something that would've taken you three times as long in Flexbox. 🎉",[768,769,770],"style",{},"html pre.shiki code .s_pn2, html code.shiki .s_pn2{--shiki-default:#666666}html pre.shiki code .s3QIE, html code.shiki .s3QIE{--shiki-default:#4D9375}html pre.shiki code .st-jp, html code.shiki .st-jp{--shiki-default:#BD976A}html pre.shiki code .sNJcY, html code.shiki .sNJcY{--shiki-default:#C98A7D77}html pre.shiki code .s7rlk, html code.shiki .s7rlk{--shiki-default:#C98A7D}html pre.shiki code .sNpkn, html code.shiki .sNpkn{--shiki-default:#DBD7CAEE}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 pre.shiki code .sm68I, html code.shiki .sm68I{--shiki-default:#B8A965}html pre.shiki code .sXjYR, html code.shiki .sXjYR{--shiki-default:#C99076}html pre.shiki code .sxA9i, html code.shiki .sxA9i{--shiki-default:#4C9A91}html pre.shiki code .s_wWq, html code.shiki .s_wWq{--shiki-default:#CB7676}html pre.shiki code .sux-A, html code.shiki .sux-A{--shiki-default:#758575DD}",{"title":131,"searchDepth":169,"depth":169,"links":772},[773,774,775,776,777,778,780,781],{"id":92,"depth":169,"text":93},{"id":113,"depth":169,"text":114},{"id":120,"depth":169,"text":121},{"id":487,"depth":169,"text":488},{"id":569,"depth":169,"text":570},{"id":639,"depth":169,"text":779},"Level Up: minmax() and auto-fill",{"id":739,"depth":169,"text":740},{"id":746,"depth":169,"text":747},"2026-02-16T00:00:00.000Z","Take your CSS Grid skills to the next level. Learn advanced techniques like grid-template-areas, auto-fit, minmax, and responsive patterns that make complex layouts simple and maintainable.","md","https://res.cloudinary.com/nbrett/image/upload/v1772835045/portfolio/css_grid_hero_f2pc2h.svg",{},{"text":788,"minutes":789,"time":790,"words":791},"4 min read",3.31,198600,662,{"title":38,"description":783},null,"9ug92aHUvZ5OUuaDHd2OJdwsOZPt5J5f_UXy9UM8LuM",[796,798],{"title":34,"path":35,"stem":36,"description":797,"children":-1},"Discover how the Model Context Protocol lets AI interact with your databases, browsers, logs, and APIs directly. Learn what MCP is, explore production-ready servers, and build your own AI tools.",{"title":42,"path":43,"stem":44,"description":799,"children":-1},"Learn how to make clean, readable HTTP requests in JavaScript using the Fetch API and async/await. From basic GET requests to error handling, authentication, and real-world patterns.",1774167726533]