Apakah Grid tata letak ini gratis?

Gratis dan tanpa akun. Simulasinya berjalan di peramban kamu; tidak ada yang dikirim ke server KelasGratis. Bila kamu masuk, KelasGratis hanya mencatat bahwa akunmu membuka lab ini (sekali sehari) untuk riwayat dan aktivitas komunitas.

Apa saja penyederhanaan modelnya?

Artboard digambar berskala, bukan peramban selebar itu; hitungannya sama dengan CSS Grid repeat(n, 1fr) dengan gap dan padding wadah. Lebar kolom ditampilkan dengan desimal; peramban membulatkannya ke piksel perangkat. Margin di sini berarti padding kiri-kanan wadah, seperti grid-container USWDS; sistem desain lain memakai istilah sedikit berbeda.

Boleh dipasang di situs sekolah atau blog?

Boleh. Pasang iframe ke https://kelasgratis.com/lab/grid-tata-letak-kolom?embed=1; bingkainya menampilkan lab saja beserta tautan balik.

Seni & DesainGratis, tanpa loginberjalan di perangkatmu

Simulasi Grid Tata Letak: Kolom, Gutter, dan Margin

Tarik margin, gutter, dan lebar wadah langsung di artboard, lalu baca lebar satu kolom dan kartu yang membentang beberapa kolom, lengkap dengan CSS Grid-nya.

Lebar satu kolom: 50,67 px; 12 kolom
Kartu 4 kolom: 298,67 px; 4 kolom + 3 gutter
Kartu per baris: 3; pas
Area isi: 960 px; wadah 1.024 − 2 × 32

Lebar layar1.440 px

Maks. wadah1.024 px

Margin32 px

Kolom12

Gutter32 px

Bentang kartu4 kolom

CSS yang setara

.wadah {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 32px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
}
.kartu { grid-column: span 4; }

Cara hitung

Wadah = min(layar, lebar maksimum) = min(1440, 1024) = 1.024 px.
Area isi = wadah − 2 × margin = 1.024 − 2 × 32 = 960 px.
Satu kolom = (area isi − (kolom − 1) × gutter) ÷ kolom = (960 − 11 × 32) ÷ 12 = 50,67 px.
Kartu 4 kolom = 4 × 50,67 + 3 × 32 = 298,67 px.

Mulai dari layar 1440 px: wadah berhenti di lebar maksimum, sisanya ruang kosong kiri-kanan.
Tarik pegangan margin, gutter, atau wadah di artboard; lebar kolom langsung berubah.
Geser layar ke 360 px dan kurangi kolom menjadi 4: begitulah grid mobile-first.
Ubah bentang kartu, lalu cocokkan hitungannya dengan CSS yang setara.