آموزش ویژگی grid-auto-columns در CSS

[Mohlek]

با استفاده از ویژگی grid-auto-columns در CSS میتوان اندازه ستون های یک گرید را بصورت ضمنی / پایه / پیش فرض تعریف و یا مشخص کرد.

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


مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی grid-auto-columns را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : تنظیم اندازه با استفاده از واحد اندازه گیری پیکسل PX

کد:

.My-Container {
  display: grid;
  grid-template-areas: "f f f f f";
  grid-auto-columns: 50px;
}

مثال شماره ۲ : تنظیم اندازه با استفاده از درصد %

کد:

.My-Container {
  display: grid;
  grid-template-areas: "f f f f f";
  grid-auto-columns: 18%;
}
1
2
3
4
5
.My-Container {
  display: grid;
  grid-template-areas: "f f f f f";
  grid-auto-columns: 18%;
}