Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

CSS Grid Layout: Một hướng dẫn nhanh

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: Fluid Columns and Better Gutters

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Làm thế nào để cho chúng ta tiếp cận layout (kiểu bố trí) trên web đang thay đổi, và tiền đề của sự thay đổi đó là CSS Grid Layout. Phần hướng dẫn nhanh này sẽ bỏ qua các chi tiết và các sắc thái, thay vào đó giúp bạn hăng hái bắt tay vào làm, ngay bây giờ.

Trình duyệt của bạn

CSS Grid Layout (được biết đến như "Grid") đang trong quá trình phát triển, và cũng như bạn sẽ thấy trình duyệt hỗ trợ cho nó khá ít ỏi ở thời điểm hiện tại. Hiện tại để bắt đầu sử dụng nó, bạn sẽ hoặc là cần phải sử dụng IE11 (dù cái này sử dụng một phiên bản cũ hơn của bản đặc tả kỹ thuật), Microsoft Edge, Chrome Canary hoặc Firefox Nightly.

Tuy nhiên hướng tiếp cận dễ nhất là kích hoạt tính năng Experimental Web Platform trong Chrome: chrome://flags/#enable-experimental-web-platformfeatures.

Experimental Web Platform features in Google Chrome
Nhấp vào cái này

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.

Thuật ngữ

Nói một cách đơn giản nhất những chỉ dẫn này, hoặc các grid line, định khung ngang và dọc các grid track. Các grid track đóng vai trò như là các dòngcác cột, với các gutter (khoảng không gian giữa các dòng hay cột) chạy giữa chúng. Nơi mà các grid track ngang và dọc giao nhau, chúng ta có các cell (ô), rất giống với việc chúng ta sử dụng các table (bảng). Đây là những thuật ngữ quan trọng cần phải hiểu.

Trong hình bên dưới bạn sẽ thấy một grid minh hoạ, diễn tả:

  1. các grid line
  2. Các cột
  3. Các dòng
  4. Các ô
A basic grid highlighting grid lines columns rows and cells
Một grid cơ bản, làm nổi bật các grid line, cột, dòng và ô

Đối với một bố cục đồ hoạ, nó có thể trông quen hơn nếu chúng ta sử dụng grid hoàn toàn giống nhau, nhưng bỏ qua vài track để tạo ra các gutter giữa các khu vực nội dung.

  1. các gutter
Cùng một grid, nhưng lần này mang phong cách nổi bật giống với lá cờ Phần Lan

Có một thuật ngữ cuối cùng chúng ta cần phải làm rõ trước khi tìm hiểu phần tiếp theo:

  1. grid area
A grid area
Một trong nhiều grid area có thể có trong grid minh hoạ của chúng ta

Một grid area là bất kỳ phần nào của grid của chúng ta được bao lại bởi bốn grid line; nó có thể bao gồm bất kỳ số ô.

Đã đến lúc xây dựng grid này trên trình duyệt rồi! Hãy bắt đầu bằng một vài thẻ đánh dấu.

Thẻ đánh dấu Grid

Để tạo một grid như trên, chúng ta cần có một container (kho chứa) các phần tử; bất kỳ thứ gì mà bạn thích:

Trong đó chúng ta sẽ đặt chín phần tử con.

Fork pen khởi đầu này nếu bạn muốn kịp theo dõi. Tôi đã thêm vài style (kiểu) cơ bản để dễ phân biệt mỗi phần tử grid.

Các luật Grid

Trước nhất chúng ta cần định nghĩa rằng phần tử container của chúng ta là một grid bằng cách sử dụng một giá trị mới cho thuộc tính display:

Chính xác, thật là dễ. Tiếp theo chúng ta cần định nghĩa grid của chúng ta, bằng cách đặt bao nhiêu grid track mà nó sẽ có, cả chiều ngang và chiều dọc. Chúng ta làm điều đó bằng các thuộc tính grid-template-columnsgrid-template-rows:

Bạn sẽ lưu ý năm giá trị cho mỗi cái. Các giá trị cho grid-template-columns xác định rằng "cột đầu tiên nên rộng 150px, cái thứ hai rộng 20px, thứ ba rộng 150px", và cứ như thế xuyên suốt năm cột, nhiều hay ít hơn tuỳ thuộc vào hình lá cờ Phần Lan. Năm giá trị cho grid-template-rows xác định một số thứ tương tự. Mỗi cái sẽ mặc định là auto, lấy chiều cao từ nội dung, nhưng chúng ta muốn chính xác hơn với các gutter của chúng ta, cho chúng cao 20px, do đó chúng ta cần liệt kê tất cả năm dòng.

Mỗi phần tử của chúng ta đã được thiết tự động một grid area theo thứ tự thời gian. Không tệ, nhưng chuyện gì đã xảy ra với phần tử 2, 4, và 7? Chúng đã rơi vào trong các gutter dọc, bởi vì các gutter của chúng ta là các grid track hoàn toàn hợp quy luật và đó là nơi mà grid layout sẽ cho rằng chúng thuộc về nếu chúng ta không cụ thể hơn. Đến lúc thêm vài luật vào các phần tử của chúng ta.

Các luật của phần tử

Cú pháp khả dụng đối với chúng ta ở thời điểm hiện tại có thể khá phức tạp, nhưng chúng ta sẽ làm mọi thứ dễ dàng có thể bằng cách sử dụng một thuộc tính rút gọn. Chúng ta sẽ bắt đầu với phần tử đầu tiên của chúng ta, giả sử rằng chúng ta muốn nó bắt đầu tại grid-column 1 và grid-row 1:

Phần tử của chúng ta sẽ tự động lấp đầy khoảng không còn lại giữa các grid line. Phần tử thứ hai thì ít rõ ràng hơn. Chúng ta cũng muốn cái này bắt đầu trong grid-row 1, nhưng chúng ta muốn nó bỏ qua grid-column 2 và thay vào đó bắt đầu trong grid-column 3. Cột 2 sẽ được để rỗng để thành gutter của chúng ta.

Chúng ta tiếp tục giống như cái này, bỏ qua các cột và các dòng gutter của chúng ta, cuối cùng kết thúc với mục thứ chín của chúng ta.

Kết luận

Vậy đó, bạn đã tìm hiểu và làm quen với Grid! Hãy tóm tắt lại bốn bước cơ bản:

  1. Tạo một thành phần container, và định nghĩa nó là display: grid;.
  2. Sử dụng container đó để định nghĩa các grid track sử dụng các thuộc tính grid-template-columnsgrid-template-rows.
  3. Đặt các thành phần con bên trong container.
  4. Thiết lập nơi mà mỗi phần tử con thuộc về trong grid bằng cách định nghĩa grid-columngrid-row của nó.

Trong phần tiếp theo của loạt bài viết này chúng ta sẽ tìm hiểu kỹ hơn về cú pháp của Grid, cải tiến cách mà chúng ta định nghĩa các gutter của chúng ta, khảo sát các layout linh động, đơn vị fr, hàm repeat(), và nâng grid đơn giản của chúng ta lên một bước cao hơn. Hẹn gặp bạn ở đó!

Các nguồn tài nguyên hữu ích

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.