آموزش ظرف گرید(Grid Container) در CSS

امتیاز

(0)

یک ظرف گرید(grid container) می تواند حاوی یک یا چند آیتم گرید(grid item) باشد که در ستون ها و ردیف ها مرتب شده اند. تمام فرزندان مستقیم یک ظرف گرید، به طور اتوماتیک، آیتم های گرید محسوب می شوند. یک عنصر وقتی ظرف گرید محسوب می شود که ویژگی display آن برابر با grid یا inline-grid باشد.

مثال شماره 1

امتحان کنید

استفاده از ویژگی display برای گرید

یک عنصر <div> وقتی که ویژگی display آن برابر با مقدار grid یا inline-grid باشد، یک ظرف گرید(grid container) محسوب می شود.

مثال شماره 2

استفاده از ویژگی و مقدار display: grid برای ایجاد یک ظرف گرید بلوکی(block-level):

.container {
  display: grid;
}

نتیجه:

امتحان کنید

مثال شماره 3

استفاده از دستور display: inline-grid باعث می شود یک ظرف گرید درون خطی(inline grid) ایجاد شود:

.container {
  display: inline-grid;
}

نتیجه:

امتحان کنید

ویژگی های ظرف گرید در CSS

توضیح	ویژگی
کل گرید که در ظرف(container) قرار دارد را به صورت عمودی تراز می کندد(وقتی که سایز کلی گرید کوچکتر از ظرف باشد).	align-content
ترازبندی پیش فرض را برای آیتم های درون یک فلکس باکس(flexbox) یا ظرف گرید، مشخص می کند.	align-items
محتوا را برای یک آیتم گرید خاص در طول محور ستونی(column axis) ترازبندی می کند.	align-self
رفتار نمایشیِ یک عنصر(نوع جعبه ی رندر) را مشخص می کند.	display
شکاف یا فاصله ی بین ستون ها را مشخص می کند.	column-gap
یک ویژگی خلاصه شده برای ویژگی های row-gap و column-gap می باشد.	gap
یک ویژگی خلاصه برای ویژگی های grid-template-rows و grid-template-columns و grid-template-areas و grid-auto-rows و grid-auto-columns و grid-auto-flow می باشد.	grid
یا یک نام برای آیتم گرید را مشخص می کند یا این ویژگی، یک ویژگی خلاصه شده برای ویژگی های grid-row-start و grid-column-start و grid-row-end و grid-column-end می باشد.	grid-area
این ویژگی، یک سایز را برای ستون های درون یک ظرف گرید مشخص می کند.	grid-auto-columns
این ویژگی نحوه ی درج خودکار آیتم های اضافه شده در گرید را مشخص می کند.	grid-auto-flow
این ویژگی یک سایز را برای ردیف های درون یک ظرف گرید مشخص می کند.	grid-auto-rows
یک ویژگی خلاصه شده برای ویژگی های grid-column-start و grid-column-end محسوب می شود.	grid-column
مشخص می کند که آیتم گرید در کجا پایان یابد.	grid-column-end
مشخص می کند که آیتم گرید از کجا شروع شود.	grid-column-start
یک ویژگی خلاصه شده برای ویژگی های grid-row-start و grid-row-end را مشخص می کند.	grid-row
مشخص می کند که آیتم گرید پایان یابد.	grid-row-end
مشخص می کند که آیتم گرید از کجا شروع شود.	grid-row-start
یک ویژگی خلاصه شده برای ویژگی های grid-template-rows و grid-template-columns و grid-areas مشخص می کند.	grid-template
مشخص می کند که چگونه با استفاده از آیتم های گرید نام گذاری شده، ستون ها و ردیف ها را نمایش دهیم.	grid-template-areas
اندازه ستون‌ها و تعداد ستون‌ها را در یک چینش گرید مشخص می‌کند.	grid-template-columns
سایز ردیف ها را در یک چینش گرید مشخص می کند.	grid-template-rows
به طور افقی، کل گرید را در ظرف(container) تراز می کند(وقتی که سایز کلی گرید کوچکتر از ظرف باشد)	justify-content
محتوا را برای یک آیتم گرید خاص در طول محور ردیفی تراز می کند.	justify-self
یک ویژگی خلاصه شده برای ویژگی های align-self و justify-self مشخص می کند.	place-self
یک ویژگی خلاصه شده برای ویژگی های align-content و justify-content را مشخص می کند.	place-content
فاصله ی بین ردیف های گرید را مشخص می کند.	row-gap

تاریخ انتشار : 10 آذر 1404.
تاریخ بروزرسانی : 11 آذر 1404.
بازدید: 32

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.