نگه‌دارنده Grid

از موتو کد، دانشنامهٔ برنامه‌نویسی


نگه دارنده شبکه (Grid)[ویرایش | ویرایش]

برای اینکه یک عنصر HTML به عنوان نگه‌دارنده شبکه رفتار کند، باید مقدار ویژگی display را برابر با grid یا inline-شبکه تنظیم کنید.[۱]

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

ویژگی grid-template-columns[ویرایش | ویرایش]

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

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

اگر می‌خواهید که چیدمان شبکه شامل ۴ ستون باشد، عرض هر ۴ ستون را مشخص کنید، یا در صورتی که عرض ستون‌ها برابر است از ویژگی "auto" استفاده کنید.

مثال[ویرایش | ویرایش]

یک شبکه با ۴ ستون درست کنید:

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

نکته: اگر بیشتر از ۴ آیتم در یک شبکه چهار ستونه دارید، شبکه به طور خودکار یک سطر جدید برای قرار دادن آیتم‌ها درون آن اضافه خواهد کرد.

همچنین ویژگی grid-template-columns می‌تواند اندازه (عرض) ستون‌ها را نیز مشخص کند.

مثال[ویرایش | ویرایش]

تنظیم اندازه برای ۴ ستون:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

ویژگی grid-template-rows[ویرایش | ویرایش]

ویژگی grid-template-rows ارتفاع هر سطر را مشخص می‌کند.

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

مثال
.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

ویژگی justify-content[ویرایش | ویرایش]

ویژگی justify-content برای تراز کل شبکه درون نگه‌دارنده استفاده می‌شود.

نکته: مجموع عرض شبکه می‌بایست کمتر از عرض نگه‌دارنده باشد تا ویژگی justify-content تأثیر داشته باشد.

مثال
.grid-container {
  display: grid;
  justify-content: space-evenly;
}
مثال
.grid-container {
  display: grid;
  justify-content: space-around;
}
مثال
.grid-container {
  display: grid;
  justify-content: space-between;
}
مثال
.grid-container {
  display: grid;
  justify-content: center;
}
مثال
.grid-container {
  display: grid;
  justify-content: start;
}
مثال
.grid-container {
  display: grid;
  justify-content: end;
}

ویژگی align-content[ویرایش | ویرایش]

ویژگی align-content برای تراز عمودی (vertically) کل شبکه درون نگه‌دارنده استفاده می‌شود.

نکته: ارتفاع کل شبکه می‌بایست از ارتفاع نگه‌دارنده کمتر باشد تا ویژگی align-content تأثیر داشته باشد.

مثال
.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}
مثال
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}
مثال
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}
مثال
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}
مثال
.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}
مثال
.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

منابع آموزشی[ویرایش]