ตัวอย่างหน้าบทความตอบสนอง

.page {
  padding: 1rem;
}
.prose {
  max-width: 40rem;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .page {
    padding: 2rem;
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 2rem;
  }
  .prose { margin-inline: 0; max-width: none; }
}

อ่านโค้ด

มือถือ: เนื้อหาเดียวมี padding น้อย · จอกว้าง: เพิ่มคอลัมน์นำทางและระยะหายใจ