Izgara

columns olmadan bir ızgara, alanın elverdiği ölçüde en az min genişliğinde olabildiğince çok raya kendiliğinden sığar ve her biri artanı eşit paylaşır. Bir kart listesinin istediği davranış budur ve kesme noktası gerektirmez: bu sayfayı yeniden boyutlandırın, aşağıdaki tanıtımlar kendiliğinden yeniden akar.

Kendiliğinden sığdırma

Varsayılan. Raylar en az 16rem genişliğindedir.

Yönlendirme

Veri yükleme

Varlıklar

Görseller

Adalar

Arama

grid(
  ...['Yönlendirme', 'Veri yükleme', 'Varlıklar', 'Görseller', 'Adalar', 'Arama'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, name))),
  ),
)

Ray genişliği

min, ızgara daha az sütuna düşmeden önce bir rayın ne kadar darlaşabileceğini belirler. Küçük olması daha çok sütun demektir.

2xl

3xl

4xl

5xl

grid({ min: '9rem' },
  ...['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small', align: 'center' }, name))),
  ),
)

Sabit sayıda sütun

Sayı görünümle birlikte değişmemesi gerektiğinde bir sayı geçirin. Her ray eşit bir paydır.

Bir

İki

Üç

grid({ columns: 3 },
  ...['Bir', 'İki', 'Üç'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small', align: 'center' }, name))),
  ),
)

Özel bir şablon

Bir dize doğrudan grid-template-columns olarak geçirilir; bir kenar çubuğu ile içerik bölünmesi ya da CSS ızgarasının ifade edebildiği başka her şey için.

Kenar çubuğu

Satırın gerisini alan içerik.

grid({ columns: '12rem 1fr', gap: 'lg' },
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Kenar çubuğu'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Satırın gerisini alan içerik.'))),
)

Boşluk ve hizalama

Kısa

İçinde iki satır metin olan daha uzun bir kart; align değerinin daha kısa komşularına ne yaptığını göstermek için.

Kısa

grid({ min: '10rem', gap: 'xl', align: 'center' },
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Kısa'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'İçinde iki satır metin olan daha uzun bir kart; align değerinin daha kısa komşularına ne yaptığını göstermek için.'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Kısa'))),
)

Proplar

Prop	Tür	Varsayılan	Açıklama
`columns`	`number \| string`	—	Sabit bir ray sayısı ya da ham bir grid-template-columns değeri. Kendiliğinden sığdırma için atlayın.
`min`	`string`	`'16rem'`	Kendiliğinden sığdırırken en küçük ray genişliği.
`gap`	`Space`	`'md'`	Raylar ve satırlar arasındaki boşluk.
`align`	`string`	`'stretch'`	Herhangi bir align-items değeri.
`as`	`string`	`'div'`	İşlenecek öğe.

Bir ray, min değeri kullanılabilir alandan büyük olsa bile hiçbir zaman ızgaranın kendisinden geniş olmaz — bu yüzden 16rem’lik bir alt sınır, 320 piksellik bir telefonda yatay kaydırma çubuğuna yol açmaz.