GALAXY TECH
Chuyên gia Công nghệ
Thứ năm, 15/12/2016 | 00:00 GMT+7

Bố cục lưới CSS: Giới thiệu

Flexbox rất tuyệt, nhưng mục đích chính của nó là giúp ta định vị các phần tử theo một chiều, theo chiều ngang hoặc chiều dọc. Đối với toàn bộ trang, bố cục hai chiều, ta chủ yếu dựa vào các khuôn khổ như Bootstrap hoặc Foundation để cung cấp cho ta các lớp mà ta có thể sử dụng để tạo bố cục lưới. Một module mới, CSS Grid Layout , sắp có sẵn trong các trình duyệt, sẽ thay đổi tất cả điều đó.

Hãy cùng khám phá CSS Grid với một cái nhìn tổng quan rất ngắn gọn. Đầu tiên, một số điểm chính cần ghi nhớ:

  • Giống như với Flexbox, thứ tự nguồn không quan trọng với CSS Grid và các mục có thể dễ dàng được định vị lại tùy thuộc vào kích thước của khung nhìn.
  • Bạn có thể bắt đầu sử dụng bố cục lưới ngay bây giờ và sử dụng tính năng phát hiện với @supports để nó chỉ được áp dụng trong các trình duyệt hỗ trợ.
  • Một số bố cục không thể thực hiện được ngay cả với hệ thống lưới của các khung CSS hiện đại sẽ có thể thực hiện được với CSS Grid.

Từ vựng

Một số khái niệm được giới thiệu với CSS Grid và bạn nên làm quen với từ vựng:

  • Dòng lưới : các mục được định vị trên lưới với các đường nơi mục bắt đầu và kết thúc, do đó, các đường lưới là trọng tâm đối với cách hoạt động của CSS Grid. Các đường lưới cột được đánh số từ trái sang phải bắt đầu bằng 1 và các đường lưới hàng được đánh số từ trên xuống dưới bắt đầu bằng 1.

Dòng hàng lưới 2

Đường lưới

  • Grid track : Khoảng trống giữa hai đường lưới.

Đường lưới

Đường lưới

  • Vùng lưới : Một vùng được xác định bởi 4 đường lưới bất kỳ.

Vùng lưới

Vùng lưới

  • Ô lưới : Khoảng trống giữa hai đường lưới cột và hàng liên tiếp. Đơn vị nhỏ nhất có thể trên lưới.

Ô lưới

Ô lưới

Hiển thị: lưới trên cha

Một chút giống như với flexbox, lưới được tổ chức với một phần tử containers và các phần tử con trở thành các mục lưới. Bạn chỉ cần đặt display: grid trên phần tử container. Các hàng và cột của lưới được xác định với các cột lưới-mẫu và các hàng-mẫu-lưới .

Hãy bắt đầu với đánh dấu sau:

<div class="container">   <div class="box box-1">Box 1</div>   <div class="box box-2">Box 2</div>   <div class="box box-3">Box 3</div>   <div class="box box-4">Box 4</div>   <div class="box box-5">Box 5</div>   <div class="box box-6">Box 6</div>   <div class="box box-7">Box 7</div> </div>

Đây là cách ta có thể xác định CSS cho containers :

.container {   display: grid;    grid-template-columns: 150px 150px 80px;   grid-template-rows: 100px auto;    grid-gap: 10px 15px; }

Với điều này, ta đã có được một cái gì đó thú vị, ngay cả khi không đặt bất kỳ thuộc tính nào trên các mục lưới:

Ví dụ về lưới CSS 1

Lưu ý cách ta đã thêm khoảng cách ngang 10px và khoảng cách dọc 15px giữa các ô bằng cách sử dụng lưới-gap .

Bây giờ ta có thể đi xa hơn bằng cách xác định dòng bắt đầu và dòng kết thúc của các mục cụ thể. Các mục không được đặt rõ ràng trên lưới sẽ được đặt theo một thuật toán. Ta sử dụng lưới-cột-bắt đầu , lưới-cột-kết thúc , lưới-hàng-bắt đầu và lưới-hàng-kết thúc để xác định vị trí một mục bắt đầu và kết thúc trên lưới:

.box-1 {   grid-column-start: 1;   grid-column-end: 3; }  .box-3 {   grid-column-start: 1;   grid-column-end: 3;   grid-row-start: 2;   grid-row-end: 4; }

Hoặc ta có thể sử dụng các viết tắt của lưới-cột và lưới-hàng cho cùng một kết quả:

.box-1 {   grid-column: 1 / 3; }  .box-3 {   grid-column: 1 / 3;   grid-row: 2 / 4; }

Đây là lưới kết quả bây giờ:

Ví dụ về lưới CSS 2

👉 Khoảng trống không thêm các đường lưới mới, vì vậy các mục ở cạnh nhau thực sự chạm vào cùng một đường, ngay cả khi một khoảng trống đang ngăn cách chúng.

Bố cục lưới CSS ngày nay

Thật không may, bố cục lưới vẫn chưa có sẵn trên diện rộng. Đây là tình trạng sẵn có hiện tại:

  • Được hỗ trợ theo mặc định trong Firefox kể từ version 52.
  • Được hỗ trợ đầy đủ trong Chrome và Opera mới nhất đằng sau một lá cờ.
  • Được hỗ trợ trong IE và Edge, nhưng với cú pháp cũ hơn.
  • Có sẵn trong Bản xem trước Công nghệ Safari mới nhất.

Chrome sẽ ra mắt version có Grid được bật theo mặc định vào tháng 3 năm 2017. Vì vậy, version này sẽ sớm ra mắt và năm 2017 rất có thể sẽ là năm của CSS Grid!

Bật trong Chrome

Để bật CSS Grid trong Chrome, hãy truy cập chrome: // flags / , tìm kiếm các tính năng của Nền tảng web thử nghiệm và bật nó.

Bật trong Firefox

Bố cục dạng lưới hiện đã được hỗ trợ với Firefox 52 trở lên.

Học nhiều hơn nữa

Ta giữ cho bài đăng này ngắn gọn và hấp dẫn, nhưng có nhiều khái niệm mới để học với CSS Grid, vì vậy ta chia nhiều khái niệm trong số chúng thành bài đăng của riêng chúng:

đọc thêm

Dưới đây là một số tài nguyên tuyệt vời để tìm hiểu chi tiết về CSS Grid:

Tags:

Các tin liên quan

Tạo kiểu văn bản giữ chỗ bằng CSS
2016-12-10
Các giá trị kế thừa, ban đầu và không đặt cho các thuộc tính CSS
2016-12-10
Tham chiếu bộ chọn CSS
2016-08-18
The: not Pseudo-Class trong CSS
2016-07-06
Hàm CSS attr ()
2016-06-20
Radial Gradients trong CSS
2016-06-13
Ngữ pháp tuyến tính trong CSS
2016-06-12
CSS: so khớp () Pseudo-Class
2016-06-02
Giới thiệu ngắn gọn về các biến CSS (Thuộc tính tùy chỉnh)
2016-06-01
Phát hiện tính năng trong CSS với @supports
2016-05-05