CSS Kapsayıcı Sorguları ve Alt Izgara: 2026 Esnek Bileşen Düzenleri İçin Plan

Duyarlı tasarım gelişti. Yıllar boyunca, medya sorguları düzenleri farklı ekranlara uyarlamak için tek aracımızdı, ancak bileşenleri görüntü alanına tepki vermeye zorladılar, gerçek kullanılabilir alana değil. 2026'da, CSS kapsayıcı sorguları ve alt ızgarası, nereye yerleştirilirlerse yerleştirilsin uyum sağlayan, gerçekten esnek ve kendi kendine yeten bileşenler oluşturmak için standart haline geldi.

Combining Container Queries and Subgrid

The real power emerges when you combine both: use container queries to adapt a card’s internal layout based on available space, and subgrid to keep those internal grids aligned with siblings in the same parent container.

Building a Product Card System

Let’s build a product card that works in both wide and narrow containers. The card will contain an image, title, description, price, and a button. When the container is narrow, stack vertically; when wide, use a subgrid-aligned row layout.

HTML```html

Product Title Description text that might vary in length. $29.99 Add to Cart

**CSS**```css
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.product-card-container {
  container-type: inline-size;
  container-name: product;
}

.product-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.product-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.content {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

@container product (min-width: 400px) \{
  .product-card {
    grid-template-columns: 200px 1fr;
  }
\}

When the container is ≥400px, the card switches to a side-by-side layout with image on the left and content on the right. The subgrid ensures all content rows align perfectly across cards even if one card has a longer title.

2. Dashboard Widgets

Dashboards often place widgets in resizable panels or grid cells. Container queries let each widget reflow its internal content (charts, tables, text) based on the cell width, while subgrid aligns header rows across widgets in the same row.

3. E-commerce Product Cards

Product cards appear in search results, recommendations, and category pages, each with different container sizes. Container queries handle the card’s internal layout; subgrid aligns prices and buttons across multiple cards in a grid.

2026'da Geleceğe Hazırlık

Kapsayıcı sorguları ve alt ızgarasının birleşimi, CSS spesifikasyonu ve uygulaması tarafından halihazırda etkinleştirilmiştir. Gelecekteki gelişmeler şunları içerir:

-Stil sorguları için kapsayıcı sorguları(@container style(--theme: dark)), şu anda deneysel. -Kapsayıcı kaydırma durumu sorguları, kaydırılabilir taşma durumuna uyum sağlar.

• İç içe alt ızgaralar için alt ızgara iyileştirmeleri (bir alt ızgaranın alt ızgarası).

Yeniden kullanılabilirliğin birinci sınıf olduğu bileşen odaklı bir CSS'ye doğru ilerliyoruz. Her bileşen için ayrı mobil ve masaüstü CSS yazma günleri sona erdi.

Sonuç

Kapsayıcı sorguları ve alt ızgarası yalnızca yeni araçlar değil, duyarlı tasarım hakkında düşünme şeklimizde temel bir değişimi temsil ediyor. Bileşen düzenini görüntü alanından ayırarak ve iç içe ızgaralar arasında gerçek hizalama sağlayarak, ön uç geliştiricilerin esnek, sürdürülebilir ve performanslı sistemler oluşturmasını sağlıyorlar.

İster bir tasarım sistemi, ister bir pano veya bir e-ticaret sitesi oluşturuyor olun, 2026'da kapsayıcı sorgularını ve alt ızgarasını benimsemek kodunuzu büyük ölçüde basitleştirecek ve kullanıcı deneyimini iyileştirecektir.

Küçük başlayın: bir bileşen seçin, bir kapsama bağlamı ekleyin ve görüntü alanı tabanlı kırılma noktalarınızı kapsayıcı boyutu kırılma noktalarıyla değiştirin. Onsuz nasıl yaşadığınıza şaşıracaksınız.