عناصر Grid CSS

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.span-2-col { grid-column: span 2; }
.span-2-row { grid-row: span 2; }
</style>
<div class="grid">
  <div class="item">1</div>
  <div class="item span-2-col">يمتد لعمودين</div>
  <div class="item">3</div>
  <div class="item span-2-row">يمتد لصفين</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.header {
  grid-column: 1 / -1; /* يمتد لجميع الأعمدة */
  background: #2c3e50;
  color: white;
  padding: 15px;
  text-align: center;
}
.item {
  background: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 4px;
}
</style>
<div class="grid">
  <div class="header">ترويسة (عرض كامل)</div>
  <div class="item">عمود 1</div>
  <div class="item">عمود 2</div>
  <div class="item">عمود 3</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
  height: 200px;
}
.item {
  background: #e74c3c;
  color: white;
  padding: 10px;
  border-radius: 4px;
}
.start { justify-self: start; align-self: start; }
.center { justify-self: center; align-self: center; }
.end { justify-self: end; align-self: end; }
</style>
<div class="grid">
  <div class="item start">بداية</div>
  <div class="item center">وسط</div>
  <div class="item end">نهاية</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  background: rgba(231, 76, 60, 0.7);
  color: white;
  padding: 20px;
  z-index: 1;
}
.item2 {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  background: rgba(52, 152, 219, 0.7);
  color: white;
  padding: 20px;
}
</style>
<div class="grid">
  <div class="item1">عنصر 1 (خلف)</div>
  <div class="item2">عنصر 2 (أمام)</div>
</div>