CSS: حاوية Grid CSS

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* نسبة 1:2:1 */
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
}
</style>
<div class="container">
  <div class="item">1fr</div>
  <div class="item">2fr (ضعف العرض)</div>
  <div class="item">1fr</div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* نفس: 1fr 1fr 1fr */
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #e74c3c;
  color: white;
  padding: 20px;
  text-align: center;
}
</style>
<div class="container">
  <div class="item">عمود 1</div>
  <div class="item">عمود 2</div>
  <div class="item">عمود 3</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  background: #f5f5f5;
  padding: 15px;
}
.item {
  background: #2ecc71;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 4px;
}
</style>
<div class="grid">
  <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>

<style>
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 40px;
  gap: 10px;
  min-height: 100vh;
}
.header { grid-area: header; background: #2c3e50; color: white; }
.sidebar { grid-area: sidebar; background: #34495e; color: white; }
.main { grid-area: main; background: #ecf0f1; }
.aside { grid-area: aside; background: #34495e; color: white; }
.footer { grid-area: footer; background: #2c3e50; color: white; }
.layout > * { padding: 20px; display: flex; align-items: center; justify-content: center; }
</style>
<div class="layout">
  <header class="header">ترويسة</header>
  <aside class="sidebar">شريط جانبي</aside>
  <main class="main">المحتوى الرئيسي</main>
  <aside class="aside">جانبي</aside>
  <footer class="footer">تذييل</footer>
</div>