[{"data":1,"prerenderedAt":1451},["ShallowReactive",2],{"guide-css-layout-systems":3},{"id":4,"title":5,"body":6,"date":1443,"description":1444,"extension":1445,"meta":1446,"navigation":345,"path":1447,"readingTime":219,"seo":1448,"stem":1449,"__hash__":1450},"guides\u002Fguides\u002Fcss-layout-systems.md","CSS Layout Systems Compared",{"type":7,"value":8,"toc":1421},"minimark",[9,14,18,85,88,92,95,100,108,132,253,260,264,271,288,375,382,386,481,485,488,492,496,499,555,558,562,572,729,732,736,746,750,753,790,793,797,804,808,811,1071,1075,1078,1228,1235,1239,1246,1360,1363,1367,1370,1390,1394,1417],[10,11,13],"h2",{"id":12},"css-layout-systems-at-a-glance","CSS Layout Systems at a Glance",[15,16,17],"p",{},"CSS gives you multiple layout systems, each built to solve a different problem. Picking the right one keeps your code clean and prevents fights with the browser.",[19,20,21,37],"table",{},[22,23,24],"thead",{},[25,26,27,31,34],"tr",{},[28,29,30],"th",{},"System",[28,32,33],{},"Dimension",[28,35,36],{},"Best For",[38,39,40,52,63,74],"tbody",{},[25,41,42,46,49],{},[43,44,45],"td",{},"CSS Grid",[43,47,48],{},"2D (rows + columns)",[43,50,51],{},"Page structure, dashboards, galleries",[25,53,54,57,60],{},[43,55,56],{},"Flexbox",[43,58,59],{},"1D (row OR column)",[43,61,62],{},"Navigation, toolbars, card rows",[25,64,65,68,71],{},[43,66,67],{},"Float",[43,69,70],{},"N\u002FA",[43,72,73],{},"Wrapping text around images",[25,75,76,79,82],{},[43,77,78],{},"Position",[43,80,81],{},"Explicit placement",[43,83,84],{},"Overlays, tooltips, sticky headers",[15,86,87],{},"Most modern layouts use Grid and Flexbox together. Float and Position serve specific niches — not general-purpose layout.",[10,89,91],{"id":90},"grid-vs-flexbox","Grid vs Flexbox",[15,93,94],{},"Grid and Flexbox are the two modern layout engines. Understanding when each wins saves hours of debugging.",[96,97,99],"h3",{"id":98},"when-grid-wins","When Grid Wins",[15,101,102,103,107],{},"Use Grid when you need to control the ",[104,105,106],"strong",{},"overall structure"," — where things sit in both dimensions at once.",[109,110,111,115,118,121,129],"ul",{},[112,113,114],"li",{},"You define both columns and rows simultaneously",[112,116,117],{},"Items need to span multiple cells or align in a matrix",[112,119,120],{},"The layout has named regions (sidebar, main, footer)",[112,122,123,124,128],{},"You want ",[125,126,127],"code",{},"auto-fill"," responsive behavior without media queries",[112,130,131],{},"Content must align across rows and columns",[133,134,139],"pre",{"className":135,"code":136,"language":137,"meta":138,"style":138},"language-css shiki shiki-themes github-light github-dark",".page-layout {\n  display: grid;\n  grid-template-columns: 260px 1fr;\n  grid-template-rows: 64px 1fr 48px;\n  grid-template-areas:\n    \"header  header\"\n    \"sidebar content\"\n    \"footer  footer\";\n}\n","css","",[125,140,141,154,170,193,217,226,233,239,247],{"__ignoreMap":138},[142,143,146,150],"span",{"class":144,"line":145},"line",1,[142,147,149],{"class":148},"sScJk",".page-layout",[142,151,153],{"class":152},"sVt8B"," {\n",[142,155,157,161,164,167],{"class":144,"line":156},2,[142,158,160],{"class":159},"sj4cs","  display",[142,162,163],{"class":152},": ",[142,165,166],{"class":159},"grid",[142,168,169],{"class":152},";\n",[142,171,173,176,178,181,185,188,191],{"class":144,"line":172},3,[142,174,175],{"class":159},"  grid-template-columns",[142,177,163],{"class":152},[142,179,180],{"class":159},"260",[142,182,184],{"class":183},"szBVR","px",[142,186,187],{"class":159}," 1",[142,189,190],{"class":183},"fr",[142,192,169],{"class":152},[142,194,196,199,201,204,206,208,210,213,215],{"class":144,"line":195},4,[142,197,198],{"class":159},"  grid-template-rows",[142,200,163],{"class":152},[142,202,203],{"class":159},"64",[142,205,184],{"class":183},[142,207,187],{"class":159},[142,209,190],{"class":183},[142,211,212],{"class":159}," 48",[142,214,184],{"class":183},[142,216,169],{"class":152},[142,218,220,223],{"class":144,"line":219},5,[142,221,222],{"class":159},"  grid-template-areas",[142,224,225],{"class":152},":\n",[142,227,229],{"class":144,"line":228},6,[142,230,232],{"class":231},"sZZnC","    \"header  header\"\n",[142,234,236],{"class":144,"line":235},7,[142,237,238],{"class":231},"    \"sidebar content\"\n",[142,240,242,245],{"class":144,"line":241},8,[142,243,244],{"class":231},"    \"footer  footer\"",[142,246,169],{"class":152},[142,248,250],{"class":144,"line":249},9,[142,251,252],{"class":152},"}\n",[15,254,255,256,259],{},"Grid controls the ",[104,257,258],{},"frame",". Think of it as the architecture of the page.",[96,261,263],{"id":262},"when-flexbox-wins","When Flexbox Wins",[15,265,266,267,270],{},"Use Flexbox when you distribute space along a ",[104,268,269],{},"single axis"," — aligning items in a row or column.",[109,272,273,276,279,282,285],{},[112,274,275],{},"Items flow in one direction (horizontal nav, vertical sidebar menu)",[112,277,278],{},"You need to distribute remaining space proportionally",[112,280,281],{},"Content size determines layout, not the reverse",[112,283,284],{},"You want easy centering of a single item",[112,286,287],{},"Items should wrap based on their content width",[133,289,291],{"className":135,"code":290,"language":137,"meta":138,"style":138},".toolbar {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.toolbar-spacer {\n  flex: 1; \u002F* pushes items after it to the right *\u002F\n}\n",[125,292,293,300,311,323,337,341,347,354,371],{"__ignoreMap":138},[142,294,295,298],{"class":144,"line":145},[142,296,297],{"class":148},".toolbar",[142,299,153],{"class":152},[142,301,302,304,306,309],{"class":144,"line":156},[142,303,160],{"class":159},[142,305,163],{"class":152},[142,307,308],{"class":159},"flex",[142,310,169],{"class":152},[142,312,313,316,318,321],{"class":144,"line":172},[142,314,315],{"class":159},"  align-items",[142,317,163],{"class":152},[142,319,320],{"class":159},"center",[142,322,169],{"class":152},[142,324,325,328,330,333,335],{"class":144,"line":195},[142,326,327],{"class":159},"  gap",[142,329,163],{"class":152},[142,331,332],{"class":159},"12",[142,334,184],{"class":183},[142,336,169],{"class":152},[142,338,339],{"class":144,"line":219},[142,340,252],{"class":152},[142,342,343],{"class":144,"line":228},[142,344,346],{"emptyLinePlaceholder":345},true,"\n",[142,348,349,352],{"class":144,"line":235},[142,350,351],{"class":148},".toolbar-spacer",[142,353,153],{"class":152},[142,355,356,359,361,364,367],{"class":144,"line":241},[142,357,358],{"class":159},"  flex",[142,360,163],{"class":152},[142,362,363],{"class":159},"1",[142,365,366],{"class":152},"; ",[142,368,370],{"class":369},"sJ8bj","\u002F* pushes items after it to the right *\u002F\n",[142,372,373],{"class":144,"line":249},[142,374,252],{"class":152},[15,376,377,378,381],{},"Flexbox controls the ",[104,379,380],{},"components",". Think of it as the furniture inside the rooms Grid built.",[96,383,385],{"id":384},"direct-comparison","Direct Comparison",[19,387,388,400],{},[22,389,390],{},[25,391,392,395,398],{},[28,393,394],{},"Feature",[28,396,397],{},"Grid",[28,399,56],{},[38,401,402,413,424,438,454,470],{},[25,403,404,407,410],{},[43,405,406],{},"Primary axis",[43,408,409],{},"Both simultaneously",[43,411,412],{},"One at a time",[25,414,415,418,421],{},[43,416,417],{},"Track sizing",[43,419,420],{},"Explicit columns + rows",[43,422,423],{},"Content-based or flex-grow\u002Fshrink",[25,425,426,429,432],{},[43,427,428],{},"Wrapping",[43,430,431],{},"Via auto-fill\u002Fauto-fit",[43,433,434,435],{},"Via ",[125,436,437],{},"flex-wrap",[25,439,440,443,450],{},[43,441,442],{},"Gap support",[43,444,445,446,449],{},"Full ",[125,447,448],{},"gap"," property",[43,451,445,452,449],{},[125,453,448],{},[25,455,456,459,465],{},[43,457,458],{},"Reordering",[43,460,461,464],{},[125,462,463],{},"order"," + grid placement",[43,466,467,469],{},[125,468,463],{}," only",[25,471,472,475,478],{},[43,473,474],{},"Learning curve",[43,476,477],{},"Steeper (more properties)",[43,479,480],{},"Gentler",[96,482,484],{"id":483},"the-one-question-test","The One-Question Test",[15,486,487],{},"Can you draw a line across your layout without crossing any item? If yes, Grid is the natural choice. If items form a single row or column with no clean cross-axis, Flexbox fits better.",[10,489,491],{"id":490},"traditional-layout-methods","Traditional Layout Methods",[96,493,495],{"id":494},"float-based-layouts","Float-Based Layouts",[15,497,498],{},"Floats were the backbone of CSS layout before Flexbox existed. Today, use them only for their original purpose — wrapping text around images:",[133,500,502],{"className":135,"code":501,"language":137,"meta":138,"style":138},".article-image {\n  float: left;\n  margin-right: 16px;\n  margin-bottom: 8px;\n}\n",[125,503,504,511,523,537,551],{"__ignoreMap":138},[142,505,506,509],{"class":144,"line":145},[142,507,508],{"class":148},".article-image",[142,510,153],{"class":152},[142,512,513,516,518,521],{"class":144,"line":156},[142,514,515],{"class":159},"  float",[142,517,163],{"class":152},[142,519,520],{"class":159},"left",[142,522,169],{"class":152},[142,524,525,528,530,533,535],{"class":144,"line":172},[142,526,527],{"class":159},"  margin-right",[142,529,163],{"class":152},[142,531,532],{"class":159},"16",[142,534,184],{"class":183},[142,536,169],{"class":152},[142,538,539,542,544,547,549],{"class":144,"line":195},[142,540,541],{"class":159},"  margin-bottom",[142,543,163],{"class":152},[142,545,546],{"class":159},"8",[142,548,184],{"class":183},[142,550,169],{"class":152},[142,552,553],{"class":144,"line":219},[142,554,252],{"class":152},[15,556,557],{},"Never use floats for page structure. They require clearfix hacks, cannot vertically center, and break easily at different screen sizes.",[96,559,561],{"id":560},"positioned-layout","Positioned Layout",[15,563,564,567,568,571],{},[125,565,566],{},"position: absolute"," and ",[125,569,570],{},"position: fixed"," remove elements from normal flow. Use them for overlays, modals, and sticky elements:",[133,573,575],{"className":135,"code":574,"language":137,"meta":138,"style":138},".modal-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sticky-header {\n  position: sticky;\n  top: 0;\n  z-index: 100;\n}\n",[125,576,577,584,596,608,640,650,660,671,675,679,687,699,711,724],{"__ignoreMap":138},[142,578,579,582],{"class":144,"line":145},[142,580,581],{"class":148},".modal-overlay",[142,583,153],{"class":152},[142,585,586,589,591,594],{"class":144,"line":156},[142,587,588],{"class":159},"  position",[142,590,163],{"class":152},[142,592,593],{"class":159},"fixed",[142,595,169],{"class":152},[142,597,598,601,603,606],{"class":144,"line":172},[142,599,600],{"class":159},"  inset",[142,602,163],{"class":152},[142,604,605],{"class":159},"0",[142,607,169],{"class":152},[142,609,610,613,615,618,621,623,626,628,630,632,634,637],{"class":144,"line":195},[142,611,612],{"class":159},"  background",[142,614,163],{"class":152},[142,616,617],{"class":159},"rgba",[142,619,620],{"class":152},"(",[142,622,605],{"class":159},[142,624,625],{"class":152},", ",[142,627,605],{"class":159},[142,629,625],{"class":152},[142,631,605],{"class":159},[142,633,625],{"class":152},[142,635,636],{"class":159},"0.5",[142,638,639],{"class":152},");\n",[142,641,642,644,646,648],{"class":144,"line":219},[142,643,160],{"class":159},[142,645,163],{"class":152},[142,647,308],{"class":159},[142,649,169],{"class":152},[142,651,652,654,656,658],{"class":144,"line":228},[142,653,315],{"class":159},[142,655,163],{"class":152},[142,657,320],{"class":159},[142,659,169],{"class":152},[142,661,662,665,667,669],{"class":144,"line":235},[142,663,664],{"class":159},"  justify-content",[142,666,163],{"class":152},[142,668,320],{"class":159},[142,670,169],{"class":152},[142,672,673],{"class":144,"line":241},[142,674,252],{"class":152},[142,676,677],{"class":144,"line":249},[142,678,346],{"emptyLinePlaceholder":345},[142,680,682,685],{"class":144,"line":681},10,[142,683,684],{"class":148},".sticky-header",[142,686,153],{"class":152},[142,688,690,692,694,697],{"class":144,"line":689},11,[142,691,588],{"class":159},[142,693,163],{"class":152},[142,695,696],{"class":159},"sticky",[142,698,169],{"class":152},[142,700,702,705,707,709],{"class":144,"line":701},12,[142,703,704],{"class":159},"  top",[142,706,163],{"class":152},[142,708,605],{"class":159},[142,710,169],{"class":152},[142,712,714,717,719,722],{"class":144,"line":713},13,[142,715,716],{"class":159},"  z-index",[142,718,163],{"class":152},[142,720,721],{"class":159},"100",[142,723,169],{"class":152},[142,725,727],{"class":144,"line":726},14,[142,728,252],{"class":152},[15,730,731],{},"Position is not a layout system — it is for explicit placement. Do not build page structures with it.",[96,733,735],{"id":734},"table-and-inline-block","Table and Inline-Block",[15,737,738,741,742,745],{},[125,739,740],{},"display: table"," creates equal-height columns but has zero responsive capability. ",[125,743,744],{},"display: inline-block"," was the precursor to Flexbox — it suffers from whitespace gaps and lacks alignment controls. Both are obsolete for layout purposes.",[10,747,749],{"id":748},"choosing-the-right-system","Choosing the Right System",[15,751,752],{},"Follow this decision flow:",[754,755,756,766,772,778,784],"ol",{},[112,757,758,761,762,765],{},[104,759,760],{},"Is it tabular data?"," → Use ",[125,763,764],{},"\u003Ctable>"," with semantic markup",[112,767,768,771],{},[104,769,770],{},"Do you need both rows and columns?"," → Use CSS Grid",[112,773,774,777],{},[104,775,776],{},"Is it one-directional content?"," → Use Flexbox",[112,779,780,783],{},[104,781,782],{},"Does it need to overlay other content?"," → Use position",[112,785,786,789],{},[104,787,788],{},"Does text need to wrap around it?"," → Use float",[15,791,792],{},"When in doubt, start with Flexbox for small components and Grid for page-level structure.",[10,794,796],{"id":795},"combining-grid-and-flexbox","Combining Grid and Flexbox",[15,798,799,800,803],{},"The most powerful pattern is ",[104,801,802],{},"Grid for layout, Flexbox for components",". Here are practical examples.",[96,805,807],{"id":806},"app-shell-pattern","App Shell Pattern",[15,809,810],{},"Grid defines the page structure. Flexbox handles the internals of each area:",[133,812,814],{"className":135,"code":813,"language":137,"meta":138,"style":138},"\u002F* Grid defines the page structure *\u002F\n.app {\n  display: grid;\n  grid-template-columns: 240px 1fr;\n  grid-template-rows: 56px 1fr;\n  grid-template-areas:\n    \"sidebar header\"\n    \"sidebar main\";\n  min-height: 100vh;\n}\n\n\u002F* Flexbox handles the header internals *\u002F\n.header {\n  grid-area: header;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 24px;\n}\n\n\u002F* Flexbox handles the sidebar menu *\u002F\n.sidebar {\n  grid-area: sidebar;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 16px;\n}\n",[125,815,816,821,828,838,855,872,878,883,890,904,908,912,917,924,932,943,954,966,983,988,993,999,1007,1015,1026,1039,1053,1066],{"__ignoreMap":138},[142,817,818],{"class":144,"line":145},[142,819,820],{"class":369},"\u002F* Grid defines the page structure *\u002F\n",[142,822,823,826],{"class":144,"line":156},[142,824,825],{"class":148},".app",[142,827,153],{"class":152},[142,829,830,832,834,836],{"class":144,"line":172},[142,831,160],{"class":159},[142,833,163],{"class":152},[142,835,166],{"class":159},[142,837,169],{"class":152},[142,839,840,842,844,847,849,851,853],{"class":144,"line":195},[142,841,175],{"class":159},[142,843,163],{"class":152},[142,845,846],{"class":159},"240",[142,848,184],{"class":183},[142,850,187],{"class":159},[142,852,190],{"class":183},[142,854,169],{"class":152},[142,856,857,859,861,864,866,868,870],{"class":144,"line":219},[142,858,198],{"class":159},[142,860,163],{"class":152},[142,862,863],{"class":159},"56",[142,865,184],{"class":183},[142,867,187],{"class":159},[142,869,190],{"class":183},[142,871,169],{"class":152},[142,873,874,876],{"class":144,"line":228},[142,875,222],{"class":159},[142,877,225],{"class":152},[142,879,880],{"class":144,"line":235},[142,881,882],{"class":231},"    \"sidebar header\"\n",[142,884,885,888],{"class":144,"line":241},[142,886,887],{"class":231},"    \"sidebar main\"",[142,889,169],{"class":152},[142,891,892,895,897,899,902],{"class":144,"line":249},[142,893,894],{"class":159},"  min-height",[142,896,163],{"class":152},[142,898,721],{"class":159},[142,900,901],{"class":183},"vh",[142,903,169],{"class":152},[142,905,906],{"class":144,"line":681},[142,907,252],{"class":152},[142,909,910],{"class":144,"line":689},[142,911,346],{"emptyLinePlaceholder":345},[142,913,914],{"class":144,"line":701},[142,915,916],{"class":369},"\u002F* Flexbox handles the header internals *\u002F\n",[142,918,919,922],{"class":144,"line":713},[142,920,921],{"class":148},".header",[142,923,153],{"class":152},[142,925,926,929],{"class":144,"line":726},[142,927,928],{"class":159},"  grid-area",[142,930,931],{"class":152},": header;\n",[142,933,935,937,939,941],{"class":144,"line":934},15,[142,936,160],{"class":159},[142,938,163],{"class":152},[142,940,308],{"class":159},[142,942,169],{"class":152},[142,944,946,948,950,952],{"class":144,"line":945},16,[142,947,315],{"class":159},[142,949,163],{"class":152},[142,951,320],{"class":159},[142,953,169],{"class":152},[142,955,957,959,961,964],{"class":144,"line":956},17,[142,958,664],{"class":159},[142,960,163],{"class":152},[142,962,963],{"class":159},"space-between",[142,965,169],{"class":152},[142,967,969,972,974,976,979,981],{"class":144,"line":968},18,[142,970,971],{"class":159},"  padding",[142,973,163],{"class":152},[142,975,605],{"class":159},[142,977,978],{"class":159}," 24",[142,980,184],{"class":183},[142,982,169],{"class":152},[142,984,986],{"class":144,"line":985},19,[142,987,252],{"class":152},[142,989,991],{"class":144,"line":990},20,[142,992,346],{"emptyLinePlaceholder":345},[142,994,996],{"class":144,"line":995},21,[142,997,998],{"class":369},"\u002F* Flexbox handles the sidebar menu *\u002F\n",[142,1000,1002,1005],{"class":144,"line":1001},22,[142,1003,1004],{"class":148},".sidebar",[142,1006,153],{"class":152},[142,1008,1010,1012],{"class":144,"line":1009},23,[142,1011,928],{"class":159},[142,1013,1014],{"class":152},": sidebar;\n",[142,1016,1018,1020,1022,1024],{"class":144,"line":1017},24,[142,1019,160],{"class":159},[142,1021,163],{"class":152},[142,1023,308],{"class":159},[142,1025,169],{"class":152},[142,1027,1029,1032,1034,1037],{"class":144,"line":1028},25,[142,1030,1031],{"class":159},"  flex-direction",[142,1033,163],{"class":152},[142,1035,1036],{"class":159},"column",[142,1038,169],{"class":152},[142,1040,1042,1044,1046,1049,1051],{"class":144,"line":1041},26,[142,1043,327],{"class":159},[142,1045,163],{"class":152},[142,1047,1048],{"class":159},"4",[142,1050,184],{"class":183},[142,1052,169],{"class":152},[142,1054,1056,1058,1060,1062,1064],{"class":144,"line":1055},27,[142,1057,971],{"class":159},[142,1059,163],{"class":152},[142,1061,532],{"class":159},[142,1063,184],{"class":183},[142,1065,169],{"class":152},[142,1067,1069],{"class":144,"line":1068},28,[142,1070,252],{"class":152},[96,1072,1074],{"id":1073},"card-grid-pattern","Card Grid Pattern",[15,1076,1077],{},"Grid handles the card layout. Flexbox controls content inside each card:",[133,1079,1081],{"className":135,"code":1080,"language":137,"meta":138,"style":138},".card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 24px;\n}\n\n.card {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.card-footer {\n  margin-top: auto; \u002F* pushes footer to bottom of card *\u002F\n}\n",[125,1082,1083,1090,1100,1134,1147,1151,1155,1162,1172,1182,1194,1198,1202,1209,1224],{"__ignoreMap":138},[142,1084,1085,1088],{"class":144,"line":145},[142,1086,1087],{"class":148},".card-grid",[142,1089,153],{"class":152},[142,1091,1092,1094,1096,1098],{"class":144,"line":156},[142,1093,160],{"class":159},[142,1095,163],{"class":152},[142,1097,166],{"class":159},[142,1099,169],{"class":152},[142,1101,1102,1104,1106,1109,1111,1113,1115,1118,1120,1123,1125,1127,1129,1131],{"class":144,"line":172},[142,1103,175],{"class":159},[142,1105,163],{"class":152},[142,1107,1108],{"class":159},"repeat",[142,1110,620],{"class":152},[142,1112,127],{"class":159},[142,1114,625],{"class":152},[142,1116,1117],{"class":159},"minmax",[142,1119,620],{"class":152},[142,1121,1122],{"class":159},"300",[142,1124,184],{"class":183},[142,1126,625],{"class":152},[142,1128,363],{"class":159},[142,1130,190],{"class":183},[142,1132,1133],{"class":152},"));\n",[142,1135,1136,1138,1140,1143,1145],{"class":144,"line":195},[142,1137,327],{"class":159},[142,1139,163],{"class":152},[142,1141,1142],{"class":159},"24",[142,1144,184],{"class":183},[142,1146,169],{"class":152},[142,1148,1149],{"class":144,"line":219},[142,1150,252],{"class":152},[142,1152,1153],{"class":144,"line":228},[142,1154,346],{"emptyLinePlaceholder":345},[142,1156,1157,1160],{"class":144,"line":235},[142,1158,1159],{"class":148},".card",[142,1161,153],{"class":152},[142,1163,1164,1166,1168,1170],{"class":144,"line":241},[142,1165,160],{"class":159},[142,1167,163],{"class":152},[142,1169,308],{"class":159},[142,1171,169],{"class":152},[142,1173,1174,1176,1178,1180],{"class":144,"line":249},[142,1175,1031],{"class":159},[142,1177,163],{"class":152},[142,1179,1036],{"class":159},[142,1181,169],{"class":152},[142,1183,1184,1186,1188,1190,1192],{"class":144,"line":681},[142,1185,327],{"class":159},[142,1187,163],{"class":152},[142,1189,332],{"class":159},[142,1191,184],{"class":183},[142,1193,169],{"class":152},[142,1195,1196],{"class":144,"line":689},[142,1197,252],{"class":152},[142,1199,1200],{"class":144,"line":701},[142,1201,346],{"emptyLinePlaceholder":345},[142,1203,1204,1207],{"class":144,"line":713},[142,1205,1206],{"class":148},".card-footer",[142,1208,153],{"class":152},[142,1210,1211,1214,1216,1219,1221],{"class":144,"line":726},[142,1212,1213],{"class":159},"  margin-top",[142,1215,163],{"class":152},[142,1217,1218],{"class":159},"auto",[142,1220,366],{"class":152},[142,1222,1223],{"class":369},"\u002F* pushes footer to bottom of card *\u002F\n",[142,1225,1226],{"class":144,"line":934},[142,1227,252],{"class":152},[15,1229,1230,1231,1234],{},"The ",[125,1232,1233],{},"margin-top: auto"," trick ensures every card footer aligns at the same height, even when card content varies in length.",[96,1236,1238],{"id":1237},"subgrid-for-aligned-children","Subgrid for Aligned Children",[15,1240,1241,1242,1245],{},"When child grids need to align with parent tracks, use ",[125,1243,1244],{},"subgrid",":",[133,1247,1249],{"className":135,"code":1248,"language":137,"meta":138,"style":138},".parent-grid {\n  display: grid;\n  grid-template-columns: 1fr 2fr 1fr;\n  gap: 16px;\n}\n\n.child-grid {\n  display: grid;\n  grid-column: 1 \u002F -1;\n  grid-template-columns: subgrid; \u002F* inherits parent columns *\u002F\n}\n",[125,1250,1251,1258,1268,1289,1301,1305,1309,1316,1326,1343,1356],{"__ignoreMap":138},[142,1252,1253,1256],{"class":144,"line":145},[142,1254,1255],{"class":148},".parent-grid",[142,1257,153],{"class":152},[142,1259,1260,1262,1264,1266],{"class":144,"line":156},[142,1261,160],{"class":159},[142,1263,163],{"class":152},[142,1265,166],{"class":159},[142,1267,169],{"class":152},[142,1269,1270,1272,1274,1276,1278,1281,1283,1285,1287],{"class":144,"line":172},[142,1271,175],{"class":159},[142,1273,163],{"class":152},[142,1275,363],{"class":159},[142,1277,190],{"class":183},[142,1279,1280],{"class":159}," 2",[142,1282,190],{"class":183},[142,1284,187],{"class":159},[142,1286,190],{"class":183},[142,1288,169],{"class":152},[142,1290,1291,1293,1295,1297,1299],{"class":144,"line":195},[142,1292,327],{"class":159},[142,1294,163],{"class":152},[142,1296,532],{"class":159},[142,1298,184],{"class":183},[142,1300,169],{"class":152},[142,1302,1303],{"class":144,"line":219},[142,1304,252],{"class":152},[142,1306,1307],{"class":144,"line":228},[142,1308,346],{"emptyLinePlaceholder":345},[142,1310,1311,1314],{"class":144,"line":235},[142,1312,1313],{"class":148},".child-grid",[142,1315,153],{"class":152},[142,1317,1318,1320,1322,1324],{"class":144,"line":241},[142,1319,160],{"class":159},[142,1321,163],{"class":152},[142,1323,166],{"class":159},[142,1325,169],{"class":152},[142,1327,1328,1331,1333,1335,1338,1341],{"class":144,"line":249},[142,1329,1330],{"class":159},"  grid-column",[142,1332,163],{"class":152},[142,1334,363],{"class":159},[142,1336,1337],{"class":152}," \u002F ",[142,1339,1340],{"class":159},"-1",[142,1342,169],{"class":152},[142,1344,1345,1347,1349,1351,1353],{"class":144,"line":681},[142,1346,175],{"class":159},[142,1348,163],{"class":152},[142,1350,1244],{"class":159},[142,1352,366],{"class":152},[142,1354,1355],{"class":369},"\u002F* inherits parent columns *\u002F\n",[142,1357,1358],{"class":144,"line":689},[142,1359,252],{"class":152},[15,1361,1362],{},"Subgrid eliminates the need to repeat column definitions, keeping layouts DRY and visually aligned.",[10,1364,1366],{"id":1365},"try-it-yourself","Try It Yourself",[15,1368,1369],{},"Build layouts interactively with our tools:",[109,1371,1372,1382],{},[112,1373,1374,1381],{},[1375,1376,1380],"a",{"href":1377,"rel":1378},"https:\u002F\u002Ftoolboxes.site\u002Ftools\u002Fcss-grid",[1379],"nofollow","CSS Grid Generator"," — Define columns, rows, gaps, and named areas visually",[112,1383,1384,1389],{},[1375,1385,1388],{"href":1386,"rel":1387},"https:\u002F\u002Ftoolboxes.site\u002Ftools\u002Fflexbox-generator",[1379],"Flexbox Generator"," — Adjust direction, alignment, wrapping, and spacing",[10,1391,1393],{"id":1392},"related-guides","Related Guides",[109,1395,1396,1403,1410],{},[112,1397,1398,1402],{},[1375,1399,1401],{"href":1400},"\u002Fguides\u002Fflexbox-generator-guide","Flexbox Generator Guide"," — Visual walkthrough of building flex layouts with a generator tool",[112,1404,1405,1409],{},[1375,1406,1408],{"href":1407},"\u002Fguides\u002Fcss-flexbox-tutorial","CSS Flexbox Tutorial"," — Flex container and item properties, alignment, and wrapping",[112,1411,1412,1416],{},[1375,1413,1415],{"href":1414},"\u002Fguides\u002Fcss-grid-guide","CSS Grid Guide"," — Core grid concepts: columns, rows, units, and gaps",[1418,1419,1420],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":138,"searchDepth":156,"depth":156,"links":1422},[1423,1424,1430,1435,1436,1441,1442],{"id":12,"depth":156,"text":13},{"id":90,"depth":156,"text":91,"children":1425},[1426,1427,1428,1429],{"id":98,"depth":172,"text":99},{"id":262,"depth":172,"text":263},{"id":384,"depth":172,"text":385},{"id":483,"depth":172,"text":484},{"id":490,"depth":156,"text":491,"children":1431},[1432,1433,1434],{"id":494,"depth":172,"text":495},{"id":560,"depth":172,"text":561},{"id":734,"depth":172,"text":735},{"id":748,"depth":156,"text":749},{"id":795,"depth":156,"text":796,"children":1437},[1438,1439,1440],{"id":806,"depth":172,"text":807},{"id":1073,"depth":172,"text":1074},{"id":1237,"depth":172,"text":1238},{"id":1365,"depth":156,"text":1366},{"id":1392,"depth":156,"text":1393},"2026-05-28","Compare CSS Grid, Flexbox, and traditional layout methods for modern web design.","md",{"immutable":345},"\u002Fguides\u002Fcss-layout-systems",{"title":5,"description":1444},"guides\u002Fcss-layout-systems","n9oNmWbnwFyCTHAkYD_Ooxr9YSPwRyUkbxUXjvXliTU",1780401331110]