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