گرڈ اور فلیکس باکس کے ساتھ ایک بلاگ بنائیں

Feb 2, 2026
کيسے
Build a blog with Grid and flexbox

آخری دو سے تین سالوں میں لے آؤٹ اور حدوں میں ترتیب منتقل کی گئی ہے. اب کہ یہ جدید تراکیب جدید براؤزرز میں اس طرح کے ایک مستقل نتیجہ ہیں، آپ واقعی اپنے پروڈکشن کوڈ کے لئے ان کا استعمال کر سکتے ہیں. اگر تم سوچ رہے ہو بلاگ شروع کرنے کا طریقہ ، یہ سبق آپ کو ظاہر کرے گا کہ سی ایس ایس گرڈ اور لچکدار باکس ماڈیول کا استعمال کرتے ہوئے ایک معیاری بلاگ سٹائل ترتیب بنانے کے لئے یہ کتنا آسان ہے، AKA Flexbox. آپ کیا چاہتے ہیں کے لئے بہت زیادہ مشکل کام کی طرح آواز؟ ہمارے گائیڈ پر ایک نظر ڈالیں بہترین مفت بلاگنگ پلیٹ فارم یا سب سے اوپر کا انتخاب کریں ویب سائٹ بلڈر . ایک ٹیم کے ساتھ کام کرنا؟ بہترین تعینات کلاؤڈ اسٹوریج عمل کو ہموار رکھنے کے لئے.

سب سے پہلے جلدی HTML کی بنیادی باتوں پر پڑھتے ہیں اور کیوں کہ سیمنٹ کوڈ کی کوشش کرنے اور لکھنے کے لئے یہ اچھا کیوں ہے.

ڈیسک ٹاپ اور موبائل سے زیادہ

کیا آپ نے سفاری اور فائر فاکس پر ریڈر موڈ کو دیکھا ہے؟ یہ ایڈریس بار میں ایک آئکن ہے جو قطع نظر کاغذ کی طرح تھوڑا سا لگ رہا ہے. یہ آپ کو فراہم کرے گا ویب سائٹ کی ترتیب ایک پریشانی سے آزاد، ننگی ہڈیوں کے موڈ میں، بلکہ ایپل گھڑی کے استعمال جیسے آلات جیسے. زیادہ سے زیادہ آلات ویب مواد تک رسائی اور نمائش کر رہے ہیں - ممکنہ طور پر کرسمس کا بڑا ہٹ ایمیزون گونج کی طرح انٹرایکٹو اسپیکر تھا.

ذہن میں ان کے ساتھ، اور آپ کی سائٹ کی ضرورت سکرین قارئین پر کام کرنے کی ضرورت ہے اور اس طرح، آپ کے صفحے کی ساخت اہم ہے. اگر آپ صرف استعمال کرتے ہیں & lt؛ div & gt؛ آپ کے تمام کنٹینرز اور یہاں تک کہ بٹنوں کے لئے اس کے بعد آپ کے کوڈ کو انجام دینے والے آلات کو معلوم نہیں ہوگا کہ سیاق و سباق کیا ہے، اور اس طرح کسی بھی مقامی فعالیت یا خصوصیات میں سے کسی کو استعمال نہیں کرسکتا.

01. بنیادی صفحہ ترتیب شروع کریں

ہم نیویگیشن، ایک ہیرو بلاک، اہم مضمون، نمایاں آرٹیکل بلاکس اور فوٹر کے ساتھ ایک ہیڈر شامل کرنے کے لئے ایک بنیادی ویب پیج کی تعمیر کرنے جا رہے ہیں. یہ خیال بہت سے دیکھنا ہے ذمہ دار ویب ڈیزائن ہم ذرائع ابلاغ کے سوالات یا کسی بھی معاون جاوا اسکرپٹ کو استعمال کرنے کے بغیر عمل درآمد کرسکتے ہیں. آپ دیکھ سکتے ہیں کہ صفحے کے ایچ ٹی ایم ایل ایچ ٹی ایم ایل 5 ٹیگ کا استعمال کرتے ہوئے مختلف حصوں میں تقسیم کیا جاتا ہے. ہم ان کو بھی کلاس میں شامل کرتے ہیں، کیونکہ پرانے براؤزرز کو یہ معلوم نہیں ہوگا کہ وہ کیا ہیں اور انہیں ایک ڈوی کے طور پر فراہم کرتے ہیں. چلو صفحے کے سب سے اوپر شروع کریں اور اپنے راستے سے کام کریں. تاہم آپ کی سائٹ بنیادی یا پیچیدہ، اس کے بارے میں سوچنے کا بھی وقت ہے ویب میزبانی سروس آپ کے لئے صحیح ہے.

