طرح شبکه
ماژول طرح بندی شبکه 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-gapgrid-row-gapgrid-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;
}
