توابع ترک (Track) در CSS Grid: اندازه‌گیری پویا در لی‌آوت برای طراحی واکنش‌گرا

CSS Grid انقلابی در لی‌آوت وب ایجاد کرده و کنترل و انعطاف‌پذیری بی‌نظیری را ارائه می‌دهد. در قلب قدرت آن، توابع ترک (track functions) قرار دارند که اندازه سطرها و ستون‌ها را در گرید مشخص می‌کنند. درک و تسلط بر این توابع برای ایجاد لی‌آوت‌های واکنش‌گرا و پویا که به طور یکپارچه با اندازه‌های مختلف صفحه و نیازهای محتوایی سازگار می‌شوند، حیاتی است.

توابع ترک در CSS Grid چه هستند؟

توابع ترک برای مشخص کردن اندازه ترک‌های گرید (سطرها و ستون‌ها) استفاده می‌شوند. آن‌ها راهی برای تعریف نحوه توزیع فضا بین ترک‌ها فراهم می‌کنند و امکان اندازه‌گیری ثابت و انعطاف‌پذیر را می‌دهند. رایج‌ترین توابع ترک عبارتند از:

• fr (واحد کسری): نماینده کسری از فضای موجود در کانتینر گرید است.
• minmax(min, max): یک محدوده اندازه بین مقدار حداقل و حداکثر تعریف می‌کند.
• auto: اندازه ترک توسط محتوای درون آن تعیین می‌شود.
• fit-content(length): اندازه ترک برای تطابق با محتوای خود سازگار می‌شود، اما هرگز از طول مشخص شده تجاوز نمی‌کند.

واحد fr: توزیع فضای موجود

واحد fr مسلماً قدرتمندترین و انعطاف‌پذیرترین تابع ترک است. این واحد به شما امکان می‌دهد فضای موجود در کانتینر گرید را به نسبت بین ترک‌های گرید تقسیم کنید. واحد fr نماینده کسری از فضای آزاد باقیمانده پس از اندازه‌گیری سایر ترک‌ها است.

کاربرد پایه

کد CSS زیر را در نظر بگیرید:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

            

              
                Copy
              
            
          

این کد یک گرید با سه ستون ایجاد می‌کند. ستون‌های اول و سوم هر کدام 1/4 از فضای موجود را اشغال می‌کنند، در حالی که ستون دوم 2/4 (یا 1/2) فضای موجود را به خود اختصاص می‌دهد. اگر کانتینر گرید 600 پیکسل عرض داشته باشد و هیچ ستونی با اندازه ثابت وجود نداشته باشد، عرض ستون‌های اول و سوم هر کدام 150 پیکسل و عرض ستون دوم 300 پیکسل خواهد بود.

ترکیب fr با ترک‌های با اندازه ثابت

قدرت واقعی fr زمانی مشخص می‌شود که با ترک‌های با اندازه ثابت (مانند پیکسل، em، rem) ترکیب شود. ابتدا ترک‌های با اندازه ثابت اندازه‌گیری می‌شوند و سپس فضای باقیمانده بین واحدهای fr توزیع می‌شود.

            .grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
}

            

              
                Copy
              
            
          

در این مثال، ستون اول روی 200 پیکسل ثابت شده است. اگر کانتینر گرید 600 پیکسل عرض داشته باشد، 400 پیکسل باقیمانده بین ستون‌های دوم و سوم توزیع می‌شود. ستون دوم 1/3 از فضای باقیمانده (تقریباً 133.33 پیکسل) و ستون سوم 2/3 (تقریباً 266.67 پیکسل) را دریافت خواهد کرد.

مثال: یک نوار ناوبری سراسری

یک نوار ناوبری سراسری را تصور کنید که لوگویی با عرض ثابت در سمت چپ، یک نوار جستجو در وسط که بیشتر فضا را اشغال می‌کند، و مجموعه‌ای از آیکون‌های حساب کاربری با عرض ثابت در سمت راست دارد.

            .nav-container {
  display: grid;
  grid-template-columns: 150px 1fr 100px; /* Logo, Search, Account Icons */
}

.nav-logo {
  /* Logo styling */
}

.nav-search {
  /* Search bar styling */
}

