بعد أن تعلمنا كيفية إنشاء شبكة باستخدام CSS Grid، اليوم سنتعلم كيفية تحديد موضع كل عنصر يدويًا داخل الشبكة باستخدام:
grid-columngrid-row
1. grid-column
تُستخدم لتحديد الأعمدة التي يمتد فيها العنصر.
.item {
grid-column: 1 / 3;
}
- يبدأ من العمود 1 وينتهي قبل العمود 3 (أي يشغل العمودين 1 و2).
اختصار:
.item {
grid-column: span 2;
}
- يشغل عنصرًا بعرض عمودين، بدءًا من موقعه الحالي.
2. grid-row
نفس الفكرة ولكن للصفوف:
.item {
grid-row: 1 / 3;
}
- يشغل الصف الأول والثاني.
مثال عملي:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
.item {
background-color: #f39c12;
color: white;
text-align: center;
font-weight: bold;
padding: 20px;
}
.item1 {
grid-column: 1 / 3;
}
.item2 {
grid-row: 2 / 3;
grid-column: 3 / 5;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">1 (عمود 1-2)</div>
<div class="item item2">2 (صف 2، عمود 3-4)</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
تلميحات مفيدة:
- يمكن استخدام
grid-column-startوgrid-column-endبدلاً منgrid-column. - استخدام
spanيسهل جعل العناصر تمتد على أكثر من عمود أو صف.
الواجب العملي:
- أنشئ شبكة فيها 4 أعمدة و3 صفوف.
- اجعل العنصر الأول يمتد على عمودين.
- اجعل العنصر الثاني يمتد على صفين وعمودين.
- جرّب تغيير مواقع العناصر يدويًا داخل الشبكة.
