ستون‌های الگوی CSS Grid: تسلط بر تعریف ستون‌های پویا

CSS Grid انقلابی در طرح‌بندی وب ایجاد کرده و کنترل و انعطاف‌پذیری بی‌سابقه‌ای را ارائه می‌دهد. یکی از ویژگی‌های اصلی آن، خاصیت grid-template-columns است که به شما امکان می‌دهد ساختار ستون‌های گرید خود را تعریف کنید. درک نحوه استفاده مؤثر از این خاصیت برای ایجاد طرح‌بندی‌های واکنش‌گرا و پویا که با اندازه‌های مختلف صفحه و نیازهای محتوا سازگار می‌شوند، حیاتی است.

درک grid-template-columns

خاصیت grid-template-columns تعداد و عرض ستون‌ها را در یک کانتینر گرید مشخص می‌کند. شما می‌توانید اندازه‌های ستون را با استفاده از واحدهای مختلفی تعریف کنید، از جمله:

• طول‌های ثابت: پیکسل (px)، پوینت (pt)، سانتی‌متر (cm)، میلی‌متر (mm)، اینچ (in)
• طول‌های نسبی: Ems (em)، rems (rem)، عرض ویوپورت (vw)، ارتفاع ویوپورت (vh)
• واحد کسری: fr (نشان‌دهنده کسری از فضای موجود در کانتینر گرید است)
• کلمات کلیدی: auto، min-content، max-content، minmax()

بیایید با یک مثال ساده شروع کنیم:

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

            

              
                Copy
              
            
          

این کد یک گرید با سه ستون ایجاد می‌کند. ستون‌های اول و سوم هر کدام ۱/۴ از فضای موجود را اشغال می‌کنند، در حالی که ستون دوم ۲/۴ (یا ۱/۲) از فضا را اشغال می‌کند.

واحدهای ثابت در مقابل واحدهای نسبی

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

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

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

            

              
                Copy
              
            
          

واحدهای نسبی (Ems، Rems، واحدهای ویوپورت): این واحدها انعطاف‌پذیرتر هستند. em و rem نسبت به اندازه فونت هستند و به عناصر اجازه می‌دهند تا با اندازه متن برای دسترسی بهتر مقیاس‌پذیر شوند. vw و vh نسبت به اندازه ویوپورت هستند و طرح‌بندی‌هایی را امکان‌پذیر می‌کنند که با ابعاد مختلف صفحه سازگار شوند. مثال:

            .grid-container {
  display: grid;
  grid-template-columns: 10vw 20vw 70vw;
}

            

              
                Copy
              
            
          

واحد کسری (fr)

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

این مثال را در نظر بگیرید:

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

            

              
                Copy
              
            
          

در اینجا، ستون اول ۱۰۰ پیکسل عرض دارد. فضای باقیمانده سپس بین ستون‌های دوم و سوم تقسیم می‌شود، به طوری که ستون دوم ۱/۳ از فضای باقیمانده و ستون سوم ۲/۳ آن را اشغال می‌کند.

کلمات کلیدی: auto، min-content، max-content

CSS Grid چندین کلمه کلیدی برای تعریف عرض ستون‌ها ارائه می‌دهد:

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

مثال با استفاده از auto:

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

            

              
                Copy
              
            
          

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

مثال با استفاده از min-content و max-content:

            .grid-container {
  display: grid;
  grid-template-columns: min-content max-content;
}

            

              
                Copy
              
            
          

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

تابع minmax()

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

سینتکس:

            minmax(min, max)

            

              
                Copy
              
            
          

مثال:

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

            

              
                Copy
              
            
          

در این مثال، ستون‌های اول و سوم به اندازه ثابت ۱۰۰ پیکسل هستند. ستون دوم دارای حداقل عرض ۲۰۰ پیکسل و حداکثر عرضی است که به آن اجازه می‌دهد گسترش یافته و فضای باقیمانده را پر کند. اگر فضای باقیمانده کمتر از ۲۰۰ پیکسل باشد، ستون دوم ۲۰۰ پیکسل عرض خواهد داشت و ممکن است گرید سرریز شود یا ستون‌ها به طور متناسب کوچک شوند (بسته به محدودیت‌های کلی گرید).

تکرار تعاریف ستون با repeat()

تابع repeat() تعریف الگوهای ستونی تکراری را ساده می‌کند. این تابع دو آرگومان می‌گیرد: تعداد دفعات تکرار الگو و خود الگو.

سینتکس:

            repeat(number, pattern)

            

              
                Copy
              
            
          

مثال:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

            

              
                Copy
              
            
          

این کد معادل است با:

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

            

              
                Copy
              
            
          

شما همچنین می‌توانید repeat() را با واحدهای دیگر و کلمات کلیدی ترکیب کنید:

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

            

              
                Copy
              
            
          

این یک گرید با ساختار ستونی زیر ایجاد می‌کند: 100px، 1fr، 200px، 1fr، 200px، auto.

استفاده از auto-fill و auto-fit با repeat()

