Bài đăng này nêu bật một vài dòng CSS mạnh mẽ giúp bạn thực hiện một số công việc nặng nhọc và giúp bạn xây dựng bố cục hiện đại, mạnh mẽ.
Xuất bản: Ngày 7 tháng 7 năm 2020, Lần cập nhật gần đây nhất: Ngày 15 tháng 12 năm 2025
Bố cục CSS hiện đại cho phép nhà phát triển viết các quy tắc định kiểu thực sự có ý nghĩa và mạnh mẽ chỉ bằng một vài lần nhấn phím. Bài nói chuyện ở trên và bài đăng tiếp theo này xem xét 10 dòng CSS mạnh mẽ có thể thực hiện một số công việc nặng nhọc.
Để theo dõi hoặc tự mình thử nghiệm các bản minh hoạ này, hãy xem trang web được nhúng ở trên hoặc truy cập vào 1linelayouts.com.
01. Căn giữa: place-items: center
Đối với bố cục "một dòng" đầu tiên, hãy giải quyết bí ẩn lớn nhất trong tất cả các vùng CSS: căn giữa mọi thứ. Tôi muốn bạn biết rằng việc này dễ hơn bạn nghĩ khi có place-items: center.
Trước tiên, hãy chỉ định grid làm phương thức display, sau đó viết place-items: center trên cùng một phần tử. place-items là viết tắt để đặt cả align-items và justify-items cùng một lúc. Bằng cách đặt thành center, cả align-items và justify-items đều được đặt thành center.
.parent {
display: grid;
place-items: center;
}
Điều này cho phép nội dung được căn giữa một cách hoàn hảo trong phần tử mẹ, bất kể kích thước nội tại.
02. Bánh kếp phân rã: flex: <grow> <shrink> <baseWidth>
Tiếp theo là món bánh kếp phân rã! Ví dụ: đây là bố cục phổ biến cho các trang web tiếp thị, có thể có một hàng gồm 3 mục, thường có hình ảnh, tiêu đề và một số văn bản mô tả một số tính năng của sản phẩm. Trên thiết bị di động, chúng ta muốn các thành phần này xếp chồng lên nhau một cách gọn gàng và mở rộng khi tăng kích thước màn hình.
Bằng cách sử dụng Flexbox cho hiệu ứng này, bạn sẽ không cần truy vấn phương tiện để điều chỉnh vị trí của các phần tử này khi màn hình đổi kích thước.
flex là viết tắt của: flex: <flex-grow> <flex-shrink> <flex-basis>.
Do đó, nếu bạn muốn các hộp lấp đầy kích thước <flex-basis>, thu nhỏ ở kích thước nhỏ hơn nhưng không kéo giãn để lấp đầy không gian bổ sung, hãy viết: flex: 0 1 <flex-basis>. Trong trường hợp này, <flex-basis> của bạn là 150px, nên sẽ có dạng như sau:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Nếu bạn muốn các hộp kéo giãn và lấp đầy không gian khi xuống dòng, hãy đặt <flex-grow> thành 1 để có kết quả như sau:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Bây giờ, khi bạn tăng hoặc giảm kích thước màn hình, các mục linh hoạt này sẽ thu nhỏ và tăng lên.
03. Thanh bên cho biết: grid-template-columns: minmax(<min>, <max>) …)
Bản minh hoạ này tận dụng hàm minmax cho bố cục lưới. Việc chúng ta đang làm ở đây là đặt kích thước thanh bên tối thiểu là 150px, nhưng trên màn hình lớn hơn, hãy để kích thước đó kéo dài đến 25%. Thanh bên sẽ luôn chiếm 25% không gian ngang của thành phần mẹ cho đến khi 25% đó nhỏ hơn 150px.
Thêm giá trị này làm giá trị của grid-template-columns với giá trị sau:
minmax(150px, 25%) 1fr. Mục trong cột đầu tiên (thanh bên trong trường hợp này) có minmax là 150px tại 25% và mục thứ hai (phần main ở đây) chiếm phần không gian còn lại dưới dạng một dải 1fr.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pancake Stack: grid-template-rows: auto 1fr auto
Không giống như ví dụ về Bánh kếp tách rời, ví dụ này không gói các phần tử con khi kích thước màn hình thay đổi. Thường được gọi là chân trang cố định, bố cục này thường được dùng cho cả trang web và ứng dụng, trên các ứng dụng di động (chân trang thường là thanh công cụ) và trang web (các ứng dụng trang đơn thường sử dụng bố cục chung này).
Việc thêm display: grid vào thành phần sẽ cung cấp cho bạn một lưới cột duy nhất, tuy nhiên, khu vực chính sẽ chỉ cao bằng nội dung có chân trang bên dưới.
Để chân trang dính vào cuối trang, hãy thêm:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Thao tác này sẽ đặt nội dung của phần đầu trang và chân trang tự động lấy kích thước của các phần tử con và áp dụng không gian còn lại (1fr) cho khu vực chính, trong khi hàng có kích thước auto sẽ lấy kích thước của nội dung tối thiểu của các phần tử con, vì vậy, khi nội dung đó tăng kích thước, hàng sẽ tự tăng lên để điều chỉnh.
05. Bố cục Holy Grail cổ điển: grid-template: auto 1fr auto / auto 1fr auto
Đối với bố cục "chén thánh" cổ điển này, có một tiêu đề, chân trang, thanh bên trái, thanh bên phải và nội dung chính. Bố cục này tương tự như bố cục trước, nhưng hiện có thanh bên!
Để viết toàn bộ lưới này bằng một dòng mã duy nhất, hãy sử dụng thuộc tính grid-template. Nhờ vậy, bạn có thể đặt cả hàng và cột cùng một lúc.
Cặp thuộc tính và giá trị là: grid-template: auto 1fr auto / auto 1fr auto. Dấu gạch chéo giữa danh sách được phân tách bằng dấu cách thứ nhất và thứ hai là dấu ngắt giữa các hàng và cột.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Như trong ví dụ trước, trong đó phần đầu trang và chân trang có nội dung có kích thước tự động, ở đây thanh bên trái và phải được tự động định kích thước dựa trên kích thước nội tại của phần tử con. Tuy nhiên, lần này là kích thước ngang (chiều rộng) thay vì dọc (chiều cao).
06. Lưới 12 cột: grid-template-columns: repeat(12, 1fr)
Tiếp theo là một bố cục kinh điển khác: lưới 12 cột. Bạn có thể nhanh chóng viết lưới trong CSS bằng hàm repeat(). Khi sử dụng: repeat(12, 1fr); cho các cột mẫu lưới, bạn sẽ có 12 cột, mỗi cột có 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Bây giờ, bạn đã có một lưới theo dõi 12 cột, chúng ta có thể đặt các thành phần con trên lưới. Một cách để làm việc này là đặt các phần tử bằng đường lưới. Ví dụ: grid-column: 1 / 13 sẽ kéo dài từ dòng đầu tiên đến dòng cuối cùng (thứ 13) và kéo dài 12 cột. grid-column: 1 / 5; sẽ kéo dài 4 cột đầu tiên.
Một cách khác để viết câu lệnh này là sử dụng từ khoá span. Với span, bạn đặt đường bắt đầu, sau đó đặt số cột cần kéo dài từ điểm bắt đầu đó. Trong trường hợp này, grid-column: 1 / span 12 sẽ tương đương với grid-column: 1 / 13 và grid-column: 2 / span 6 sẽ tương đương với grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Lặp lại, Tự động, Tối thiểu/Tối đa): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Đối với ví dụ thứ bảy này, hãy kết hợp một số khái niệm bạn đã tìm hiểu để tạo bố cục thích ứng với các phần tử con linh hoạt và được đặt tự động. Khá gọn gàng. Các thuật ngữ chính cần nhớ ở đây là repeat, auto-(fit|fill) và minmax()', bạn có thể nhớ bằng từ viết tắt RAM.
Khi kết hợp tất cả, mã sẽ có dạng như sau:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Bạn đang sử dụng lại hàm repeat, nhưng lần này, bạn sử dụng từ khoá auto-fit thay vì một giá trị số rõ ràng. Thao tác này cho phép tự động đặt các phần tử con này. Các phần tử con này cũng có giá trị tối thiểu cơ bản là 150px và giá trị tối đa là 1fr, nghĩa là trên màn hình nhỏ hơn, các phần tử này sẽ chiếm toàn bộ chiều rộng 1fr và khi mỗi phần tử đạt đến chiều rộng 150px, các phần tử này sẽ bắt đầu chuyển sang cùng một dòng.
Với auto-fit, các hộp sẽ kéo giãn khi kích thước ngang vượt quá 150px để lấp đầy toàn bộ không gian còn lại. Tuy nhiên, nếu bạn thay đổi giá trị này thành auto-fill, thì các mục này sẽ không kéo giãn khi vượt quá kích thước cơ sở trong hàm minmax:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Đội hình: justify-content: space-between
Đối với bố cục tiếp theo, điểm chính cần minh hoạ ở đây là justify-content: space-between. Thuộc tính này đặt các phần tử con đầu tiên và cuối cùng ở các cạnh của hộp giới hạn, còn không gian còn lại được phân bổ đều giữa các phần tử. Đối với các thẻ này, chúng được đặt ở chế độ hiển thị Flexbox, với hướng được đặt thành cột bằng flex-direction: column.
Thao tác này sẽ đặt khối tiêu đề, nội dung mô tả và hình ảnh vào một cột dọc bên trong thẻ mẹ. Sau đó, việc áp dụng justify-content: space-between sẽ neo phần tử đầu tiên (tiêu đề) và phần tử cuối cùng (khối hình ảnh) vào các cạnh của flexbox, còn văn bản mô tả ở giữa các phần tử đó sẽ được đặt với khoảng cách bằng nhau đến mỗi điểm cuối.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Clamping My Style: clamp(<min>, <actual>, <max>)
Sau đây là một số kỹ thuật có ý nghĩa thực sự thú vị đối với bố cục và thiết kế giao diện người dùng thích ứng. Trong bản minh hoạ này, bạn sẽ đặt chiều rộng bằng cách sử dụng hàm clamp như sau: width: clamp(<min>, <actual>, <max>).
Thao tác này sẽ đặt kích thước tối thiểu và tối đa tuyệt đối, cũng như kích thước thực tế. Với các giá trị, thuộc tính đó có thể như sau:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Kích thước tối thiểu ở đây là 23ch hoặc 23 đơn vị ký tự và kích thước tối đa là 46ch, 46 ký tự. Đơn vị chiều rộng ký tự dựa trên cỡ chữ của phần tử (cụ thể là chiều rộng của ký tự 0). Kích thước "thực tế" là 50%, tức là 50% chiều rộng của phần tử mẹ của phần tử này.
Hàm clamp() ở đây cho phép phần tử này giữ lại chiều rộng 50% cho đến khi 50% lớn hơn 46ch (trên khung nhìn rộng hơn) hoặc nhỏ hơn 23ch (trên khung nhìn nhỏ hơn). Bạn có thể thấy rằng khi tôi kéo giãn và thu nhỏ kích thước của thành phần mẹ, chiều rộng của thẻ này sẽ tăng lên đến điểm tối đa được kẹp và giảm xuống mức tối thiểu được kẹp. Sau đó, thành phần này sẽ được căn giữa trong thành phần mẹ vì chúng ta đã áp dụng các thuộc tính bổ sung để căn giữa thành phần này. Điều này giúp bố cục dễ đọc hơn vì văn bản sẽ không quá rộng (trên 46ch) hoặc quá hẹp và bị nén (dưới 23ch).
Đây cũng là một cách hiệu quả để triển khai kiểu chữ thích ứng. Ví dụ: bạn có thể viết: font-size: clamp(1.5rem, 20vw, 3rem). Trong trường hợp này, cỡ chữ của dòng tiêu đề sẽ luôn được giới hạn trong khoảng từ 1.5rem đến 3rem, nhưng sẽ tăng và giảm dựa trên giá trị thực tế 20vw để vừa với chiều rộng của khung nhìn.
Đây là một kỹ thuật tuyệt vời để đảm bảo mức độ dễ đọc với giá trị kích thước tối thiểu và tối đa.
10. Tôn trọng tỷ lệ khung hình: aspect-ratio: <width> / <height>
Và cuối cùng, bố cục cuối cùng này giải quyết một vấn đề thường gặp là duy trì tỷ lệ khung hình của hình ảnh.
Với thuộc tính aspect-ratio, khi tôi đổi kích thước thẻ, khối hình ảnh màu xanh lục sẽ duy trì tỷ lệ khung hình 16 x 9 này. Chúng ta sẽ giữ nguyên tỷ lệ khung hình bằng aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Để duy trì tỷ lệ khung hình 16 x 9 mà không có thuộc tính này, bạn cần sử dụng padding-top hack và đặt khoảng đệm là 56.25% để đặt tỷ lệ giữa chiều cao và chiều rộng. Chúng tôi sẽ sớm có một thuộc tính cho việc này để tránh bị tấn công và không cần phải tính tỷ lệ phần trăm. Bạn có thể tạo hình vuông có tỷ lệ 1 / 1, tỷ lệ 2:1 có 2 / 1 và bất cứ tỷ lệ nào bạn cần để hình ảnh này điều chỉnh theo tỷ lệ kích thước đã đặt.
.square {
aspect-ratio: 1 / 1;
}
Đây là một tính năng hay mà bạn nên biết vì tính năng này giải quyết được nhiều vấn đề mà nhà phát triển gặp phải, đặc biệt là khi liên quan đến video và iframe.
Kết luận
Cảm ơn bạn đã theo dõi hành trình này qua 10 dòng CSS mạnh mẽ. Để tìm hiểu thêm, hãy xem toàn bộ video.