حاوی شبکه CSS
- صفحه قبل مодуل شبکهبندی CSS
- صفحه بعدی پروژه شبکه CSS
گرید باندھی
اگر آپ کا HTML علامت گرید باندھی کے طور پر کام کرنا چاہتے ہیں تو آپ کو: display یہ اپریشن 'grid' یا 'inline-grid' کا مقصد رکھتا ہے。
گرید کی باندھی گرید پروجیکٹس سے مل جاسکتی ہے جو گرید کی ستونوں اور سطر میں رکھی جاتی ہیں。
grid-template-columns کی اپریشن
grid-template-columns یہ اپریشن گرید کی ستونوں کی تعداد کو طے کردار کرسکتا ہے اور کسی ستون کی چوڑائی کو طے کردار کرسکتا ہے。
یہ کا رقمیات، خالی دوسرے سے منعطف سیتا ہوا فہرست ہوتا ہے، جس میں ہر رقمیات کو ملاحظت کیا جاتا ہے تاکہ کسی ستون کی چوڑائی کو طے کیا جائے:
اگر آپ کے پاس 4 ستونوں والا گرید رکھنا ہے تو اس 4 ستونوں کی چوڑائی کو طے کردار کرسکتا ہیں؛ اگر تمام ستونوں کو ایک سائز میں چوڑائی دینی ہے تو اس کو 'auto' میں رکھنا چاہئیے。
مثال
یہ 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 یہ اپریشن باندھی میں پورا گرید کو جگہ دینے کے لئے استعمال کیا جاتا ہے。
توجه:گرید کی کل عرض کوئی باندھی کی عرض سے کم ہو، تاکہ 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;
}
- صفحه قبل مодуل شبکهبندی CSS
- صفحه بعدی پروژه شبکه CSS