کلمات کلیدی auto-fill و auto-fit که با repeat() استفاده می‌شوند، ستون‌های پویایی ایجاد می‌کنند که به طور خودکار با فضای موجود تنظیم می‌شوند. آنها به ویژه برای ایجاد گالری‌ها یا لیست‌های واکنش‌گرا مفید هستند.

• auto-fill: تا جایی که ممکن است ستون ایجاد می‌کند بدون اینکه از کانتینر سرریز شود، حتی اگر برخی ستون‌ها خالی باشند.
• auto-fit: شبیه به auto-fill است، اما ستون‌های خالی را به عرض ۰ جمع می‌کند و به ستون‌های دیگر اجازه می‌دهد گسترش یافته و فضای موجود را پر کنند.

مثال با استفاده از auto-fill:

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

            

              
                Copy
              
            
          

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

مثال با استفاده از auto-fit:

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

            

              
                Copy
              
            
          

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

خطوط گرید نام‌گذاری شده

شما می‌توانید به خطوط گرید نام‌هایی اختصاص دهید که می‌تواند کد شما را خواناتر و قابل نگهداری‌تر کند. این کار با قرار دادن نام‌ها در داخل براکت‌های مربع هنگام تعریف خاصیت grid-template-columns (و grid-template-rows) انجام می‌شود.

مثال:

            .grid-container {
  display: grid;
  grid-template-columns: [col-start] 1fr [col-2] 2fr [col-end];
}

            

              
                Copy
              
            
          

در این مثال، ما خط گرید اول را col-start، خط دوم را col-2 و خط سوم را col-end نام‌گذاری کرده‌ایم. سپس می‌توانید از این نام‌ها هنگام قرار دادن آیتم‌های گرید با استفاده از خواص grid-column-start، grid-column-end، grid-row-start و grid-row-end استفاده کنید.

            .grid-item {
  grid-column-start: col-start;
  grid-column-end: col-2;
}

            

              
                Copy
              
            
          

این آیتم گرید را از خط col-start شروع کرده و در خط col-2 به پایان می‌رساند.

مثال‌های عملی و موارد استفاده

در اینجا چند مثال عملی از نحوه استفاده از grid-template-columns در سناریوهای دنیای واقعی آورده شده است:

۱. نوار ناوبری واکنش‌گرا

یک نوار ناوبری که با اندازه‌های مختلف صفحه سازگار می‌شود:

            .navbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 10px;
}

.logo {
  /* Styles for logo */
}

.nav-links {
  display: flex;
  justify-content: space-around;
}

.search-bar {
  /* Styles for search bar */
}

@media (max-width: 768px) {
  .navbar {
    grid-template-columns: 1fr;
  }
  .nav-links {
    flex-direction: column;
  }
}

            

              
                Copy
              
            
          

در این مثال، نوار ناوبری سه ستون دارد: یکی برای لوگو (auto)، یکی برای لینک‌های ناوبری (1fr) و یکی برای نوار جستجو (auto). در صفحات کوچکتر، گرید به یک ستون واحد جمع می‌شود و لینک‌های ناوبری به صورت عمودی روی هم قرار می‌گیرند.

۲. گالری تصاویر

یک گالری تصاویر واکنش‌گرا با تعداد ستون‌های انعطاف‌پذیر:

            .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.gallery-item {
  /* Styles for gallery items */
}

            

              
                Copy
              
            
          

این یک گالری تصاویر با ستون‌هایی ایجاد می‌کند که حداقل ۲۵۰ پیکسل عرض دارند و برای پر کردن فضای موجود گسترش می‌یابند. کلمه کلیدی auto-fit تضمین می‌کند که ستون‌های خالی جمع شوند و تصاویر به خوبی کانتینر را پر کنند.

۳. طرح‌بندی دو ستونی با نوار کناری

یک طرح‌بندی کلاسیک دو ستونی با یک نوار کناری با عرض ثابت و یک ناحیه محتوای اصلی انعطاف‌پذیر:

            .container {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
}

.sidebar {
  /* Styles for sidebar */
}

.main-content {
  /* Styles for main content */
}

            

              
                Copy
              
            
          

نوار کناری عرض ثابتی برابر با ۲۵۰ پیکسل دارد، در حالی که ناحیه محتوای اصلی فضای باقیمانده را اشغال می‌کند.

۴. طرح‌بندی‌های پیچیده با نواحی گرید نام‌گذاری شده

برای طرح‌بندی‌های پیچیده‌تر، می‌توانید grid-template-columns را با grid-template-areas ترکیب کنید تا نواحی مشخصی از گرید خود را تعریف کنید.

            .container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
}

.header {
  grid-area: header;
  /* Styles for header */
}

.sidebar {
  grid-area: sidebar;
  /* Styles for sidebar */
}

.main {
  grid-area: main;
  /* Styles for main content */
}

.footer {
  grid-area: footer;
  /* Styles for footer */
}

            

              
                Copy
              
            
          

این مثال یک گرید با سربرگ، نوار کناری، ناحیه محتوای اصلی و پاورقی تعریف می‌کند. خاصیت grid-template-areas نواحی مشخصی را به این عناصر اختصاص می‌دهد. تعاریف ستون از خطوط گرید نام‌گذاری شده برای بهبود خوانایی استفاده می‌کنند.

