الدليل الكامل لشبكة CSS 2026: التخطيطات والأنماط والتصميم المستجيب

/* Enable grid */
.container {
  display: grid;

  /* 3 equal columns */
  grid-template-columns: 1fr 1fr 1fr;

  /* Or shorthand */
  grid-template-columns: repeat(3, 1fr);

  /* Rows */
  grid-template-rows: auto 1fr auto;

  /* Gap between cells */
  gap: 1rem;
}

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 1rem;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

.featured {
  grid-column: 1 / 3;    /* span 2 columns */
  /* or: */
  grid-column: span 2;
}

.hero {
  grid-row: 1 / 3;       /* span 2 rows */
}

.full-width {
  grid-column: 1 / -1;   /* span all columns */
}

/* Cards that auto-wrap: minimum 280px, fill available space */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* auto-fill: keeps empty column tracks
   auto-fit: collapses empty tracks */
.card-grid-fit {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.layout {
  display: grid;
  grid-template-columns:
    [full-start] 1rem
    [content-start] 1fr
    [content-end] 1rem
    [full-end];
}

.bleed-full {
  grid-column: full-start / full-end;
}

.content {
  grid-column: content-start / content-end;
}

/* Works at any viewport width — no breakpoints needed */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 1rem;
}