کانتینر شبکه (Grid Container)
برای اینکه یک عنصر HTML به عنوان یک کانتینر شبکه عمل کند، باید خاصیت display آن را به grid یا inline-grid تنظیم کنید.
یک کانتینر شبکه شامل عناصر شبکه‌ای است که درون ستون‌ها و ردیف‌ها قرار گرفته‌اند.
خاصیت grid-template-columns
خاصیت grid-template-columns تعداد ستون‌های موجود در طراحی شبکه را تعریف می‌کند و می‌تواند عرض هر ستون را نیز مشخص کند.
مقدار این خاصیت به‌صورت یک لیست از عرض‌های ستون‌هاست که با فاصله از هم جدا شده‌اند و هر مقدار عرض ستون مربوطه را مشخص می‌کند.
مثال
ساخت یک شبکه با ۴ ستون:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}توجه: اگر تعداد آیتم‌های شما بیشتر از ۴ باشد، یک ردیف جدید به‌طور خودکار به شبکه اضافه می‌شود.
تعریف اندازه ستون‌ها
خاصیت grid-template-columns می‌تواند برای تعیین اندازه (عرض) ستون‌ها نیز استفاده شود.
مثال
تعیین اندازه ستون‌ها:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}خاصیت grid-template-rows
خاصیت grid-template-rows ارتفاع هر ردیف را تعریف می‌کند.
مثال
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}خاصیت justify-content
خاصیت 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;
}خاصیت align-content
خاصیت 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;
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام