ما هو CSS Grid؟
نظام CSS Grid Layout هو نموذج تخطيط ثنائي الأبعاد، أي يسمح لك بتنظيم العناصر في صفوف (rows) وأعمدة (columns) بكل سهولة ودقة.
1. تفعيل الـ Grid
.container {
display: grid;
}
ببساطة، هذه الخاصية تجعل كل العناصر داخل .container تخضع لتخطيط الشبكة.
2. تحديد الأعمدة
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
}
يتم إنشاء 3 أعمدة كل منها بعرض 200px.
أو باستخدام fr (الوحدة النسبية في Grid):
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
1frتعني "جزء واحد من المساحة المتاحة".
3. تحديد الصفوف
.container {
grid-template-rows: 100px 150px;
}
ينشئ صفين بارتفاعات محددة.
4. إضافة فراغات (Gap) بين العناصر
.container {
gap: 10px; /* فراغ بين الصفوف والأعمدة */
}
أو:
.container {
row-gap: 10px;
column-gap: 20px;
}
مثال كامل:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.item {
background-color: #a2d5f2;
padding: 20px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
ملاحظات هامة:
- العناصر تُضاف تلقائيًا إلى الصفوف التالية إذا امتلأت الأعمدة.
frوحدة قوية لتوزيع المساحات بشكل مرن.
الواجب العملي:
- أنشئ Grid فيها 3 أعمدة و3 صفوف.
- جرّب استخدام
frبدلًا من قيم ثابتة مثلpx. - أضف فراغات بين العناصر باستخدام
gap.