Materi
Grid adalah kerangka kolom tak terlihat yang membuat isi halaman sejajar. Grid USWDS berbasis 12 kolom, mobile-first, dan dibangun dengan flexbox. Elemen bertanda grid-col-4 mengambil 4 dari 12 kolom, jadi tiga elemen grid-col-4 mengisi satu baris. Wadah grid-container menaruh isi di tengah halaman dengan lebar maksimum token desktop (1024px), dan memberi padding kiri-kanan 2 unit (16px) di layar sempit serta 4 unit (32px) mulai desktop. Celah antarkolom (gutter) tidak ada secara bawaan; kelas grid-gap menambahkannya, 2 unit dan 4 unit mulai desktop.
Titik henti grid USWDS memakai media query min-width: aturan tablet:grid-col-4 berlaku mulai lebar tablet ke atas, bukan di bawahnya. Di bawah titik henti itu kolom tampil selebar penuh dan bertumpuk. Itulah arti mobile-first: aturan dasar untuk layar sempit, lalu media query min-width menambahkan kolom ketika layarnya cukup lebar.
GOV.UK menulis aturan yang sama dari sisi tata letak: rancang untuk layar kecil dulu, mulai dari satu kolom. Untuk sebagian besar halaman, GOV.UK memakai tata letak dua pertiga atau dua pertiga dan sepertiga, supaya baris teks tidak terlalu panjang di layar desktop, dan lebar maksimum halamannya 1020px. GOV.UK juga meminta perancang tidak berasumsi tentang perangkat yang dipakai orang: rancang untuk berbagai ukuran layar, bukan untuk satu perangkat tertentu.
.wadah-profil { max-width: 1024px; margin: 0 auto; }
.isi-profil { display: grid; gap: 16px; }
@media (min-width: 880px) {
.isi-profil { grid-template-columns: 3fr 1fr; }
}