ملاحظات دسترسی‌پذیری

هنگام استفاده از CSS Grid، در نظر گرفتن دسترسی‌پذیری بسیار مهم است. اطمینان حاصل کنید که طرح‌بندی‌های شما برای کاربران دارای معلولیت منطقی و قابل پیمایش هستند. از عناصر HTML معنایی استفاده کنید و ویژگی‌های ARIA مناسب را برای افزایش دسترسی‌پذیری فراهم کنید. به عنوان مثال، به ترتیب تب (tab order) توجه داشته باشید و اطمینان حاصل کنید که محتوا به ترتیب منطقی ارائه می‌شود حتی اگر به صورت بصری با Grid بازآرایی شده باشد.

بهینه‌سازی عملکرد

CSS Grid به طور کلی عملکرد خوبی دارد، اما کارهایی وجود دارد که می‌توانید برای بهینه‌سازی عملکرد انجام دهید:

• از تودرتوی بیش از حد خودداری کنید: ساختارهای گرید خود را تا حد امکان ساده نگه دارید تا سربار رندر کاهش یابد.
• از شتاب‌دهنده سخت‌افزاری استفاده کنید: از خواص CSS که شتاب‌دهنده سخت‌افزاری را فعال می‌کنند (مانند transform: translateZ(0)) برای بهبود عملکرد رندر استفاده کنید.
• تصاویر را بهینه کنید: اطمینان حاصل کنید که تصاویر شما به درستی بهینه شده‌اند تا زمان بارگذاری صفحه کاهش یابد.
• روی دستگاه‌های مختلف تست کنید: طرح‌بندی‌های خود را به طور کامل روی دستگاه‌ها و مرورگرهای مختلف تست کنید تا هرگونه مشکل عملکردی را شناسایی و برطرف کنید.

اشکال‌زدایی طرح‌بندی‌های CSS Grid

مرورگرهای مدرن ابزارهای توسعه‌دهنده عالی برای اشکال‌زدایی طرح‌بندی‌های CSS Grid ارائه می‌دهند. در Chrome، Firefox و Edge، می‌توانید کانتینر گرید را بازرسی کرده و خطوط گرید، عرض ستون‌ها و ارتفاع ردیف‌ها را به صورت بصری مشاهده کنید. این ابزارها می‌توانند به شما در شناسایی و حل سریع مشکلات طرح‌بندی کمک کنند.

بهترین شیوه‌ها برای استفاده از grid-template-columns

• طرح‌بندی خود را برنامه‌ریزی کنید: قبل از شروع کدنویسی، طرح‌بندی گرید خود را با دقت برنامه‌ریزی کرده و نواحی کلیدی و اندازه‌های مورد نظر آنها را مشخص کنید.
• از واحدهای نسبی استفاده کنید: برای ایجاد طرح‌بندی‌های واکنش‌گرا، واحدهای نسبی مانند fr، em و vw را ترجیح دهید.
• از minmax() استفاده کنید: از تابع minmax() برای تعریف اندازه‌های ستون انعطاف‌پذیر که با محتوا و اندازه‌های مختلف صفحه سازگار می‌شوند، استفاده کنید.
• از repeat() استفاده کنید: از تابع repeat() برای ساده‌سازی الگوهای ستونی تکراری استفاده کنید.
• دسترسی‌پذیری را در نظر بگیرید: اطمینان حاصل کنید که طرح‌بندی‌های شما برای همه کاربران قابل دسترس هستند.
• به طور کامل تست کنید: طرح‌بندی‌های خود را روی دستگاه‌ها و مرورگرهای مختلف تست کنید تا اطمینان حاصل شود که مطابق انتظار کار می‌کنند.
• کد تمیز و قابل نگهداری بنویسید: از خطوط گرید نام‌گذاری شده و کامنت‌ها برای خواناتر و قابل نگهداری‌تر کردن کد خود استفاده کنید.

نتیجه‌گیری

خاصیت grid-template-columns ابزاری قدرتمند برای ایجاد طرح‌بندی‌های وب انعطاف‌پذیر، واکنش‌گرا و پویا است. با تسلط بر واحدهای مختلف، کلمات کلیدی و توابع موجود، می‌توانید پتانسیل کامل CSS Grid را آزاد کرده و طراحی‌های وب خیره‌کننده‌ای ایجاد کنید که با هر اندازه صفحه و نیاز محتوایی سازگار باشند. به یاد داشته باشید که طرح‌بندی‌های خود را با دقت برنامه‌ریزی کنید، از واحدهای نسبی استفاده کنید، دسترسی‌پذیری را در نظر بگیرید و به طور کامل تست کنید تا نتایج بهینه را تضمین کنید. با پیروی از این بهترین شیوه‌ها، می‌توانید وب‌سایت‌های مدرن و کاربرپسندی ایجاد کنید که تجربه عالی برای همه کاربران فراهم می‌کنند.

منابع بیشتر

• مستندات وب MDN: grid-template-columns
• CSS-Tricks: راهنمای کامل CSS Grid
• Grid by Example