.nav-account {
  /* Account icon styling */
}

            

              
                Copy
              
            
          

در اینجا، ستون لوگو 150 پیکسل عرض دارد، ستون آیکون حساب کاربری 100 پیکسل عرض دارد و ستون نوار جستجو برای پر کردن فضای باقیمانده گسترش می‌یابد. این کار تضمین می‌کند که نوار جستجو با اندازه‌های مختلف صفحه سازگار می‌شود در حالی که اندازه‌های ثابت برای لوگو و آیکون‌های حساب کاربری حفظ می‌شوند.

تابع minmax(): تعریف محدوده‌های اندازه

تابع minmax() به شما امکان می‌دهد حداقل و حداکثر اندازه را برای یک ترک گرید تعریف کنید. این ویژگی برای ایجاد لی‌آوت‌های واکنش‌گرا که با طول‌های مختلف محتوا سازگار هستند و از سرریز شدن یا کشیدگی بیش از حد جلوگیری می‌کنند، بسیار مفید است.

کاربرد پایه

            .grid-container {
  display: grid;
  grid-template-columns: minmax(100px, 300px) 1fr;
}

            

              
                Copy
              
            
          

در این مثال، ستون اول حداقل 100 پیکسل و حداکثر 300 پیکسل عرض خواهد داشت. اگر محتوای درون ستون اول به بیش از 100 پیکسل نیاز داشته باشد، ستون تا رسیدن به 300 پیکسل گسترش می‌یابد. پس از آن، دیگر رشد نخواهد کرد و محتوا ممکن است سرریز شود. ستون دوم فضای باقیمانده را اشغال خواهد کرد.

ترکیب minmax() با auto

یک مورد استفاده رایج، ترکیب minmax() با auto است تا به یک ترک اجازه دهد بر اساس محتوای خود رشد کند، اما فقط تا یک حد معین.

            .grid-container {
  display: grid;
  grid-template-columns: minmax(100px, auto) 1fr;
}

            

              
                Copy
              
            
          

در این حالت، ستون اول حداقل 100 پیکسل عرض خواهد داشت. اگر محتوا عریض‌تر از 100 پیکسل باشد، ستون برای جای دادن آن گسترش می‌یابد. با این حال، ستون فقط به اندازه‌ای که برای جا دادن محتوا لازم است گسترش می‌یابد. اگر محتوا کمتر از 100 پیکسل باشد، عرض ستون 100 پیکسل خواهد بود. ستون دوم دوباره فضای باقیمانده را اشغال خواهد کرد.

مثال: یک گرید کارت محصول

یک گرید از کارت‌های محصول را در نظر بگیرید که می‌خواهید هر کارت حداقل عرض مشخصی داشته باشد اما به آن‌ها اجازه دهید تا برای پر کردن فضای موجود، تا یک حداکثر معین، گسترش یابند. این می‌تواند برای یک وب‌سایت تجارت الکترونیک با کاربرانی از کشورهای مختلف که عناوین محصولات ممکن است طول‌های متفاوتی داشته باشند، مفید باشد.

            .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

.product-card {
  /* Product card styling */
}

            

              
                Copy
              
            
          

در اینجا، repeat(auto-fit, minmax(200px, 1fr)) تا حد امکان ستون‌هایی ایجاد می‌کند که هر کدام حداقل عرض 200 پیکسل دارند. حداکثر 1fr به ستون‌ها اجازه می‌دهد تا گسترش یافته و فضای موجود را پر کنند. grid-gap فاصله بین کارت‌ها را اضافه می‌کند. با تغییر اندازه صفحه، تعداد ستون‌ها به طور خودکار برای تطابق با فضای موجود تنظیم می‌شود و یک لی‌آوت واکنش‌گرا برای کاربران با پیشینه‌ها و دستگاه‌های متنوع تضمین می‌کند.

کلمه کلیدی auto: اندازه‌گیری مبتنی بر محتوا

کلمه کلیدی auto به گرید دستور می‌دهد که یک ترک را بر اساس محتوای درون آن اندازه‌گیری کند. این زمانی مفید است که می‌خواهید یک ترک فقط به اندازه‌ای بزرگ باشد که محتوای خود را در بر گیرد، بدون اینکه اندازه‌ای را به صراحت مشخص کنید.

