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