[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"lesson:t3-s07-grid-areas":3,"course:taropood":60},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,7,"t3-s07-grid-areas","book",3,"فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},6,"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},8,"t3-s08-position","فصل ۰۸ — position",[20,24,27,32,35,38,41,44,47,50,53,57],{"kind":21,"heading":22,"html":23},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>آخر این فصل یک صفحهٔ کامل داری — سرصفحه، منو، محتوای اصلی، یک ستونِ کناری و پاصفحه — که همه با grid سرِ جای درستشان نشسته‌اند. و داخلِ محتوای اصلی، یک گالریِ کارت که \u003Cstrong>خودش\u003C\u002Fstrong> با کم‌وزیادشدنِ عرضِ صفحه، تعدادِ ستون‌هایش را عوض می‌کند، بدون اینکه تو حتی یک عدد را دستی تغییر بدهی. این همان کاری است که هر سایتِ واقعی می‌کند.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-named-areas-layout.430a461a82.160.webp 160w, \u002F_img\u002F01-image-named-areas-layout.430a461a82.320.webp 320w, \u002F_img\u002F01-image-named-areas-layout.430a461a82.640.webp 640w, \u002F_img\u002F01-image-named-areas-layout.430a461a82.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-named-areas-layout.430a461a82.1280.jpg\" srcset=\"\u002F_img\u002F01-image-named-areas-layout.430a461a82.160.jpg 160w, \u002F_img\u002F01-image-named-areas-layout.430a461a82.320.jpg 320w, \u002F_img\u002F01-image-named-areas-layout.430a461a82.640.jpg 640w, \u002F_img\u002F01-image-named-areas-layout.430a461a82.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"طرح یک صفحهٔ کامل با ناحیه‌های نام‌دار: نوارِ سرصفحه و منو در بالا، یک ستونِ کناریِ باریک در سمت راست، محتوای اصلیِ پهن در چپ، و پاصفحه در پایین\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>با \u003Ccode>repeat()\u003C\u002Fcode> ستون‌های تکراری را کوتاه و تمیز بنویسی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>minmax()\u003C\u002Fcode> برای هر ستون یک کف و یک سقفِ اندازه تعیین کنی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>auto-fit\u003C\u002Fcode> یک گالری بسازی که خودش تعدادِ ستون‌ها را با عرضِ صفحه تنظیم کند\u003C\u002Fli>\n\u003Cli>با \u003Ccode>grid-template-areas\u003C\u002Fcode> نقشهٔ کلِ یک صفحه را با اسم بکشی\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از فصل ۵ و ۶ (همین ترم):\u003C\u002Fstrong> \u003Ccode>display: grid\u003C\u002Fcode>، \u003Ccode>grid-template-columns\u003C\u002Fcode>\u002F\u003Ccode>rows\u003C\u002Fcode>، \u003Ccode>fr\u003C\u002Fcode> و \u003Ccode>gap\u003C\u002Fcode> — همه‌شان اینجا کنارِ هم به کار می‌روند.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۱:\u003C\u002Fstrong> \u003Ccode><header>\u003C\u002Fcode>، \u003Ccode><nav>\u003C\u002Fcode>، \u003Ccode><main>\u003C\u002Fcode>، \u003Ccode><aside>\u003C\u002Fcode> و \u003Ccode><footer>\u003C\u002Fcode> — ناحیه‌های معناداری که این‌بار با grid می‌چینیم‌شان.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— چند ناحیهٔ جدا می‌بینی که هنوز چیدمانِ درستی ندارند. کارِ این فصل این است که با نامِ ناحیه‌ها نقشهٔ صفحه را بکشی و ببینی هر تکه سرِ جایش می‌پرد","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-3-layout\u002Fsession-07-grid-areas",{"kind":21,"heading":33,"html":34},"۱. repeat(): تکرار بدون تکرار","\u003Ch2 id=\"۱-repeat-تکرار-بدون-تکرار\">۱. \u003Ccode>repeat()\u003C\u002Fcode>: تکرار بدون تکرار\u003Ca class=\"head-anchor\" href=\"#%DB%B1-repeat-%D8%AA%DA%A9%D8%B1%D8%A7%D8%B1-%D8%A8%D8%AF%D9%88%D9%86-%D8%AA%DA%A9%D8%B1%D8%A7%D8%B1\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول محتوای اصلیِ صفحه را می‌سازیم: یک گالریِ کارت داخلِ \u003Ccode><main>\u003C\u002Fcode>. فرض کن سه ستونِ برابر می‌خواهی. نوشتنِ \u003Ccode>1fr 1fr 1fr\u003C\u002Fcode> که بد نیست، ولی برای شش ستون می‌شود \u003Ccode>1fr 1fr 1fr 1fr 1fr 1fr\u003C\u002Fcode> — خسته‌کننده و خطاخیز. grid یک کوتاه‌نویسی دارد: \u003Ccode>repeat()\u003C\u002Fcode>. عددِ اول می‌گوید چند بار، دومی می‌گوید چه چیز را تکرار کن. اول HTML:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><main class="content">\n  <article class="card">پست ۱<\u002Farticle>\n  <article class="card">پست ۲<\u002Farticle>\n  <article class="card">پست ۳<\u002Farticle>\n  <article class="card">پست ۴<\u002Farticle>\n<\u002Fmain>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و سه ستونِ برابر، این‌بار با \u003Ccode>repeat\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.content {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 12px;\n}\n\n.card {\n  background-color: #bc3e1c;\n  color: #ffffff;\n  padding: 16px;\n  border-radius: 8px;\n  text-align: center;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>repeat(3, 1fr)\u003C\u002Fcode> دقیقاً یعنی \u003Ccode>1fr 1fr 1fr\u003C\u002Fcode> — سه ستونِ یک‌سهمی. اگر شش ستون می‌خواستی، فقط عددِ ۳ را ۶ می‌کردی. یک جا عوض می‌کنی، نه شش جا.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> چهار کارتِ قرمز را می‌بینی که سه‌تا در سطرِ اول و یکی در سطرِ دوم چیده شده‌اند، در سه ستونِ برابر. عددِ ۳ را به ۲ و بعد ۴ عوض کن و ببین چطور کلِ گالری با یک تغییرِ کوچک بازچیده می‌شود.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. minmax(): نه خیلی باریک، نه خیلی پهن","\u003Ch2 id=\"۲-minmax-نه-خیلی-باریک-نه-خیلی-پهن\">۲. \u003Ccode>minmax()\u003C\u002Fcode>: نه خیلی باریک، نه خیلی پهن\u003Ca class=\"head-anchor\" href=\"#%DB%B2-minmax-%D9%86%D9%87-%D8%AE%DB%8C%D9%84%DB%8C-%D8%A8%D8%A7%D8%B1%DB%8C%DA%A9-%D9%86%D9%87-%D8%AE%DB%8C%D9%84%DB%8C-%D9%BE%D9%87%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>با \u003Ccode>1fr\u003C\u002Fcode> ستون‌ها هر چه لازم شد کش می‌آیند و جمع می‌شوند — ولی هیچ حد و مرزی ندارند. روی صفحهٔ خیلی باریک، یک ستونِ \u003Ccode>1fr\u003C\u002Fcode> می‌تواند آن‌قدر باریک شود که محتوا لهش کند. \u003Ccode>minmax()\u003C\u002Fcode> این را حل می‌کند: به هر ستون یک \u003Cstrong>کمینه\u003C\u002Fstrong> و یک \u003Cstrong>بیشینه\u003C\u002Fstrong> می‌دهی. شکلش \u003Ccode>minmax(کمینه, بیشینه)\u003C\u002Fcode> است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.content {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(120px, 1fr));\n  gap: 12px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>minmax(120px, 1fr)\u003C\u002Fcode> یعنی «هر ستون دستِ‌کم ۱۲۰ پیکسل، و اگر جا بود تا یک سهمِ کامل کش بیا». یعنی ستون هیچ‌وقت از ۱۲۰ باریک‌تر نمی‌شود، ولی روی صفحهٔ پهن آزادانه بزرگ می‌شود.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> ظاهرِ گالری روی صفحهٔ پهن مثل قبل است. حالا عرضِ آزمایشگاه را کم کن تا خیلی باریک شود؛ می‌بینی ستون‌ها زیرِ ۱۲۰ پیکسل نمی‌روند و به‌جای له‌شدن، از لبه بیرون می‌زنند. این کف، محتوای تو را از خفه‌شدن نجات می‌دهد. در قدمِ بعد کاری می‌کنیم که به‌جای بیرون‌زدن، به سطرِ بعد بروند.\u003C\u002Fp>\n",{"kind":21,"heading":39,"html":40},"۳. auto-fit: بگذار خودش تعدادِ ستون‌ها را تصمیم بگیرد","\u003Ch2 id=\"۳-auto-fit-بگذار-خودش-تعدادِ-ستون‌ها-را-تصمیم-بگیرد\">۳. \u003Ccode>auto-fit\u003C\u002Fcode>: بگذار خودش تعدادِ ستون‌ها را تصمیم بگیرد\u003Ca class=\"head-anchor\" href=\"#%DB%B3-auto-fit-%D8%A8%DA%AF%D8%B0%D8%A7%D8%B1-%D8%AE%D9%88%D8%AF%D8%B4-%D8%AA%D8%B9%D8%AF%D8%A7%D8%AF%D9%90-%D8%B3%D8%AA%D9%88%D9%86%E2%80%8C%D9%87%D8%A7-%D8%B1%D8%A7-%D8%AA%D8%B5%D9%85%DB%8C%D9%85-%D8%A8%DA%AF%DB%8C%D8%B1%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا اینجا تعدادِ ستون‌ها را خودت گفتی (\u003Ccode>repeat(3, ...)\u003C\u002Fcode>). ولی چه می‌شد اگر می‌گفتی «هر چند ستونِ ۱۲۰پیکسلی که جا شد بگذار»؟ این کارِ \u003Ccode>auto-fit\u003C\u002Fcode> است. عددِ تکرار را با کلمهٔ \u003Ccode>auto-fit\u003C\u002Fcode> عوض کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.content {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n  gap: 12px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا grid خودش حساب می‌کند: «روی این عرض، چند ستونِ دستِ‌کم‌۱۲۰پیکسلی جا می‌شود؟» — و همان‌قدر ستون می‌سازد؛ بقیه به سطرِ بعد می‌روند. \u003Ccode>minmax\u003C\u002Fcode> هم مطمئن می‌شود ستون‌ها فضای باقی‌مانده را پُر کنند و لاغر نمانند.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> عرضِ آزمایشگاه را آرام‌آرام باریک کن. می‌بینی گالری خودش از چهار ستون به سه، بعد دو، بعد یک ستون می‌رود — بی‌آنکه تو دست به کد بزنی. این اولین بارِ توست که یک چیدمانِ \u003Cstrong>responsive\u003C\u002Fstrong> می‌سازی: چیدمانی که با اندازهٔ صفحه ور می‌رود. ابزارِ کاملِ responsive بودن (\u003Ccode>@media\u003C\u002Fcode>) را ترم بعد یاد می‌گیری؛ ولی \u003Ccode>auto-fit\u003C\u002Fcode> یک تکهٔ رایگانش را همین حالا به تو داد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> یک خواهرِ دوقلو هم هست: \u003Ccode>auto-fill\u003C\u002Fcode>. فرقش فقط وقتی دیده می‌شود که آیتم‌ها کم باشند و جا زیاد: \u003Ccode>auto-fit\u003C\u002Fcode> ستون‌های خالیِ اضافه را جمع می‌کند و آیتم‌ها را کش می‌آورد تا فضا را پُر کنند؛ \u003Ccode>auto-fill\u003C\u002Fcode> ستون‌های خالی را نگه می‌دارد و آیتم‌ها را باریک می‌گذارد. برای گالری‌ای که باید فضا را پُر کند، \u003Ccode>auto-fit\u003C\u002Fcode> معمولاً همانی است که می‌خواهی.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":42,"html":43},"۴. نقشهٔ صفحه با grid-template-areas","\u003Ch2 id=\"۴-نقشهٔ-صفحه-با-grid-template-areas\">۴. نقشهٔ صفحه با \u003Ccode>grid-template-areas\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D9%86%D9%82%D8%B4%D9%87%D9%94-%D8%B5%D9%81%D8%AD%D9%87-%D8%A8%D8%A7-grid-template-areas\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>محتوای اصلی آماده است؛ حالا یک صفحهٔ کامل دورش می‌سازیم. یک صفحهٔ واقعی چند ناحیه دارد: سرصفحه، منو، محتوای اصلی، ستونِ کناری، پاصفحه. می‌شد هرکدام را با شمارهٔ خط جا گذاشت (فصل قبل)، ولی grid یک راهِ خیلی خواناتر دارد: \u003Cstrong>نقشه را بکش\u003C\u002Fstrong>. با \u003Ccode>grid-template-areas\u003C\u002Fcode> صفحه را مثل یک نقاشیِ متنی رسم می‌کنی و به هر ناحیه یک اسم می‌دهی.\u003C\u002Fp>\n\u003Cp>اول HTML را با tag های معنادار بساز؛ همه مستقیم داخلِ \u003Ccode><body>\u003C\u002Fcode> می‌روند، بدونِ هیچ جعبهٔ اضافه:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><header class="header">وبلاگ من<\u002Fheader>\n<nav class="nav">خانه · درباره · تماس<\u002Fnav>\n<aside class="aside">لینک‌های مفید<\u002Faside>\n<main class="content">محتوای اصلی صفحه<\u002Fmain>\n<footer class="footer">ساختهٔ من — ۱۴۰۵<\u002Ffooter>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا خودِ \u003Ccode>body\u003C\u002Fcode> را grid می‌کنیم و نقشه را رویش می‌کشیم. هر خطِ داخلِ \u003Ccode>grid-template-areas\u003C\u002Fcode> یک سطر است، و هر کلمه یک خانه:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>body {\n  display: grid;\n  grid-template-columns: 200px 1fr;\n  grid-template-rows: auto auto 1fr auto;\n  grid-template-areas:\n    "header header"\n    "nav    nav"\n    "aside  content"\n    "footer footer";\n  gap: 12px;\n  min-height: 480px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>این نقشه را مثل یک نقاشی بخوان: سطرِ اول تماماً \u003Ccode>header\u003C\u002Fcode>، سطرِ دوم تماماً \u003Ccode>nav\u003C\u002Fcode>، سطرِ سوم دو خانه دارد — \u003Ccode>aside\u003C\u002Fcode> و \u003Ccode>content\u003C\u002Fcode>، و سطرِ آخر تماماً \u003Ccode>footer\u003C\u002Fcode>. تکرارِ یک اسم (مثل \u003Ccode>header header\u003C\u002Fcode>) یعنی آن ناحیه هر دو ستون را می‌گیرد.\u003C\u002Fp>\n\u003Cp>یک نکتهٔ RTL که باید ببینی: چون صفحه راست‌به‌چپ است، \u003Cstrong>اولین\u003C\u002Fstrong> کلمهٔ هر سطر به ستونِ \u003Cstrong>راست\u003C\u002Fstrong> می‌خورد. پس در سطرِ \u003Ccode>"aside content"\u003C\u002Fcode>، ناحیهٔ \u003Ccode>aside\u003C\u002Fcode> سمتِ راست می‌نشیند و \u003Ccode>content\u003C\u002Fcode> سمتِ چپ — دقیقاً همان جایی که یک ستونِ کناریِ فارسی باید باشد. \u003Ccode>grid-template-columns: 200px 1fr\u003C\u002Fcode> هم یعنی ستونِ راست (aside) ۲۰۰ پیکسلِ ثابت، و ستونِ چپ (content) هرچه فضا ماند.\u003C\u002Fp>\n\u003Cp>تا اینجا فقط نقشه را کشیدی؛ حالا باید به هر عنصر بگویی «تو کدام ناحیه‌ای». این کار با \u003Ccode>grid-area\u003C\u002Fcode> است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.header  { grid-area: header; }\n.nav     { grid-area: nav; }\n.aside   { grid-area: aside; }\n.content { grid-area: content; }\n.footer  { grid-area: footer; }\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> پنج ناحیه پریدند سرِ جای درستشان: سرصفحه و منو به‌صورت دو نوارِ کاملِ بالا، بعد ستونِ کناری در راست و محتوای اصلیِ پهن در چپ، و پاصفحه در پایین. یک صفحهٔ کامل، فقط با یک نقشهٔ متنی و پنج خطِ \u003Ccode>grid-area\u003C\u002Fcode>.\u003C\u002Fp>\n",{"kind":21,"heading":45,"html":46},"۵. یک حرفِ جاافتاده و یک سوراخ در صفحه","\u003Ch2 id=\"۵-یک-حرفِ-جاافتاده-و-یک-سوراخ-در-صفحه\">۵. یک حرفِ جاافتاده و یک سوراخ در صفحه\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%DB%8C%DA%A9-%D8%AD%D8%B1%D9%81%D9%90-%D8%AC%D8%A7%D8%A7%D9%81%D8%AA%D8%A7%D8%AF%D9%87-%D9%88-%DB%8C%DA%A9-%D8%B3%D9%88%D8%B1%D8%A7%D8%AE-%D8%AF%D8%B1-%D8%B5%D9%81%D8%AD%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>grid-template-areas\u003C\u002Fcode> یک قانونِ سختگیر دارد: اسمی که در نقشه می‌نویسی باید \u003Cstrong>مو به مو\u003C\u002Fstrong> با اسمی که در \u003Ccode>grid-area\u003C\u002Fcode> می‌دهی یکی باشد. یک حرفِ اشتباه و ناحیه گم می‌شود. بیا ببینیم. فرض کن موقعِ نوشتنِ \u003Ccode>grid-area\u003C\u002Fcode>ِ محتوای اصلی، انگشتت بلغزد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.content { grid-area: contnet; }\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا نگاه کن: جایی که باید محتوای اصلی باشد یک \u003Cstrong>سوراخِ خالی\u003C\u002Fstrong> مانده، و خودِ محتوا از نقشه افتاده بیرون و یک‌جای عجیب، پایینِ صفحه، ظاهر شده.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> این عمدی بود. در نقشه نوشتی \u003Ccode>content\u003C\u002Fcode> ولی در \u003Ccode>grid-area\u003C\u002Fcode> تایپ کردی \u003Ccode>contnet\u003C\u002Fcode>. grid دنبالِ ناحیه‌ای به اسمِ \u003Ccode>contnet\u003C\u002Fcode> می‌گردد، پیدا نمی‌کند، پس عنصر را در ناحیهٔ \u003Ccode>content\u003C\u002Fcode>ِ نقشه \u003Cstrong>نمی‌گذارد\u003C\u002Fstrong> — آن خانه خالی می‌ماند (سوراخ) و عنصر به یک سطرِ خودساختهٔ بیرونِ نقشه پرت می‌شود. رفعش یک حرف است: \u003Ccode>contnet\u003C\u002Fcode> را \u003Ccode>content\u003C\u002Fcode> کن. اسم‌ها باید دقیقاً یکی باشند — حتی دو حرفِ جابه‌جا کافی است که کار خراب شود.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> تا اسم را درست کردی، محتوا از پایین پرید سرِ جای اصلی‌اش و سوراخ پُر شد. هر وقت یک ناحیه سرِ جایش نبود یا یک خانه بی‌دلیل خالی ماند، اول از همه اسم‌ها را با نقشه بسنج.\u003C\u002Fp>\n",{"kind":21,"heading":48,"html":49},"۶. کد کاملِ صفحه","\u003Ch2 id=\"۶-کد-کاملِ-صفحه\">۶. کد کاملِ صفحه\u003Ca class=\"head-anchor\" href=\"#%DB%B6-%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84%D9%90-%D8%B5%D9%81%D8%AD%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا همه‌چیز را سرِ هم می‌کنیم: صفحهٔ نام‌دار، و محتوای اصلی که همان گالریِ \u003Ccode>auto-fit\u003C\u002Fcode> است. اول \u003Ccode>index.html\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <title>چیدمان کامل صفحه<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <header class="header">وبلاگ من<\u002Fheader>\n    <nav class="nav">خانه · درباره · تماس<\u002Fnav>\n    <aside class="aside">لینک‌های مفید<\u002Faside>\n    <main class="content">\n      <article class="card">پست ۱<\u002Farticle>\n      <article class="card">پست ۲<\u002Farticle>\n      <article class="card">پست ۳<\u002Farticle>\n      <article class="card">پست ۴<\u002Farticle>\n    <\u002Fmain>\n    <footer class="footer">ساختهٔ من — ۱۴۰۵<\u002Ffooter>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  display: grid;\n  grid-template-columns: 200px 1fr;\n  grid-template-rows: auto auto 1fr auto;\n  grid-template-areas:\n    "header header"\n    "nav    nav"\n    "aside  content"\n    "footer footer";\n  gap: 12px;\n  margin: 0;\n  padding: 16px;\n  min-height: 480px;\n  background-color: #f6edda;\n}\n\n.header  { grid-area: header; }\n.nav     { grid-area: nav; }\n.aside   { grid-area: aside; }\n.content { grid-area: content; }\n.footer  { grid-area: footer; }\n\n.header,\n.nav,\n.aside,\n.content,\n.footer {\n  background-color: #2a6b93;\n  color: #ffffff;\n  padding: 16px;\n  border-radius: 8px;\n}\n\n.content {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n  gap: 12px;\n}\n\n.card {\n  background-color: #bc3e1c;\n  color: #ffffff;\n  padding: 16px;\n  border-radius: 8px;\n  text-align: center;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> یک صفحهٔ کامل و مرتب می‌بینی: نوارهای سرصفحه و منو در بالا، ستونِ کناری در راست، محتوای اصلی در چپ با چهار کارتِ قرمز تویش، و پاصفحه در پایین. عرض را باریک کن و دو چیز را با هم ببین: کارت‌های داخلِ محتوا کم‌ستون می‌شوند، و کلِ صفحه هم دستِ‌نخورده سرِ پا می‌ماند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> نقشهٔ \u003Ccode>grid-template-areas\u003C\u002Fcode> ات را به دستیار AI ات بده و بخواه یک چیدمانِ جایگزین پیشنهاد بدهد (مثلاً ستونِ کناری در چپ به‌جای راست). ولی یادت باشد AI اغلب فراموش می‌کند صفحهٔ ما RTL است و ترتیبِ ستون‌ها را برعکس فرض می‌کند. پیشنهادش را در آزمایشگاه امتحان کن و با چشمت ببین کدام سمت نشست — اول خودت، بعد AI.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":51,"html":52},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>repeat()\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>ری‌پیت\u003C\u002Ftd>\n\u003Ctd>ستون یا سطرِ تکراری را کوتاه می‌نویسد، مثل \u003Ccode>repeat(3, 1fr)\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>minmax()\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>مین‌مکس\u003C\u002Ftd>\n\u003Ctd>برای یک ستون یک کمینه و یک بیشینهٔ اندازه تعیین می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>auto-fit\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>اتو-فیت\u003C\u002Ftd>\n\u003Ctd>خودش هر چند ستون که جا شد می‌سازد و خالی‌ها را جمع می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>auto-fill\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>اتو-فیل\u003C\u002Ftd>\n\u003Ctd>مثل \u003Ccode>auto-fit\u003C\u002Fcode> ولی ستون‌های خالی را نگه می‌دارد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>grid-template-areas\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>گِرید تمپلیت اریاز\u003C\u002Ftd>\n\u003Ctd>نقشهٔ صفحه را با نامِ ناحیه‌ها می‌کشد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>grid-area\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>گِرید اریا\u003C\u002Ftd>\n\u003Ctd>می‌گوید یک عنصر کدام ناحیهٔ نقشه را پُر کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":54,"heading":55,"html":56},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: اگر در نقشه \u003Ccode>content\u003C\u002Fcode> بنویسی ولی در \u003Ccode>grid-area\u003C\u002Fcode> تایپ کنی \u003Ccode>Content\u003C\u002Fcode> با C بزرگ، چه اتفاقی می‌افتد؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> نقشهٔ صفحه را عوض کن تا ستونِ کناری در \u003Cstrong>چپ\u003C\u002Fstrong> بنشیند و محتوای اصلی در راست (راهنما: در سطرِ سومِ نقشه ترتیبِ دو کلمه را جابه‌جا کن). بعد یک ناحیهٔ ششم به اسمِ \u003Ccode>banner\u003C\u002Fcode> بالای همه اضافه کن که کلِ عرض را بگیرد.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> گالریِ \u003Ccode>repeat(auto-fit, minmax(120px, 1fr))\u003C\u002Fcode> را بردار و عددِ کمینه را از ۱۲۰ به ۲۰۰ عوض کن. با یک جمله بنویس این چه فرقی در تعدادِ ستون‌ها روی یک عرضِ ثابت می‌سازد. بعد \u003Ccode>auto-fit\u003C\u002Fcode> را با \u003Ccode>auto-fill\u003C\u002Fcode> عوض کن، فقط دو کارت بگذار، و بنویس چه فرقی می‌بینی.\u003C\u002Fp>\n",{"kind":21,"heading":58,"html":59},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان می‌توانی کلِ اسکلتِ یک صفحه را با grid بچینی. تا اینجا هر چیز سرِ خانهٔ خودش در جریانِ چیدمان نشسته. ولی گاهی می‌خواهی یک چیز را از جریان \u003Cstrong>بیرون\u003C\u002Fstrong> بکشی و دقیقاً یک‌جای مشخص بچسبانی‌اش — یک برچسبِ «جدید» روی گوشهٔ کارت، یک دکمه که همیشه گوشهٔ صفحه بماند، یک سرصفحه که موقعِ اسکرول بچسبد بالا. فصل بعد سراغ \u003Ccode>position\u003C\u002Fcode> می‌رویم و این کارها را یاد می‌گیری — و یک تلهٔ معروف به اسمِ containing block را می‌بینی که چرا یک عنصر گاهی به جای اشتباه می‌پرد.\u003C\u002Fp>\n",{"course":61,"entitled":69,"lessons":70,"payments_enabled":69,"terms":255,"live":5},{"active_window":62,"effective_price_toman":63,"free":5,"lesson_count":64,"price_toman":65,"slug":66,"summary_fa":67,"title_fa":68},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[71,75,79,82,86,90,93,96,99,103,107,110,113,116,119,122,125,128,131,134,137,141,144,147,150,153,156,157,158,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252],{"free_preview":5,"order":72,"slug":73,"source":8,"term":72,"title_fa":74},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":76,"slug":77,"source":8,"term":72,"title_fa":78},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":9,"slug":80,"source":8,"term":72,"title_fa":81},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":83,"slug":84,"source":8,"term":72,"title_fa":85},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":87,"slug":88,"source":8,"term":72,"title_fa":89},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":12,"slug":91,"source":8,"term":72,"title_fa":92},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":6,"slug":94,"source":8,"term":72,"title_fa":95},"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":16,"slug":97,"source":8,"term":72,"title_fa":98},"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":100,"slug":101,"source":8,"term":72,"title_fa":102},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":104,"slug":105,"source":8,"term":72,"title_fa":106},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":72,"slug":108,"source":8,"term":76,"title_fa":109},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":76,"slug":111,"source":8,"term":76,"title_fa":112},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":9,"slug":114,"source":8,"term":76,"title_fa":115},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":83,"slug":117,"source":8,"term":76,"title_fa":118},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":87,"slug":120,"source":8,"term":76,"title_fa":121},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":12,"slug":123,"source":8,"term":76,"title_fa":124},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":6,"slug":126,"source":8,"term":76,"title_fa":127},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":16,"slug":129,"source":8,"term":76,"title_fa":130},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":100,"slug":132,"source":8,"term":76,"title_fa":133},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":104,"slug":135,"source":8,"term":76,"title_fa":136},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":138,"slug":139,"source":8,"term":76,"title_fa":140},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":72,"slug":142,"source":8,"term":9,"title_fa":143},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":76,"slug":145,"source":8,"term":9,"title_fa":146},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":9,"slug":148,"source":8,"term":9,"title_fa":149},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":83,"slug":151,"source":8,"term":9,"title_fa":152},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":87,"slug":154,"source":8,"term":9,"title_fa":155},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":100,"slug":160,"source":8,"term":9,"title_fa":161},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":104,"slug":163,"source":8,"term":9,"title_fa":164},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":138,"slug":166,"source":8,"term":9,"title_fa":167},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":72,"slug":169,"source":8,"term":83,"title_fa":170},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":76,"slug":172,"source":8,"term":83,"title_fa":173},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":9,"slug":175,"source":8,"term":83,"title_fa":176},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":83,"slug":178,"source":8,"term":83,"title_fa":179},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":87,"slug":181,"source":8,"term":83,"title_fa":182},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":12,"slug":184,"source":8,"term":83,"title_fa":185},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":6,"slug":187,"source":8,"term":83,"title_fa":188},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":16,"slug":190,"source":8,"term":83,"title_fa":191},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":72,"slug":193,"source":8,"term":87,"title_fa":194},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":76,"slug":196,"source":8,"term":87,"title_fa":197},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":9,"slug":199,"source":8,"term":87,"title_fa":200},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":83,"slug":202,"source":8,"term":87,"title_fa":203},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":87,"slug":205,"source":8,"term":87,"title_fa":206},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":12,"slug":208,"source":8,"term":87,"title_fa":209},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":6,"slug":211,"source":8,"term":87,"title_fa":212},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":16,"slug":214,"source":8,"term":87,"title_fa":215},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":100,"slug":217,"source":8,"term":87,"title_fa":218},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":104,"slug":220,"source":8,"term":87,"title_fa":221},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":72,"slug":223,"source":8,"term":12,"title_fa":224},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":76,"slug":226,"source":8,"term":12,"title_fa":227},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":9,"slug":229,"source":8,"term":12,"title_fa":230},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":83,"slug":232,"source":8,"term":12,"title_fa":233},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":87,"slug":235,"source":8,"term":12,"title_fa":236},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":12,"slug":238,"source":8,"term":12,"title_fa":239},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":6,"slug":241,"source":8,"term":12,"title_fa":242},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":16,"slug":244,"source":8,"term":12,"title_fa":245},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":100,"slug":247,"source":8,"term":12,"title_fa":248},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":104,"slug":250,"source":8,"term":12,"title_fa":251},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":138,"slug":253,"source":8,"term":12,"title_fa":254},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105097]