کاربرد پایه

            .grid-container {
  display: grid;
  grid-template-columns: auto 1fr;
}

            

              
                Copy
              
            
          

در این مثال، ستون اول به اندازه‌ای که محتوای خود را جا دهد، اندازه‌گیری می‌شود. ستون دوم فضای باقیمانده را اشغال خواهد کرد.

مثال: یک لی‌آوت با نوار کناری

یک لی‌آوت با نوار کناری در سمت چپ و یک ناحیه محتوای اصلی در سمت راست را در نظر بگیرید. نوار کناری باید فقط به اندازه‌ای عریض باشد که محتوای خود (مانند لیستی از لینک‌های ناوبری) را در بر گیرد، در حالی که ناحیه محتوای اصلی باید فضای باقیمانده را اشغال کند.

            .layout-container {
  display: grid;
  grid-template-columns: auto 1fr;
}

.sidebar {
  /* Sidebar styling */
}

.main-content {
  /* Main content styling */
}

            

              
                Copy
              
            
          

کلمه کلیدی auto تضمین می‌کند که نوار کناری با عرض محتوای خود سازگار می‌شود. اگر محتوا کوتاه باشد، نوار کناری باریک خواهد بود. اگر محتوا طولانی باشد، نوار کناری عریض‌تر خواهد بود. این کار یک لی‌آوت نوار کناری انعطاف‌پذیر و واکنش‌گرا ایجاد می‌کند که برای برنامه‌های وب با مخاطبان جهانی که ممکن است طول زبان‌های مختلفی در منوهای ناوبری داشته باشند، مناسب است.

تابع fit-content(): اندازه‌گیری مبتنی بر محتوای محدود شده

تابع fit-content() شبیه به auto است، اما به شما امکان می‌دهد حداکثر اندازه را برای ترک مشخص کنید. ترک به اندازه‌ای که محتوای خود را جا دهد اندازه‌گیری می‌شود، اما هرگز از طول مشخص شده تجاوز نخواهد کرد.

کاربرد پایه

            .grid-container {
  display: grid;
  grid-template-columns: fit-content(300px) 1fr;
}

            

              
                Copy
              
            
          

در این مثال، ستون اول برای تطابق با محتوای خود اندازه‌گیری می‌شود، اما هرگز عریض‌تر از 300 پیکسل نخواهد بود. اگر محتوا به بیش از 300 پیکسل نیاز داشته باشد، عرض ستون 300 پیکسل خواهد بود و محتوا ممکن است بسته به خصوصیات CSS `overflow` و `word-wrap` سرریز یا شکسته شود.

مثال: یک گروه دکمه

گروهی از دکمه‌ها را تصور کنید که می‌خواهید در یک ردیف نمایش دهید. شما می‌خواهید دکمه‌ها به اندازه‌ای باشند که محتوای خود را جا دهند، اما نمی‌خواهید بیش از حد عریض شده و فضای زیادی را اشغال کنند.

            .button-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, fit-content(150px));
  grid-gap: 10px;
}

.button {
  /* Button styling */
}

            

              
                Copy
              
            
          

در اینجا، هر ستون دکمه به اندازه‌ای خواهد بود که متن دکمه را جا دهد، اما هرگز عریض‌تر از 150 پیکسل نخواهد بود. اگر متن طولانی‌تر از 150 پیکسل باشد، دکمه متن را خواهد شکست. این کار یک گروه دکمه ایجاد می‌کند که با طول‌های مختلف متن دکمه سازگار است و در عین حال ظاهر بصری ثابتی را حفظ می‌کند.

ترکیب توابع ترک برای لی‌آوت‌های پیچیده

قدرت واقعی توابع ترک CSS Grid از ترکیب آن‌ها برای ایجاد لی‌آوت‌های پیچیده و واکنش‌گرا ناشی می‌شود. در اینجا چند مثال آورده شده است:

مثال 1: یک لی‌آوت سه ستونه با ستون میانی انعطاف‌پذیر

            .grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 150px;
}

            

              
                Copy
              
            
          

