ตัวอย่างหน้าบทความตอบสนอง
.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 น้อย · จอกว้าง: เพิ่มคอลัมน์นำทางและระยะหายใจ