02. ایک سائٹ ہیڈر کی تعمیر

Build a blog with Grid and flexbox: Site header

آپ کو اس ہیڈر کے لئے کسی بھی چھڑیوں یا کنٹینرز کی ضرورت نہیں ہوگی

سائٹ کے ہیڈر نیویگیشن کے لئے علامت (لوگو) اور ایک غیر ترتیب شدہ فہرست پر مشتمل ہے. ہمیں کسی بھی چھڑیوں یا کنٹینرز کو ایک ہی لائن میں بائیں اور نیویگیشن میں علامت (لوگو) کے ساتھ اسے باہر نکالنے کی ضرورت نہیں ہے. 

 & lt؛ ہیڈر کلاس = "ہیڈر" اور جی ٹی؛

& lt؛ img src = "تصاویر / logo.png" / & gt؛
& lt؛ nav & gt؛
& lt؛ ul class = "nav" & gt؛
& lt؛ لی اور جی ٹی؛ & lt؛ ایک href = "#"
کلاس = "فعال" اور جی ٹی؛ ہوم & lt؛ / & gt؛ & lt؛ / li & gt؛
& lt؛ لی & gt؛ & lt؛ a href = "#" & gt؛ کے بارے میں & lt؛ / & gt؛ & lt؛ / li & gt؛
& lt؛ لی & gt؛ & lt؛ ایک href = "#" & gt؛ کتوں اور ایل ٹی؛ / A & GT؛ & lt؛ / li & gt؛
& lt؛ لی اور جی ٹی؛ & lt؛ ایک href = "#" & gt؛ رابطہ & lt؛ / & gt؛ & lt؛ / li & gt؛
& lt؛ / ul & gt؛
& lt؛ / nav & gt؛
& lt؛ / ہیڈر اور جی ٹی؛

03. FR یونٹ کا استعمال کریں

ہم نے ہیڈر کو گرڈ کو ظاہر کرنے کے لئے مقرر کیا، پھر استعمال کریں 'حاصل ٹیمپلیٹ کالم' ہیڈر میں دو کالم قائم کرنے کے لئے. ہم استعمال کرتے ہیں فریم یہاں یونٹ، جو ایک جزوی یونٹ ہے - 1fr کنٹینر میں دستیاب جگہ کے برابر ہوگا. اس مثال میں ہم نیویگیشن کو تھوڑا سا چھوٹا سا علاقہ بھرنے کے لئے دے رہے ہیں. 

 ہیڈر {
ڈسپلے: گرڈ؛
گرڈ ٹیمپلیٹ-کالم: 1.5fr 1fr؛
سیدھا اشیاء: مرکز؛
}

04. سائٹ نیویگیشن شامل کریں

