قابلیت شبکه CSS

1
2
3
4
5
6
7
8

آزمایش کنید

قالب شبکه

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

قالب شبکه از عنصرهای شبکه‌ای که در داخل ستون‌ها و ردیف‌ها قرار دارند تشکیل شده است.

ویژگی grid-template-columns

grid-template-columns این ویژگی تعداد ستون‌های چیدمان شبکه را تعریف می‌کند و می‌تواند عرض هر ستون را نیز مشخص کند.

این ارزش یک لیست جدا شده با فاصله است که هر یک طول مربوط به ستون‌ها را تعریف می‌کند.

اگر می‌خواهید چیدمان شبکه شامل 4 ستون باشد، عرض این 4 ستون را مشخص کنید؛ اگر همه ستون‌ها باید عرض یکسانی داشته باشند، آن را به "auto" تنظیم کنید.

مثال

یک شبکه شامل 4 ستون ایجاد می‌کند:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

آزمایش کنید

توجه:اگر در شبکه 4 ستونی بیش از 4 عنصر باشد، شبکه به صورت خودکار ردیف جدیدی اضافه می‌کند و این عنصرها را در آن قرار می‌دهد.

grid-template-columns این ویژگی همچنین می‌تواند برای مشخص کردن اندازه ستون‌ها (عرض) استفاده شود.

مثال

اندازه این 4 ستون را تنظیم کنید:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

آزمایش کنید

ویژگی grid-template-rows

grid-template-rows این ویژگی ارتفاع هر ستون را تعریف می‌کند.

1
2
3
4
5
6
7
8

ارزش‌های آن یک لیست جدا شده با فاصله هستند که هر یک ارتفاع مربوط به ردیف‌ها را تعریف می‌کنند:

مثال

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

آزمایش کنید

ویژگی justify-content

justify-content این ویژگی برای هماهنگی کل شبکه در داخل قالب استفاده می‌شود.

1
2
3
4
5
6
7
8

توجه:عرض شبکه باید کمتر از عرض قالب باشد تا ویژگی justify-content کار کند.

مثال

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

آزمایش کنید

مثال

.grid-container {
  display: grid;
  justify-content: space-around;
}

آزمایش کنید

مثال

.grid-container {
  display: grid;
  justify-content: space-between;
}

آزمایش کنید

مثال

.grid-container {
  display: grid;
  justify-content: center;
}

آزمایش کنید

مثال

.grid-container {
  display: grid;
  justify-content: start;
}

آزمایش کنید

مثال

.grid-container {
  display: grid;
  justify-content: end;
}

آزمایش کنید

ویژگی جذب محتوا

جذب محتوا این خصوصیت برای عمودآمدگی کل شبکه درون قاب استفاده می‌شود.

1
2
3
4
5
6
7
8

توجه:ارتفاع کل شبکه باید کمتر از ارتفاع قاب باشد تا خصوصیت align-content عمل کند.

مثال

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

آزمایش کنید

مثال

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

آزمایش کنید

مثال

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

آزمایش کنید

مثال

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

آزمایش کنید

مثال

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

آزمایش کنید

مثال

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

آزمایش کنید