٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

ماژول طرح بندی شبکه CSS

طرح شبکه ماژول طرح بندی شبکه GSS یک سیستم طرح بندی مبتنی بر شبکه ، با ردیف ها و ستون ها ارائه می دهد ، طراحی صفحات وب بدون استفاده از شناورها و موقعیت یابی را آسان می کند. پشتیبانی…

محمد یوسفی

16 جولای 2021

طرح شبکه

ماژول طرح بندی شبکه GSS یک سیستم طرح بندی مبتنی بر شبکه ، با ردیف ها و ستون ها ارائه می دهد ، طراحی صفحات وب بدون استفاده از شناورها و موقعیت یابی را آسان می کند.


پشتیبانی مرورگر

ویژگی های شبکه در همه مرورگرهای مدرن پشتیبانی می شوند.


عناصر شبکه

طرح بندی شبکه از یک عنصر والد تشکیل شده است ، با یک یا چند عنصر کودک.

مثال

<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>

نمایش ویژگی

یک عنصر HTML هنگامی که displayویژگی آن بر روی gridیا قرار گیرد ، به یک محفظه شبکه تبدیل می شود inline-grid.

مثال

.grid-container {
  display: grid;
}

مثال

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

همه بچه های مستقیم شبکه به طور خودکار به موارد شبکه تبدیل می شوند .


ستون های شبکه

خطوط عمودی موارد شبکه را ستون می نامند .


ردیف های شبکه

به خطوط افقی موارد شبکه ردیف گفته می شود .


شکافهای شبکه

به فاصله های بین هر ستون / ردیف ، شکاف گفته می شود .

با استفاده از یکی از خصوصیات زیر می توانید اندازه شکاف را تنظیم کنید:

  • 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;
}

خطوط شبکه

خطوط بین ستون ها به نام خطوط ستون .

خطوط بین ردیف ها به نام خطوط ردیف .

هنگام قرار دادن یک مورد شبکه در یک ظرف شبکه به شماره های خط مراجعه کنید:

مثال

یک مورد شبکه را در ستون شماره 1 قرار دهید ، و بگذارید روی ستون 3 پایان یابد:

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

مثال

یک مورد شبکه را در خط 1 ردیف قرار دهید ، و بگذارید روی خط 3 پایان یابد:

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

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها