٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش کانتینر شبکه CSS

ظرف توری برای اینکه یک عنصر HTML به عنوان یک ظرف شبکه رفتار کند ، باید displayویژگی را روی gridیا تنظیم کنید inline-grid. ظروف توری شامل موارد شبکه ای است که درون ستون ها و ردیف ها قرار می گیرد. ویژگی ستون های…

محمد یوسفی

16 جولای 2021

ظرف توری

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

ظروف توری شامل موارد شبکه ای است که درون ستون ها و ردیف ها قرار می گیرد.


ویژگی ستون های شبکه

این grid-template-columnsویژگی تعداد ستون ها را در طرح شبکه شما تعریف می کند و می تواند عرض هر ستون را تعریف کند.

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

اگر می خواهید طرح شبکه شما دارای 4 ستون باشد ، عرض 4 ستون را تعیین کنید یا اگر تمام ستون ها باید عرض یکسان داشته باشند ، “خودکار” را تعیین کنید.

مثال

شبکه ای با 4 ستون ایجاد کنید:

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

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

از این grid-template-columnsویژگی می توان برای تعیین اندازه (عرض) ستون ها نیز استفاده کرد.

مثال

برای 4 ستون اندازه تعیین کنید:

.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باشد تا خاصیت اثر بگذارد.

مثال

.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ویژگی برای تراز کردن عمودی کل شبکه در داخل ظرف استفاده می شود.

توجه: ارتفاع کل شبکه باید از ارتفاع ظرف کمتر 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;
}

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها