Responsive Web Design – Building a Grid View – سایت اموزشی زرین لرن

ساخت نمای شبکه‌ای واکنش‌گرا با CSS Grid

“`html
<!DOCTYPE html>
<html lang=“fa”>
<head>
<meta charset=“UTF-8” />
<meta name=“viewport” content=“width=device-width, initial-scale=1” />
<title>نمای شبکه‌ای واکنش‌گرا</title>
<style>
body {
font-family: Tahoma, sans-serif;
margin: 20px;
direction: rtl; /* برای نمایش راست به چپ */
}

.grid-container {
display: grid;
gap: 16px;
/* ایجاد ستون‌هایی با حداقل عرض ۲۰۰ پیکسل که به اندازه صفحه واکنش نشان می‌دهد */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
border-radius: 8px;
text-align: center;
font-size: 1.2em;
}

/* تنظیمات برای صفحه نمایش‌های کوچک */
@media (max-width: 600px) {
.grid-item {
font-size: 1em;
padding: 15px;
}
}
</style>
</head>
<body>

<h2>نمونه نمای شبکه‌ای واکنش‌گرا</h2>

</body>
</html>
“`

—

توضیح کد:

* در این کد، کانتینر اصلی (`.grid-container`) به صورت شبکه‌ای (grid) تعریف شده است.
* خاصیت `grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));` باعث می‌شود تعداد ستون‌ها به طور خودکار متناسب با عرض صفحه نمایش تنظیم شود.

* هر ستون حداقل ۲۰۰ پیکسل عرض دارد و در صورت امکان فضای بیشتری می‌گیرد.
* فاصله بین آیتم‌ها با `gap: 16px` تعیین شده است.
* در صفحه‌های کوچک‌تر (مثلا موبایل) اندازه فونت و padding کمی کاهش می‌یابد تا ظاهر بهینه‌تری داشته باشد.

—

اگر بخواهید با Flexbox این کار را انجام دهید:

“`css
.grid-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}

.grid-item {
flex: 1 1 200px; /* رشد، انقباض و پایه عرض */
background-color: #4CAF50;
color: white;
padding: 20px;
border-radius: 8px;
text-align: center;
min-width: 200px;
}
“`