آموزش کامل CSS Grid پیشرفته | ساخت هر نوع چیدمانی با ۲۰+ مثال عملی

.basic-grid {    display: grid;    grid-template-columns: 1fr 1fr 1fr;    gap: 20px;  }  .grid-item {    background: #3498db;    padding: 40px;    text-align: center;    color: white;    border-radius: 8px;  }

<div class="basic-grid">    <div class="grid-item">۱</div>    <div class="grid-item">۲</div>    <div class="grid-item">۳</div>    <div class="grid-item">۴</div>    <div class="grid-item">۵</div>    <div class="grid-item">۶</div>  </div>

.unequal-grid {    display: grid;    grid-template-columns: 200px 2fr 1fr;    gap: 15px;    height: 200px;  }

.repeat-grid {    display: grid;    grid-template-columns: repeat(4, 1fr);    gap: 15px;  }

.merged-grid {    display: grid;    grid-template-columns: repeat(3, 1fr);    grid-template-rows: repeat(3, 100px);    gap: 10px;  }  .item-large {    grid-column: 1 / 3;  /* از ستون ۱ تا ۳ (یعنی ۲ ستون) */    grid-row: 1 / 3;      /* از سطر ۱ تا ۳ (یعنی ۲ سطر) */    background: #e74c3c;  }  .item-normal {    background: #3498db;  }

<div class="merged-grid">    <div class="item-large">بزرگ</div>    <div class="item-normal">۲</div>    <div class="item-normal">۳</div>    <div class="item-normal">۴</div>    <div class="item-normal">۵</div>    <div class="item-normal">۶</div>  </div>

.page-layout {    display: grid;    grid-template-areas:      "header header header"      "sidebar main main"      "sidebar main main"      "footer footer footer";    grid-template-columns: 250px 1fr 1fr;    grid-template-rows: auto 1fr 1fr auto;    gap: 15px;    min-height: 100vh;  }  .header {    grid-area: header;    background: #2c3e50;    padding: 20px;    color: white;  }  .sidebar {    grid-area: sidebar;    background: #e67e22;    padding: 20px;  }  .main {    grid-area: main;    background: #ecf0f1;    padding: 20px;  }  .footer {    grid-area: footer;    background: #34495e;    padding: 20px;    color: white;  }

.magazine {    display: grid;    grid-template-areas:      "featured featured news"      "featured featured article1"      "card1 card2 card3";    grid-template-columns: 2fr 1fr 1fr;    gap: 20px;  }  .featured {    grid-area: featured;    background: linear-gradient(135deg, #667eea, #764ba2);    padding: 50px;    color: white;    border-radius: 15px;  }  .news {    grid-area: news;    background: #f39c12;    padding: 20px;    border-radius: 15px;  }  .article1 {    grid-area: article1;    background: #3498db;    padding: 20px;    border-radius: 15px;  }  .card1 { grid-area: card1; background: #e74c3c; padding: 30px; border-radius: 15px; }  .card2 { grid-area: card2; background: #2ecc71; padding: 30px; border-radius: 15px; }  .card3 { grid-area: card3; background: #9b59b6; padding: 30px; border-radius: 15px; }

.responsive-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));    gap: 20px;  }  .responsive-item {    background: #3498db;    padding: 40px;    text-align: center;    border-radius: 10px;  }

.auto-fit {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));  }  .auto-fill {    display: grid;    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));  }

