Được phổ biến từ 2016, CSS Grid Layout (được biết đến như “Grid”) như một phương án tối ưu dựng cho các web frontend hiện tại. Grid là một công cụ mạnh mẽ cho phép bố trí theo hai chiều trên website.
Nó giúp chúng ta giải quyết vấn đề tạo layout dễ dàng, linh động, giải quyết các vẫn đề liên quan đến các layout phức tạp hay và cung cấp giải pháp cho nhiều trường hợp khác nhau.
Với khả năng tuỳ biến layout rất mạnh thì nó có thể trở thành 1 công nghệ phát triển và phổ biến trong tương lai gần.
Khi nào sử dụng CSS Grid?
Nếu bạn quen thuộc với các kỹ thuật dựng layout đặc biệt là Flexbox – chúng ta sẽ sử dụng các kỹ thuật khác nhau phụ thuộc layout của design. Về mặt lý thuyết, sử dụng Grid so với Flexbox, có hai điều cần xem xét:
- Bố cục hai chiều hoặc một chiều.
- Một cách tiếp cận layout-first hoặc content-first.
Grid là hai chiều và tốt nhất cho việc xếp các mục theo hai hướng (cột và hàng) cùng một lúc. Grid cũng là một lựa chọn tuyệt vời cho cách tiếp cận layout-first. Điều này có nghĩa là chúng ta sẽ xác định layout của Grid trước sau đó đặt nội dung vào các layout Grid đã dựng trước đó.
Flexbox là một chiều và chỉ có thể tính toán và sắp xếp các mục theo một hướng tại một thời điểm – có thể là các mục theo hàng hoặc cột, nhưng không phải cả hai cùng một lúc. Flexbox hiệu quả hơn nếu chúng ta muốn sử dụng cách tiếp cận content-first – chúng ta phân phối và làm cho không gian có sẵn đáp ứng linh hoạt với nội dung.
Thiết lập một Grid
Grid cho phép chúng ta sắp xếp các thành phần trong một trang web, tuỳ thuộc vào các khu vực được tạo ra bởi các chỉ dẫn.
display: grid , display: inline-grid
Grid Lines
Các đường lưới là các đường dọc và ngang phân tách một lưới thành các hàng và cột. Chúng có giá trị bởi vì chúng ta có thể tham chiếu chúng để đặt rõ ràng các mục lưới bên trong một lưới. Các đường lưới được xác định bởi số lượng cột và hàng mà chúng tôi đặt rõ ràng cho lưới hoặc các cột được trình duyệt tự động đặt hoàn toàn. Trong ví dụ dưới đây, có bốn cột. Do đó, các dòng lưới cột bắt đầu từ 1 và kết thúc ở 5. Tương tự chúng ta có hai hàng, do đó các dòng lưới hàng bắt đầu từ 1 và kết thúc ở 3.
Grid Track
Grid Track là khoảng cách giữa các cột và các hàng.
Chúng ta xác định số lượng và kích thước của grid track sử dụng 2 thuộc tính grid-template-columns và grid-template-rows.
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 170px);
}
Grid Gap
Grid gap [gutter] là khoảng cách giữa 2 track được set thông qua 2 thuộc tính grid-column-gap và grid-row-gap
Thuộc tính shorthand của column-gap và row-gap là grid-gap bằng cách định nghĩa grid-row-gap sau đó là grid-column-gap. Nếu đặt cùng kích thước chúng ta chỉ cần sử dụng 1 giá trị.
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 170px);
/* Setting column and row gaps */
grid-column-gap: 40px;
grid-row-gap: 40px;
/* Shorthand */
grid-gap: 40px;
}
Grid Items
Tất cả các con trực tiếp của một grid container được gọi là các grid items.
Giống như Flexbox, bất kỳ phần tử nào không phải là con trực tiếp của grid containter sẽ không bị ảnh hưởng bởi các thuộc tính lưới. Chúng hiển thị theo normal flow của trang.
Đơn vị fr
Bên cạnh việc sử dụng các đơn vị quen thuộc như px, %, em, rem…bạn có thể dùng đến fr. fr, viết tắt của “fraction” (phân số), là một đơn vị kích thước mới được thiết kế dành riêng cho grid. 1fr tương ứng với một phần trong không gian trống của grid container. Chẳng hạn, bạn có thể khai báo một grid có 3 cột như sau:
Để bắt đầu tìm hiểu về fr, chúng ta hãy xem cách chúng ta thường nghĩ đến khi xây dựng một Grid trong CSS. Trong ví dụ dưới đây, chúng ta tạo một Grid 4 cột có chiều rộng bằng nhau.
HTML
<div class="grid"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
CSS
.grid {
width: 300px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
}
Tùy vào kích thước của wrapper, 1fr có thể sẽ có những giá trị khác. Trong trường hợp trên, 1fr sẽ bằng 300 / 3(px). Bạn đã thấy tại sao đơn vị này lại có tên là “phân số” chưa?.
Vậy nó có gì khác so với %?
Điểm khác biệt ở đây đã được in đậm ở trên, fr dựa vào không gian trống của grid container. Hãy xem ví dụ sau:
.grid {
width: 500px;
display: grid;
grid-template-columns: 1fr 50px 1fr;
grid-template-rows: 100px 100px;
}
Vì chúng ta đã quy định chiều rộng của cột thứ hai là 50px, nên chiều rộng của phần không gian trống là 500 - 50 = 450px. Vậy 1fr sẽ có giá trị là 450 / 2(px).
Canh chỉnh các phần tử của grid
Để canh chỉnh nội dung của các phần tử trong grid, chúng ta sử dụng 2 thuộc tính liên quan đến items: align-items và justify-items.
.grid {
align-items: start | end | center | stretch (mặc định);
justify-items: start | end | center | stretch (mặc định);
}
align-items giúp bạn chỉnh nội dung bên trong grid theo trục tung (trục y)
justify-items sẽ chỉnh nội dung theo trục hoành (trục x).
Bạn có thể dùng thuộc tính place-items để viết nhanh align-items và justify-items làm một.
.wrapper {
place-items: <align-items> <justify-items>;
}
Cuối cùng, để tác động đến một phần tử đơn lẻ, bạn có thể dùng:
.item {
align-self: start | end | center | stretch;
justify-self: start | end | center | stretch;
}
(3 lượt thả tim)
Loading...
