سلام! طراحی کارت محصول به صورت ریسپانسیو می‌تواند کمی چالش‌برانگیز باشد، اما با استفاده از تکنیک‌های مدرن CSS این کار بسیار آسان و لذت‌بخش است. برای طراحی کارت محصول به صورتی که در دو ستون و بدون فاصله بین آنها نمایش داده شود، باید انتخاب‌های درستی از خواص CSS داشته باشیم. در اینجا به چهار پاراگراف درباره روش‌ها و نکات این کار می‌پردازیم.
اول از همه، ما از Grid Layout استفاده می‌کنیم که یکی از بهترین ابزارهای CSS برای ساخت طرح‌های پیچیده و ریسپانسیو است. Grid به شما این امکان را می‌دهد که با استفاده از خواص مانند grid-template-columns ستون‌هایی با عرض دلخواه و نسبی ایجاد کنید و آنها را بدون هیچ فاصله‌ای در کنار هم قرار دهید.
دومین نکته استفاده از خواص Flexbox است در مواقعی که نیاز دارید محتوا را درون کارت‌ها به صورت افقی یا عمودی سازمان‌دهی کنید. ترکیب Flexbox و Grid به شما کنترل کاملی بر روی چیدمان عناصر می‌دهد و مهم‌تر از آن، این روش‌ها به خوبی در مرورگرهای مدرن پشتیبانی می‌شوند.
در نهایت، باید مطمئن شویم که اندازه و فاصله‌ها در طرح ما در دستگاه‌های مختلف به درستی تنظیم شده باشند. این کار را می‌توان با استفاده از واحدهای CSS مانند fr، % و vh انجام داد که باعث می‌شود طراحی ما به خوبی با اندازه صفحه نمایش‌های مختلف تطبیق یابد.
کد نمونه
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>طراحی کارت محصول ریسپانسیو</title>
<style>
.card-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0px;
}
.card {
border: 1px solid #ccc;
padding: 20px;
margin: 10px;
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<div class="card-container">
<div class="card">
<h2>Product 1</h2>
<p>Description of product 1.</p>
</div>
<div class="card">
<h2>Product 2</h2>
<p>Description of product 2.</p>
</div>
</div>
</body>
</html>
توضیح خط به خط کد
<!DOCTYPE html> این اعلامیه داکیومنت HTML است که به مرورگرها می‌گوید در حال استفاده از HTML5 هستید.
<html lang="fa"> تگ HTML مشخص می‌کند زبان صفحه به فارسی است.
<meta charset="UTF-8"> مشخص می‌کنید که کدگذاری کاراکتر صفحه به صورت UTF-8 باشد.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> این متا تگ به مرورگر می‌گوید چگونه باید طرح‌بندی صفحه را در نمایشگرهای مختلف نمایش دهد.
<style> بخش استایل برای اضافه کردن CSS تزریقی درون‌صفحه‌ای است.
.card-container { display: grid; grid-template-columns: repeat(2, 1fr); } با این کد واحدها در دو ستون نمایش پیدا می‌کنند و فضای بین آنها حذف می‌شود.
.card { border: 1px solid #ccc; padding: 20px; } استایل هر کارت که شامل حاشیه، فاصله داخلی و سایر ویژگی‌هاست.
<body> قسمت اصلی سند HTML که شامل محتوای قابل مشاهده صفحه است.
<div class="card-container"> این دیو کانتینری برای کارت‌ها است که از Grid Layout برای چیدمان استفاده می‌کند.