اب ہم مینو اشیاء کی فہرست کو نشانہ بناتے ہیں. پھر ہم بدلتے ہیں & lt؛ UL & GT؛ ایک گرڈ کنٹینر میں اور اشیاء کو کالموں میں آٹولیٹ کے اندر اندر بتائیں. یہاں ہم استعمال کرتے ہیں Minmax. اس بات کو یقینی بنانے کے لئے کہ کالم 100px سے کم نہیں ہوسکتی ہیں، لیکن اگر جگہ بڑی ہے تو پھر وہ ہر ایک کو 1fr کے طور پر اشتراک کر سکتے ہیں. 

 .NAV {
ڈسپلے: گرڈ؛
گرڈ ٹیمپلیٹ کالم: دوبارہ دہرائیں (آٹو فٹ، منی میکس (100px، 1FR)؛
گرڈ خلا: 10px؛
سیدھا اشیاء: مرکز؛
}

05. ہیرو بلاک بنائیں

Build a blog with Grid and flexbox: Hero block

ہیرو ٹیکسٹ سینٹرنگ سی ایس ایس گرڈ یا فلیکس کے ساتھ بہت آسان ہے

صفحے کا اگلے حصہ اہم ہیرو بلاک ہے. روایتی طور پر عمودی طور پر ایک کنٹینر میں متن کے مرکز میں تمام قسم کے کام کے ارد گرد کی ضرورت ہوتی ہے. سی ایس ایس گرڈ یا فلیکس کا استعمال کرتے ہوئے، یہ بہت آسان ہے. 

 اور ایل ٹی؛ آرٹیکل اور جی ٹی؛
& lt؛ سیکشن کلاس = "ہیرو" اور جی ٹی؛
& lt؛ h1 & gt؛ & lt؛ / h1 & gt؛
& lt؛ p & gt؛ & lt؛ / p & gt؛
& lt؛ a href = "" & gt؛ & lt؛ / a & gt؛
& lt؛ / سیکشن اور GT؛
& lt؛ / آرٹیکل اور جی ٹی؛

06. مرکز میں سیدھا

دو محوروں پر علیحدگی سی ایس ایس گرڈ کی روٹی اور مکھن کا ایک حصہ ہے. یہاں، ہم ہیرو کنٹینر کو گرڈ کنٹینر میں تبدیل کر سکتے ہیں اور پھر استعمال کرتے ہیں سیدھ مواد (بائیں طرف دائیں) اور مستحق مواد (سب سے اوپر نیچے) مرکز میں پوزیشن میں. ہم استعمال کر رہے ہیں VH. یہاں یونٹ، جس میں ہیرو بلاک کا 50٪ نقطہ نظر کی اونچائی کا بلاک کرے گا. 

 .ہریں {
کم از کم: 50vh؛
ڈسپلے: گرڈ؛
جائزی اشیاء: مرکز؛
سیدھ مواد: مرکز؛
جائز - مواد: مرکز؛
}

07. اہم مواد سیکشن بنائیں

اہم مضمون میں بھی ایک بلاک ہے جس میں مزید پڑھنے پر مشتمل ہے. ذرائع ابلاغ کے سوال کے استعمال کے بغیر اس ذمہ دار بنانے کے لئے، ہم اس کی زیادہ سے زیادہ خصوصیات بنانے کے لئے FlexBox پر سوئچ کر سکتے ہیں. 

 & lt؛ آرٹیکل کلاس = "مین مواد" اور جی ٹی؛
& lt؛ سیکشن / & gt؛
& lt؛ / سیکشن اور GT؛
& lt؛ اس کے علاوہ / & gt؛
& lt؛ / آرٹیکل اور جی ٹی؛

08. دو کالم کا منظر شامل کریں

ایک فلیکس کنٹینر میں مضمون مقرر کریں. اس بات کا یقین کرنے کے لئے بائیں اور دائیں طرف تھوڑا سا بھرتی شامل کریں اس بات کا یقین کرنے کے لئے کہ متن کی پیمائش بہت طویل نہیں ہوتی. فلیکس سمت قطار ہے لہذا اس کے اندر اندر سیکشن اور الگ الگ ایک دوسرے کے ساتھ بیٹھے گا. مواد اس کے درمیان خلا میں جائز ہے تاکہ متن الگ نہ ہو. 

 مین مواد {
ڈسپلے: فلیکس؛
فلیکس لپیٹ: لپیٹ؛
فلیکس سمت: صف؛
مستحق مواد: خلائی کے درمیان؛
پڈنگنگ: 0 5VW 0 5VW؛}

09. اسے میڈیا کے سوالات کے بغیر ذمہ دار بنائیں

Build a blog with Grid and flexbox: Responsive without media queries

ذرائع ابلاغ کے سوالات کو استعمال کرنے کے بغیر ایک ذمہ دار سیکشن بنائیں

اس سیکشن کو کیلکول اور کم سے کم اور زیادہ سے زیادہ چوڑائی کا ایک چیلنج مرکب کا استعمال کرتا ہے تاکہ ہمیں مؤثر طریقے سے میڈیا کے سوال پر مؤثر طریقے سے ایک کنٹینر کی سطح پر. جب کافی کمرہ موجود ہے تو سیکشن اس کے ساتھ ساتھ بیٹھنے کے لئے الگ الگ والدین کا 70 فیصد حصہ لے گا. چوڑائی کے لئے کیلک کا استعمال کرتے ہوئے، ہم یا تو ایک بڑی یا چھوٹی چوڑائی واپس آ سکتے ہیں. 

 مین مواد سیکشن {
کم چوڑائی: 70٪؛
چوڑائی: کیلک ((48EM - 100٪) * 1000)؛
زیادہ سے زیادہ چوڑائی: 100٪؛
}

10. ایک وقفے پوائنٹ کی وضاحت کریں

48EM 768px (48 * بیس فونٹ سائز (16px) کے برابر ہے (16 پی ایکس) لہذا 768px سے زائد سیکشن اس کی کم از کم چوڑائی 70٪ اور 768 سے زائد ہے، زیادہ سے زیادہ چوڑائی کا استعمال کیا جائے گا. ہم اسی طرح کے لئے اسی طرح کرتے ہیں، لہذا اس صورت میں یہ بڑی اسکرینوں پر 25٪ تک پہنچ جائے گا یا 100٪ چھوٹے پر. اثر ایک ذمہ دار وقفے پوائنٹ ہے جو خالص طور پر کنٹینر کو متاثر کرتا ہے. 

 .میں مواد الگ الگ {
کم چوڑائی: 25٪؛
چوڑائی: کیلک ((48EM - 100٪) * 1000)؛
زیادہ سے زیادہ چوڑائی: 100٪؛
}

11. ذمہ دار بلاکس کی تعمیر

Build a blog with Grid and flexbox: Responsive blocks

اپنے ذمہ دار بلاکس کی تعمیر کے لئے کنٹینر ڈیک استعمال کریں

اس صفحے پر چلنے والی خصوصیات والے اشیاء کو تخلیق کرنے کے لئے، ہم آخر میں ہمارے پہلے کنٹینر ڈویژن کا استعمال کرتے ہیں. 

 & lt؛ سیکشن کلاس = "کارڈ فہرست" اور جی ٹی؛
& lt؛ ڈوی کلاس = "کارڈ" اور جی ٹی؛
& lt؛ img / & gt؛
& lt؛ ڈوی کلاس = "کارڈ تفصیلات" اور جی ٹی؛
& lt؛ / div & gt؛
& lt؛ / div & gt؛
& lt؛ / سیکشن اور GT؛

12. دوبارہ اور خود بخود

ہماری کارڈ کی فہرست کے لئے ہم ایک قطار میں چار ہونا چاہتے ہیں، لیکن اس وجہ سے ہم کسی بھی میڈیا سوالات کا استعمال نہیں کر رہے ہیں جو ہم نے قائم کیے ہیں Minmax. 300px پر قیمت، جو ایک چھوٹا سا موبائل پر اچھی طرح سے فٹ ہوجائے گا. براؤزر کو دوبارہ اور خود بخود استعمال کرتے ہوئے، مشکل کام کرتا ہے اور یہ ایک قطار میں کیا کرسکتا ہے اور پھر ایک دوسرے کو شروع کر سکتا ہے، لہذا ہم چار سے ایک کالم ترتیب سے کوڈ کی ایک لائن کے ساتھ جا سکتے ہیں. 

. کار کی فہرست {
ڈسپلے: گرڈ؛
گرڈ خلا: 10px؛
گرڈ ٹیمپلیٹ کالم: دوبارہ دہرائیں (آٹو فٹ،
Minmax (300px، 1fr))؛
}

کارڈ {
 ڈسپلے: گرڈ؛
 گرڈ ٹیمپلیٹ-کالم: 1fr؛
}

13. ایک کارڈ ترتیب بنائیں

کارڈ میں تفصیلات کے لئے ہم فیکس کو واپس سوئچ کرتے ہیں، کالم پر بہاؤ کی ترتیب دیتے ہیں تاکہ اشیاء عمودی طور پر بہاؤ. مقرر مستحق مواد اس معاملے میں - پراپرٹی کے مطابق - جگہ - اسی طرح اچھا کام کرتا ہے. کیونکہ اس پینل میں 'اے' ٹیگ بلاک دکھائے گی، یہ کنٹینر کی چوڑائی کو بڑھا دے گی. اسے سیٹ کریں فلیکس شروع لہذا یہ صرف اس کے مواد کی جگہ لیتا ہے. 

. کار کی تفصیلات {
ڈسپلے: فلیکس؛
فلیکس سمت: کالم؛
حقائق - مواد: خلائی - اسی طرح؛
}

.card- تفصیلات A {
سیدھا خود: Flex- شروع؛
}

14. فوٹر ہالی ووڈ

ہم پہلے سے ہی فوٹر پر نیچے ہیں، اور ہم نے پہلے ہی اس سے پہلے استعمال کرنے والے کچھ شیلیوں کو ملازمت ملے گی. 

 & lt؛ فوٹر کلاس = "فوٹر" اور جی ٹی؛
& lt؛ p / & gt؛
& lt؛ nav & gt؛
& lt؛ ul class = "nav" & gt؛
& lt؛ li / & gt؛
& lt؛ / ul & gt؛
& lt؛ / nav & gt؛
& lt؛ یو ایل کلاس = "سماجی" اور جی ٹی؛
& lt؛ li / & gt؛
& lt؛ / ul & gt؛
& lt؛ / فوٹر اور جی ٹی؛

15. بچے کی اشیاء کو سیدھ کریں

اس فوٹر میں تین علاقوں ہیں. اپنے گرڈ کالم مقرر کریں کہ ہر ایک کو ایک جزوی یونٹ میں تین کو دوبارہ کریں. آپ صرف 'گرڈ ٹیمپلیٹ-کالم لکھ سکتے ہیں: 1fr 1fr 1fr؛' اگر آپ ترجیح دیں. سماجی شبیہیں دائیں طرف منسلک بیٹھنے جا رہے ہیں - آپ اس چیز کو صحیح طریقے سے استعمال کرتے ہوئے سیدھا کرنے کے لئے خود کو بتا سکتے ہیں خود مختار خود . 

 .فوٹر {
ڈسپلے: گرڈ؛
گرڈ ٹیمپلیٹ-کالم: دوبارہ (3، 1fr)؛
گرڈ آٹو بہاؤ: کالم؛
سیدھا اشیاء: مرکز؛
}

.آئیلیل {
جواز - خود: اختتام؛
}

16. مطابقت پر غور کریں

اگرچہ یہ ٹیوٹوریل بڑے تین براؤزر اور جدید آلات میں اچھی طرح سے کام کرتا ہے، اس میں اس کا تجربہ نہیں کیا گیا ہے. آپ کے منصوبے پر منحصر ہے، آپ ترقی پسند بڑھانے کا استعمال کرسکتے ہیں اور ایک سادہ ترتیب کی خدمت کرسکتے ہیں. اگر آپ کے سی ایس ایس کو پری پروسیسر کا استعمال کرتے ہوئے تخلیق کیا جاتا ہے تو اس کے بعد آٹوپریفکس پیکج کنارے کی پسند کے لئے ضروری اضافی سابقہ ​​پیش نظارہ فراہم کرتا ہے.

یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین کے مسئلہ 284 میں شائع کیا گیا تھا ویب ڈیزائنر . مسئلہ 284 خریدیں یا یہاں ویب ڈیزائنر کو سبسکرائب کریں .

متعلقہ مضامین:

  • سی ایس ایس گرڈ کا استعمال کرنے کے لئے ایک جامع گائیڈ
  • ایک ذمہ دار انٹرفیس کی تعمیر کے لئے سی ایس ایس گرڈ اور FlexBox کا استعمال کریں
  • 5 ڈاؤن لوڈ، اتارنا سی ایس ایس گرڈ جنریٹر

کيسے - انتہائی مشہور مضامین

ایک ویب جی ایل 3D لینڈنگ پیج بنائیں

کيسے Feb 2, 2026

(تصویری کریڈٹ: مستقبل) Webgl 3D لینڈنگ پیج تخلیق آپ کے سامعین کے ساتھ ..

ریموٹ ٹیموں کے لئے ماسٹر ورژن کنٹرول

کيسے Feb 2, 2026

گزشتہ چند سالوں میں ویب ترقی میں دور دراز کام کرنا بہت زیادہ عام ہو گیا �..

فوٹوشاپ میں بناوٹ کیسے استعمال کریں

کيسے Feb 2, 2026

بناوٹ اکثر روایتی اور ڈیجیٹل آرٹ ورک کے درمیان لائنوں کو پھیلاتا ہے. اکثر دو کے درمیان فرق کو بتانا آسان ہ�..

فوٹوشاپ میں Colourise Greyscale کام

کيسے Feb 2, 2026

حتمی تصویر مکمل سائز کو دیکھنے کے لئے سب سے اوپر دائیں میں آئک�..

سخت سطح ماڈلنگ کے لئے 10 تجاویز

کيسے Feb 2, 2026

برسٹول کے عظیم مشرقی بھاپ شپ شپ کی یہ تصویر برسٹول میں نئے £ 7 ملین میوزی..

سی ایس ایس ڈسپلے پراپرٹی کو سمجھنے

کيسے Feb 2, 2026

یہ آدھی رات ہے، اور یہ ایک ڈیو آپ کی سائٹ پر اب بھی ایک بچے کے کھ�..

ایکرییلکس میں اب بھی ایک اظہار خیال کی زندگی

کيسے Feb 2, 2026

اب بھی زندگی ہر ایک کا کپ چائے نہیں ہے - یہ ایک مخصوص سیٹ لیتا ہے پینٹنگ کی تکنیک لیکن میرے لئے یہ ہ�..

پانی کے رنگ میں ماسٹر منفی پینٹنگ

کيسے Feb 2, 2026

منفی پینٹنگ پینٹنگ کرنے سے مراد ہے منفی جگہ یہ مثبت شکلوں کی وضاحت کرتا ہے. یہ خاص طور پر روایتی پا..

اقسام