Những hàm và tính năng CSS hiện đại nào đơn giản hóa layout (clamp, aspect-ratio, subgrid)?

Question

Accepted Answer

CSS hiện đại đã thêm các hàm và thuộc tính thay thế cả những loại thủ thuật media-query và JavaScript. Những cái nổi bật:

## clamp() — giá trị linh hoạt, có giới hạn

```css
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
/*               │       │     └── tối đa (không bao giờ lớn hơn 3rem) */
/*               │       └──────── ưa thích (co giãn theo viewport) */
/*               └──────────────── tối thiểu (không bao giờ nhỏ hơn 1.5rem) */
```

`clamp(min, preferred, max)` cho **typography/spacing linh hoạt** co giãn mượt theo viewport nhưng giữ trong giới hạn — thay thế cả nhiều breakpoint của media query `font-size` bằng một dòng.

## aspect-ratio — giữ tỷ lệ

```css
.video { aspect-ratio: 16 / 9; width: 100%; } /* height tự tính để giữ 16:9 */
.avatar { aspect-ratio: 1; }                    /* vuông hoàn hảo ở mọi chiều rộng */
```

Trước đây, giữ một box 16:9 responsive đòi hỏi thủ thuật khét tiếng `padding-bottom: 56.25%`. Giờ chỉ là một khai báo — và nó giữ chỗ (tốt cho CLS) trước khi ảnh tải xong.

## min() / max()

```css
.container { width: min(90%, 1200px); } /* lấy giá trị NHỎ HƠN → linh hoạt nhưng có trần */
.box { padding: max(1rem, 3vw); }       /* lấy giá trị LỚN HƠN → một mức sàn tối thiểu */
```

`min()`/`max()` chọn giá trị nhỏ hơn/lớn hơn, cho phép một thuộc tính responsive mà không cần media query (ví dụ "rộng 90%, nhưng không bao giờ quá 1200px").

## subgrid — căn chỉnh các grid lồng nhau

```css
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
```

`subgrid` cho phép một grid lồng nhau **kế thừa các đường track của cha**, nên các item trên các card riêng biệt (title, body, button) căn chỉnh hoàn hảo trên các hàng chung — trước đây không thể làm nếu không có chiều cao cố định.

## gap ở mọi nơi & các trợ thủ logic

```css
.flex { display: flex; gap: 1rem; }   /* gap giờ hoạt động trong flexbox, không chỉ grid */
```

## Tại sao điều này quan trọng

Các tính năng này loại bỏ những thủ thuật tồn tại lâu nay: `clamp()`/`min()`/`max()` thay thế hàng loạt media query cho kích thước linh hoạt, `aspect-ratio` thay thế thủ thuật padding và bảo vệ khỏi layout shift, và `subgrid` giải quyết việc căn chỉnh xuyên component.

Chúng làm cho các layout responsive, theo tỷ lệ trở nên đơn giản và vững chắc hơn rất nhiều — CSS hiện đại làm một cách declarative những gì trước kia cần JS hoặc các thủ thuật mong manh.