این یک لی‌آوت سه ستونه ایجاد می‌کند که در آن ستون اول 200 پیکسل عرض دارد، ستون دوم فضای باقیمانده را اشغال می‌کند و ستون سوم 150 پیکسل عرض دارد.

مثال 2: یک لی‌آوت با حداقل عرض برای نوار کناری

            .grid-container {
  display: grid;
  grid-template-columns: minmax(250px, auto) 1fr;
}

            

              
                Copy
              
            
          

این یک لی‌آوت دو ستونه ایجاد می‌کند که در آن ستون اول (نوار کناری) حداقل عرض 250 پیکسل دارد و برای جا دادن محتوای خود گسترش می‌یابد، در حالی که ستون دوم فضای باقیمانده را اشغال می‌کند.

مثال 3: ستون‌های با ارتفاع برابر با محتوای پویا

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(100px, auto); /* ensure all rows are at least 100px high */
}

            

              
                Copy
              
            
          

این کد سه ستون با عرض مساوی ایجاد می‌کند. استفاده از grid-auto-rows: minmax(100px, auto) تضمین می‌کند که تمام سطرها حداقل 100 پیکسل ارتفاع داشته باشند و به طور خودکار ارتفاع خود را برای جای دادن محتوای درون هر آیتم گرید تنظیم می‌کنند و هماهنگی بصری را در سراسر گرید حفظ می‌کنند.

بهترین شیوه‌ها برای استفاده از توابع ترک CSS Grid

• از fr برای اندازه‌گیری انعطاف‌پذیر استفاده کنید: واحد fr برای توزیع متناسب فضای موجود بین ترک‌های گرید ایده‌آل است.
• از minmax() برای محدوده‌های اندازه استفاده کنید: تابع minmax() به شما امکان می‌دهد حداقل و حداکثر اندازه را برای یک ترک تعریف کنید، و تضمین می‌کند که با طول‌های مختلف محتوا بدون سرریز شدن یا کشیدگی بیش از حد سازگار شود.
• از auto برای اندازه‌گیری مبتنی بر محتوا استفاده کنید: کلمه کلیدی auto زمانی مفید است که می‌خواهید یک ترک فقط به اندازه‌ای بزرگ باشد که محتوای خود را در بر گیرد.
• از fit-content() برای اندازه‌گیری مبتنی بر محتوای محدود شده استفاده کنید: تابع fit-content() به شما امکان می‌دهد حداکثر اندازه را برای ترکی که به اندازه محتوای خود است، مشخص کنید.
• توابع ترک را برای لی‌آوت‌های پیچیده ترکیب کنید: قدرت واقعی توابع ترک CSS Grid از ترکیب آن‌ها برای ایجاد لی‌آوت‌های پیچیده و واکنش‌گرا ناشی می‌شود.
• تأثیر بر دسترسی‌پذیری را در نظر بگیرید: اطمینان حاصل کنید که لی‌آوت‌های شما برای کاربران دارای معلولیت قابل دسترس هستند. از HTML معنایی استفاده کنید و محتوای جایگزین برای تصاویر و سایر عناصر غیر متنی فراهم کنید.
• روی دستگاه‌ها و مرورگرهای مختلف تست کنید: لی‌آوت‌های خود را به طور کامل روی انواع دستگاه‌ها و مرورگرها آزمایش کنید تا از رندر صحیح و واکنش‌گرا بودن آن‌ها اطمینان حاصل کنید.

نتیجه‌گیری

توابع ترک CSS Grid برای ایجاد لی‌آوت‌های پویا و واکنش‌گرا که با اندازه‌های مختلف صفحه و نیازهای محتوایی سازگار می‌شوند، ضروری هستند. با تسلط بر واحد fr، تابع minmax()، کلمه کلیدی auto و تابع fit-content()، می‌توانید لی‌آوت‌های انعطاف‌پذیر و قدرتمندی ایجاد کنید که تجربه کاربری عالی را در تمام دستگاه‌ها فراهم می‌کنند. پذیرش این تکنیک‌ها شما را قادر می‌سازد تا برنامه‌های وب قوی‌تر، سازگارتر و در سطح جهانی قابل دسترس‌تری بسازید.