Container Responsif

Pembalut (wrapper) di tengah dengan lebar terhad dan ruang tepi, hanya dua baris CSS — tak perlu media query.

Pratonton langsung Buka dalam Playground

container.css

.container {
  /* Change these two numbers per project */
  --container-max: 70rem;
  --container-gutter: 1rem;

  width: min(100% - 2 * var(--container-gutter), var(--container-max));
  margin-inline: auto;
}

/* Optional: a narrower variant for long-form text */
.container--narrow {
  --container-max: 42rem;
}

Hampir setiap halaman perlukan benda yang sama: kandungan duduk di tengah, tak terlalu lebar untuk dibaca, dan tak melekat pada tepi skrin di telefon. Cara lama ialah max-width + padding + media query. min() boleh buat semuanya dalam satu deklarasi.

Baris demi baris

--container-max dan --container-gutter ialah custom property (pemboleh ubah CSS), jadi anda boleh ubah saiz container untuk halaman atau varian tertentu tanpa ulang formula.
min(A, B) ambil nilai yang lebih kecil pada saat itu. Di telefon, 100% - 2rem lebih kecil, jadi kotak memenuhi skrin tolak ruang 1rem di setiap sisi. Di skrin lebar, 70rem lebih kecil, jadi kotak berhenti membesar.
Di dalam min() anda boleh terus buat kiraan (100% - 2 * var(...)) — tak perlu calc().
margin-inline: auto bahagikan ruang lebihan sama rata di kiri dan kanan, jadi kotak berada di tengah. Ini versi logical property bagi margin-left: auto; margin-right: auto dan turut berfungsi untuk bahasa kanan-ke-kiri.

Corak lama

CSS

.container {
  max-width: 70rem;
  margin: 0 auto;
  padding: 0 1rem;
}

Dengan min()

CSS

.container {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
}

Kedua-duanya berfungsi. Versi min() biarkan padding bebas untuk kegunaan lain (latar, border) kerana ruang tepi sudah termasuk dalam lebar.

Nak faham box model di sebalik ini? Cuba trek Web, atau buka Playground dan ubah saiz preview dengan butang Telefon / Tablet.

Cara guna

HTML

<main class="container">
  <h1>My page</h1>
  <p>Content stays centred with a gutter on small screens.</p>
</main>

<article class="container container--narrow">
  <p>Long text reads better at around 60–75 characters per line.</p>
</article>