.dashboard {    display: grid;    grid-template-areas:      "sidebar header header"      "sidebar stats stats"      "sidebar chart table"      "sidebar recent recent";    grid-template-columns: 260px 1fr 1fr;    grid-template-rows: auto auto 1fr auto;    gap: 20px;    min-height: 100vh;    background: #f5f6fa;  }  .sidebar { grid-area: sidebar; background: #2c3e50; }  .header { grid-area: header; background: white; padding: 20px; border-radius: 10px; }  .stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }  .chart { grid-area: chart; background: white; border-radius: 10px; padding: 20px; }  .table { grid-area: table; background: white; border-radius: 10px; padding: 20px; }  .recent { grid-area: recent; background: white; border-radius: 10px; padding: 20px; }

.masonry-gallery {    display: grid;    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));    gap: 20px;  }  .masonry-item {    background: #ecf0f1;    border-radius: 15px;    overflow: hidden;  }  .masonry-item img {    width: 100%;    height: auto;    display: block;  }  .masonry-item:nth-child(odd) {    transform: translateY(-10px);  }

.form-grid {    display: grid;    grid-template-columns: repeat(2, 1fr);    gap: 20px;  }  .form-full {    grid-column: 1 / -1; /* تمام عرض را بگیر */  }  .form-grid input, .form-grid select {    padding: 12px;    border: 1px solid #ddd;    border-radius: 8px;  }

<div class="form-grid">    <input type="text" placeholder="نام">    <input type="text" placeholder="نام خانوادگی">    <input type="email" placeholder="ایمیل" class="form-full">    <input type="password" placeholder="رمز عبور" class="form-full">    <button class="form-full">ثبت نام</button>  </div>

.pyramid {    display: grid;    grid-template-columns: 1fr 2fr 1fr;    gap: 10px;  }  .pyramid-item {    background: #e67e22;    padding: 30px;    text-align: center;  }  .pyramid-item:first-child {    grid-column: 2 / 3;  }  .pyramid-item:nth-child(2), .pyramid-item:nth-child(3) {    grid-column: span 1;  }  .pyramid-item:last-child {    grid-column: 1 / -1;  }

.sticky-grid {    display: grid;    grid-template-rows: auto 1fr auto;    min-height: 100vh;  }  .sticky-header {    position: sticky;    top: 0;    background: #2c3e50;    padding: 20px;    color: white;    z-index: 100;  }  .main-content {    background: #ecf0f1;    padding: 40px;  }  .sticky-footer {    background: #34495e;    padding: 20px;    color: white;  }

.overlay-grid {    display: grid;    grid-template-columns: 1fr;    grid-template-rows: 1fr;  }  .overlay-grid img {    grid-column: 1 / 2;    grid-row: 1 / 2;    width: 100%;    height: 400px;    object-fit: cover;  }  .overlay-text {    grid-column: 1 / 2;    grid-row: 1 / 2;    z-index: 1;    background: rgba(0,0,0,0.5);    color: white;    display: flex;    align-items: center;    justify-content: center;    font-size: 2rem;  }

.offcanvas {    display: grid;    grid-template-columns: 0fr 1fr;    transition: 0.3s;  }  .offcanvas.open {    grid-template-columns: 250px 1fr;  }  .menu {    overflow: hidden;    background: #2c3e50;    color: white;    padding: 20px;  }  .content {    background: #ecf0f1;    padding: 20px;    min-height: 100vh;  }

.comparison-grid {    display: grid;    grid-template-columns: 200px repeat(3, 1fr);    gap: 1px;    background: #ddd;  }  .comparison-item {    background: white;    padding: 15px;    text-align: center;  }  .comparison-item:first-child {    background: #f8f9fa;    font-weight: bold;  }

.timeline {    display: grid;    grid-template-columns: 100px 1fr;    gap: 20px;  }  .timeline-date {    background: #3498db;    color: white;    padding: 10px;    border-radius: 8px;    text-align: center;    font-weight: bold;  }  .timeline-event {    background: #ecf0f1;    padding: 15px;    border-radius: 8px;    margin-bottom: 15px;  }

.news-card {    display: grid;    grid-template-columns: 120px 1fr;    gap: 15px;    background: white;    padding: 15px;    border-radius: 10px;    box-shadow: 0 2px 10px rgba(0,0,0,0.1);  }  .news-image {    background: #3498db;    height: 80px;    border-radius: 8px;  }  .news-title {    font-weight: bold;    margin-bottom: 8px;  }  .news-summary {    color: #666;    font-size: 0.9rem;  }

.outer-grid {    display: grid;    grid-template-columns: repeat(2, 1fr);    gap: 30px;  }  .inner-grid {    display: grid;    grid-template-columns: repeat(2, 1fr);    gap: 15px;    background: #ecf0f1;    padding: 20px;    border-radius: 10px;  }

.zigzag {    display: grid;    gap: 30px;  }  .zigzag-item {    display: grid;    grid-template-columns: 1fr 1fr;    gap: 20px;    align-items: center;  }  .zigzag-item:nth-child(even) .zigzag-text {    order: 2;  }  .zigzag-item:nth-child(even) .zigzag-image {    order: 1;  }  .zigzag-image {    background: #3498db;    height: 200px;    border-radius: 15px;  }  .zigzag-text {    padding: 20px;  }

.sticky-footer-layout {    display: grid;    grid-template-rows: auto 1fr auto;    min-height: 100vh;  }  header {    background: #2c3e50;    padding: 20px;    color: white;  }  main {    background: #ecf0f1;    padding: 40px;  }  footer {    background: #34495e;    padding: 20px;    color: white;  }