امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5

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

#1
ویژگی grid-area در CSS
با استفاده از ویژگی grid-area در CSS میتوان هم یک نام را برای آیتم مشخص کرد ( نمونه در مثال شماره ۲ ) و هم بطور کلی میتوان ویژگی های زیر را که همگی مربوط به آیتم های یک گرید یا Grid می باشند، بصورت خلاصه نوشت :

grid-row-start | سطر شروع آیتم
grid-column-start | ستون شروع آیتم
grid-row-end | سطر پایان دهنده آیتم
grid-column-end | ستون پایان دهنده آیتم
برای اینکه بهتر متوجه شوید ، لاین یا خط یا نقطه شروع و پایان یک آیتم به چه شکل می باشد لطفا به تصویر زیر توجه نمایید :

آموزش ویژگی grid-area در CSS 1

مثال شماره ۱ : آیتم شماره ۱ از سطر دوم ( ۲ ) و ستون اول ( ۱ ) شروع میشود، و ۲ تا از سطرها و ۳ تا از ستون هارو باخودش ادغام میکنه.

.item-1 {
grid-area: 2 / 1 / span 2 / span 3;
}
1
2
3
.item-1 {
grid-area: 2 / 1 / span 2 / span 3;
}
امتحان کنید

مثال شماره ۲ : تعریف یک نام دلخواه برای ناحیه یا Area ، و اتصال آن به ویژگی grid-template-areas

کد:
.My-Container {
  display: grid;
  grid-template-areas: 'free-learn free-learn free-learn free-learn free-learn';
}

.item-1 {
  grid-area: free-learn;
}
1
2
3
4
5
6
7
8
.My-Container {
  display: grid;
  grid-template-areas: 'free-learn free-learn free-learn free-learn free-learn';
}

.item-1 {
  grid-area: free-learn;
}
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
ناشناس
پاسخ
 سپاس شده توسط Prometheus ، ᴀʀмɪss
آگهی


[-]
به اشتراک گذاری/بوکمارک (نمایش همه)
google Facebook cloob Twitter
برای ارسال نظر وارد حساب کاربری خود شوید یا ثبت نام کنید
شما جهت ارسال نظر در مطلب نیازمند عضویت در این انجمن هستید
ایجاد حساب کاربری
ساخت یک حساب کاربری شخصی در انجمن ما. این کار بسیار آسان است!
یا
ورود
از قبل حساب کاربری دارید? از اینجا وارد شوید.

موضوعات مرتبط با این موضوع...
  آموزش ساخت آیدی در اسکایپ
  آموزش اشتراک V.P.N از طریق هات اسپات گوشی اندروید
  آموزش سئو سایت
  آموزش جامع تولید محتوا در اینستاگرام
  آموزش ساخت اکانت تیک تاک
Thumbsdown آموزش روش خالی کردن Cache گوشى،تلگرام_فعال سازی امضای پیام تلگرام
  آموزش ریست اپل
  آموزش مخفی کردن آخرین بازدید اینستاگرام
  آموزش تگ tr در HTML
  آموزش تگ thead در HTML

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان