نگه‌دارنده 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;
}


منابع آموزشی