مодуل شبکه‌بندی CSS

ہیڈر
منو
مین
راست
فوٹر

آزمایش کنید

گرید لائن اپ

سی ایس ایس گرید لائن اپ (CSS Grid Layout Module) گرید پر مبنی لائن اور ستون کا ایک لائن اپ فراہم کرتا ہے، جو ویب پیج کا ڈیزائن کو آسان بناتا ہے، بغیر فلوٹنگ اور نئکاسی کا استعمال کرکے۔

بروزر کی مدد

تمام جدید بروزر گرید صفتار کا مدد دیتے ہیں۔

57.0 16.0 52.0 10 44

گرید عنصر

گرید کا لائئن اپنے پیرن عناصر اور ایک یا کئی بچوں کا تعلق رکھتا ہے۔

مثال

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9

آزمایش کنید

دسپلے پرپرتی

جب ہی پی وی ایم عناصر کا display صفتار مقرر کی جاسکتا ہے grid یا inline-grid جب، یہ گرید کانٹینر بن جاتا ہے۔

مثال

.grid-container {
  display: grid;
}

آزمایش کنید

مثال

.grid-container {
  display: inline-grid;
}

آزمایش کنید

گرید کے کانٹینر کے تمام براہ راست بچے خود بخود گرید آئٹم بن جاتے ہیں۔

گرید ستون (Grid Columns)

گرید کی پلاکوں کی عمودی لائن کو ستون کہلاتا ہے۔

گرید رکھائش (Grid Rows)

گرید کی پلاکوں کی افقی لائن کو رکھائش کہلاتا ہے۔

گرید رکھائش (Grid Gaps)

کسی سے کسی ستون یا رکھائش کی رکھائش کو رکھائش کہلاتا ہے۔

آپ کو درست کیا جاسکتا ہے کہ رکھائش کی رکھائش کو کسی سے کسی صفتار کا استعمال کرکے کچھ اور کچھ کردیا جاسکتا ہے:

  • grid-column-gap
  • grid-row-gap
  • grid-gap

مثال

grid-column-gap صفتار رکھائش کو ستون کی رکھائش مقرر کرتی ہے:

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

آزمایش کنید

مثال

grid-row-gap صفتار رکھائش کو رکھائش کی رکھائش مقرر کرتی ہے:

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

آزمایش کنید

مثال

grid-gap یہ صفتار grid-row-gap اور grid-column-gap صفتار کا مختصر صفتار ہے:

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

آزمایش کنید

مثال

grid-gap صفتار کا استعمال کیا جاسکتا ہے کہ رکھائش اور ستون کی رکھائش کو ایک ایک کا مقادیر مقرر کیا جاسکتا ہے:

.grid-container {
  display: grid;
  grid-gap: 50px;
}

آزمایش کنید

خطوط شبکه (Grid Lines)

خطوط بین ستون‌ها به عنوان خطوط ستون (column lines) شناخته می‌شوند.

خطوط بین سطرها به عنوان خطوط سطر (row lines) شناخته می‌شوند.

هنگام قرار دادن ماشین شبکه در حاوی شبکه، شماره خط را به کار ببرید:

مثال

ماشین شبکه را در خط 1 قرار دهید و آن را در خط 3 پایان دهید:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

آزمایش کنید

مثال

ماشین شبکه را در خط 1 قرار دهید و آن را در خط 3 پایان دهید:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

آزمایش کنید