آموزش مقدماتی گرید(Grid) در CSS

امتیاز

(0)

ماژول چینش گرید(Grid) در CSS

ماژول چینش گرید، یک سیستم مبتنی بر گرید را به همراه ردیف ها(rows) و ستون ها(columns) به ما ارائه می دهد. ماژول چینش گرید، به برنامه نویسان امکان می دهد تا به سادگی چینش های وب پیچیده را ایجاد کنند. ماژول چینش گرید، طراحی یک ساختار چینش واکنش گرا را بدون استفاده از شناوری(float) یا موقعیت دهی(positioning) آسان می کند.

مثال شماره 1

امتحان کنید

استفاده گرید(Grid) یا فلکس باکس(Flexbox)

از گرید در CSS برای ایجاد چینش دوبعدی، به همراه ردیف ها(row) و ستون ها(column)، استفاده می شود.

از فلکس باکس در CSS برای ایجاد چینش یک بعدی، به همراه ردیف ها(row) یا ستون ها(column) استفاده می شود.

اجزاء گرید در CSS

یک گرید همواره از موارد زیر تشکیل می شود:

یک ظرف گرید(Grid Container): عنصر والد(ظرف) را مشخص می کند، به طوری که ویژگی display در آن برابر با grid یا inline-grid قرار گرفته باشد.
یک یا چند آیتم گرید(Grid Items): فرزندان مستقیم ظرف گرید، به طور اتوماتیک، بعنوان آیتم های گرید تلقی می شوند.

یک ظرف گرید به همراه پنج آیتم گرید

در زیر، یک ظرف گرید (ناحیه ی آبی) را مشاهده می کنید که حاوی پنج آیتم گرید می باشد.

مثال شماره 1

یک ظرف گرید به همراه پنج آیتم:

 <html>
<head>
<style>
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: dodgerblue;
  padding: 10px;
}
.container div {
  background-color: #f1f1f1;
  border: 1px solid black;
  padding: 10px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

</body>
</html>

امتحان کنید

نکته: در فصل های بعدی، بیشتر در مورد ظرف های گرید و آیتم های گرید توضیح خواهیم داد.

توضیح	ویژگی
کل گرید که در ظرف(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

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

مطلب قبلی: آموزش ظرف گرید(Grid Container) در CSS

نوشتن دیدگاه

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