کانتینر گرید (Grid Container) در CSS
در ماژول چیدمان «گرید (Grid)»، «کانتینر گرید» عنصری است که آیتم ها را در ستون ها و سطرها سامان می دهد. هر فرزند مستقیم، به صورت خودکار «آیتم گرید» می شود. برای فعال سازی، مقدار ویژگی «display» را روی «grid» یا «inline-grid» بگذارید.
تعریف کانتینر گرید و ترک ها (Tracks)
کانتینر با grid-template-columns و grid-template-rows ترک های عمودی و افقی را می سازد. هر ترک فضای بین دو «خط گرید» است و اندازه ستون ها/سطرها را تعیین می کند.
نکته: اگر تعداد آیتم ها از ظرفیت ستون ها بیشتر شود، ردیف تازه به طور خودکار اضافه می شود.
grid-template-columns؛ تعیین تعداد و عرض ستون ها
برای ساخت چهار ستون هم عرض از مقدارهای «auto» استفاده کنید.
.grid-container { display: grid; grid-template-columns: auto auto auto auto; }همچنین می توانید ترکیبی از مقادیر ثابت و خودکار بدهید.
.grid-container { display: grid; grid-template-columns: 80px 200px auto 40px; }واحد fr برای تقسیم فضای آزاد
واحد «fr» فضای آزاد را به نسبت های دلخواه تقسیم می کند؛ مثلاً چهار ستون مساوی یا ستونی با دو برابر عرض ستون های دیگر.
.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }.grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr 1fr; }grid-template-rows؛ ارتفاع سطرها
با فهرست مقادیر، ارتفاع هر سطر را مشخص کنید. سطرهای بعدی به صورت پیش فرض «auto» خواهند بود.
.grid-container { display: grid; grid-template-rows: 80px 200px; }تراز افقی با justify-content
وقتی مجموع عرض آیتم ها کمتر از عرض کانتینر باشد، می توانید آن ها را روی محور افقی مرتب کنید؛ مانند space-evenly، space-around، space-between، center، start و end.
.grid-container { display: grid; justify-content: space-evenly; }هشدار: اگر آیتم ها تمام عرض را پر کنند، justify-content اثری نخواهد داشت.
تراز عمودی با align-content
وقتی ارتفاع کل آیتم ها کمتر از ارتفاع کانتینر باشد، با align-content روی محور عمودی تراز کنید؛ مانند center یا space-between.
.grid-container { display: grid; height: 400px; align-content: center; }میان بر place-content
برای تعیین همزمان تراز عمودی و افقی از place-content استفاده کنید؛ با یک مقدار برای هر دو محور یا دو مقدار جداگانه.
.grid-container { display: grid; height: 400px; place-content: center; }.grid-container { display: grid; height: 400px; place-content: end space-between; }مسیر مطالعه بیشتر
برای آشنایی با مرزبندی شبکه، صفحه خطوط گرید را ببینید. اگر تازه شروع کرده اید، بخش معرفی گرید مفید است. همچنین از همین صفحه کانتینر گرید برای مرور سریع استفاده کنید.
منابع بیشتر: MDN: grid-template-columns، MDN: grid-template-rows، MDN: justify-content و MDN: align-content.