Grid

FREE

Bootstrap mantığında Container, Row ve Col: 12 sütunlu duyarlı grid, boşluklar, kaydırma ve sıralama.

Canlı düzenle

Ayarları değiştir; bileşen ve kodu anında güncellensin.

Ayarlar

Sütun sayısı

Telefon (xs)

Tablet (md)

Masaüstü (lg)

Boşluk

Dikey hizalama

Yatay dağılım

Kod

import { Col, Row } from "@/components/ui/grid";

<Row>
  {items.map((item) => (
    <Col key={item.id} span={12} md={6} lg={4}>
      …
    </Col>
  ))}
</Row>

Kurulum

Terminal

npx @bloxa/cli add grid
# or: npx shadcn@latest add @bloxa/grid

Örnekler

Eşit sütunlar

span verilmeyen sütunlar kalan alanı eşit paylaşır.

fill

Duyarlı

Telefonda 1, tablette 2, masaüstünde 4 sütun. Pencereyi daraltıp dene.

Design

Build

Ship

Grow

Sayfa düzeni, kaydırma ve sıra

Content · md 8

Sidebar · md 4

md 6 · offset 3

API

Her bileşen, oluşturduğu HTML elemanının özelliklerini de kabul eder.

Container

Özellik	Tip	Varsayılan	Açıklama
size	"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "fluid"	"xl"	En fazla genişlik; fluid tam genişlik.

Row

Özellik	Tip	Varsayılan	Açıklama
gutter	0–8	4	Sütunlar arası yatay ve dikey boşluk.
gutterX / gutterY	0–8	—	Yalnız yatay ya da dikey boşluk.
align	"start" \| "center" \| "end" \| "stretch"	—	Dikey hizalama.
justify	"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"	—	Yatay dağılım.

Col

Özellik	Tip	Varsayılan	Açıklama
span	1–12 \| "auto" \| "fill"	"fill"	Tüm ekranlarda genişlik (12 üzerinden).
sm / md / lg / xl	1–12 \| "auto" \| "fill"	—	O breakpoint ve üstünde genişlik (mobile-first).
offset / offsetSm / offsetMd / offsetLg / offsetXl	0–11	—	Önce boş bırakılacak sütun sayısı.
order / orderMd / orderLg	number	—	Görsel sıra.