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

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;
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.