Điền css

Bố cục lưới CSS (hay còn gọi là “Lưới” hoặc “Lưới CSS”), là một hệ thống bố cục dựa trên lưới hai chiều, so với bất kỳ hệ thống bố cục web nào trước đây, thay đổi hoàn toàn cách chúng ta thiết kế giao diện người dùng. CSS luôn được sử dụng để bố trí các trang web của chúng tôi, nhưng nó chưa bao giờ hoàn thành tốt công việc của nó. Đầu tiên, chúng tôi sử dụng bảng, sau đó là float, định vị và khối nội tuyến, nhưng tất cả các phương pháp này về cơ bản đều là hack và bỏ qua nhiều chức năng quan trọng (ví dụ: định tâm theo chiều dọc). Flexbox cũng là một công cụ bố cục rất tuyệt vời, nhưng luồng một chiều của nó có các trường hợp sử dụng khác nhau — và chúng thực sự hoạt động khá tốt với nhau. Lưới là mô-đun CSS đầu tiên được tạo riêng để giải quyết các vấn đề về bố cục mà tất cả chúng ta đã và đang tìm cách giải quyết trong suốt thời gian chúng ta tạo trang web

Mục đích của hướng dẫn này là trình bày các khái niệm Lưới khi chúng tồn tại trong phiên bản mới nhất của thông số kỹ thuật. Vì vậy, tôi sẽ không đề cập đến cú pháp lỗi thời của Internet Explorer (mặc dù bạn hoàn toàn có thể sử dụng Grid trong IE 11) hoặc các bản hack lịch sử khác

Khái niệm cơ bản về lưới CSS

Kể từ tháng 3 năm 2017, hầu hết các trình duyệt đều cung cấp hỗ trợ gốc, không tiền tố cho CSS Grid. Chrome (kể cả trên Android), Firefox, Safari (kể cả trên iOS) và Opera. Mặt khác, Internet Explorer 10 và 11 hỗ trợ nó, nhưng đó là một triển khai cũ với cú pháp lỗi thời. Bây giờ là lúc để xây dựng với lưới

Để bắt đầu, bạn phải xác định phần tử vùng chứa dưới dạng lưới với 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

1, đặt kích thước cột và hàng với 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

2 và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

3, sau đó đặt các phần tử con của nó vào lưới với 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

4 và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

5. Tương tự như flexbox, thứ tự nguồn của các grid item không quan trọng. CSS của bạn có thể đặt chúng theo bất kỳ thứ tự nào, điều này giúp bạn dễ dàng sắp xếp lại lưới của mình bằng các truy vấn phương tiện. Hãy tưởng tượng việc xác định bố cục của toàn bộ trang của bạn, sau đó sắp xếp lại hoàn toàn nó để phù hợp với chiều rộng màn hình khác nhau chỉ với một vài dòng CSS. Lưới là một trong những mô-đun CSS mạnh nhất từng được giới thiệu

Thuật ngữ Lưới CSS quan trọng

Trước khi đi sâu vào các khái niệm về Lưới, điều quan trọng là phải hiểu thuật ngữ. Vì các thuật ngữ liên quan ở đây đều giống nhau về mặt khái niệm, nên rất dễ nhầm lẫn chúng với nhau nếu trước tiên bạn không ghi nhớ ý nghĩa của chúng được xác định bởi đặc tả Grid. Nhưng đừng lo lắng, không có nhiều người trong số họ

Hộp chứa lưới

Thành phần mà 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

6 được áp dụng. Nó là cha mẹ trực tiếp của tất cả các mục lưới. Trong ví dụ này 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

7 là vùng chứa lưới

Đường lưới

Các đường phân chia tạo nên cấu trúc của lưới. Chúng có thể theo chiều dọc (“đường lưới cột”) hoặc chiều ngang (“đường lưới hàng”) và nằm ở hai bên của hàng hoặc cột. Ở đây, đường màu vàng là một ví dụ về đường lưới cột

Theo dõi lưới

Khoảng cách giữa hai đường lưới liền kề. Bạn có thể coi chúng là các cột hoặc hàng của lưới. Đây là đường lưới giữa các đường lưới của hàng thứ hai và hàng thứ ba

Diện tích lưới

Tổng không gian được bao quanh bởi bốn đường lưới. Một vùng lưới có thể bao gồm bất kỳ số lượng ô lưới nào. Đây là khu vực lưới giữa các dòng lưới hàng 1 và 3, và các dòng lưới cột 1 và 3

Mục lưới

Những đứa trẻ (tôi. e. con cháu trực tiếp) của vùng chứa lưới. Ở đây, 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

8 phần tử là các mục lưới, nhưng 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

9 không phải

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

0

Ô lưới

Khoảng cách giữa hai hàng liền kề và hai đường lưới cột liền kề. Đó là một "đơn vị" duy nhất của lưới điện. Đây là ô lưới giữa các dòng lưới hàng 1 và 2, và các dòng lưới cột 2 và 3

Thuộc tính lưới CSS

Thuộc tính dành cho cấp độ gốc
(Bộ chứa lưới)

Nhảy liên kết

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  000

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  001

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  002

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  003

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  004

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  005

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  006

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  007

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  008

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  009

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  010

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  011

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  012

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  013

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  014

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  015

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  016

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  017

trưng bày

Xác định phần tử dưới dạng bộ chứa lưới và thiết lập bối cảnh định dạng lưới mới cho nội dung của nó

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  017 – tạo lưới cấp khối

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  019 – tạo lưới cấp độ nội tuyến

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

1

Khả năng truyền tham số lưới xuống thông qua các phần tử lồng nhau (còn gọi là lưới con) đã được chuyển sang cấp 2 của đặc tả Lưới CSS. Sau đây là giải thích nhanh

lưới-mẫu-cột
lưới-mẫu-hàng

Xác định các cột và hàng của lưới với danh sách các giá trị được phân tách bằng dấu cách. Các giá trị biểu thị kích thước bản nhạc và khoảng cách giữa chúng biểu thị đường lưới

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  020 – có thể là độ dài, tỷ lệ phần trăm hoặc một phần không gian trống trong lưới bằng cách sử dụng đơn vị 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  021 (thêm về đơn vị này tại DigitalOcean)

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  022 – tên tùy ý bạn chọn

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

5

Các đường lưới được tự động gán các số dương từ các phép gán này (-1 là thay thế cho hàng cuối cùng)

Nhưng bạn có thể chọn đặt tên rõ ràng cho các dòng. Lưu ý cú pháp ngoặc cho tên dòng

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

6

Lưu ý rằng một dòng có thể có nhiều tên. Ví dụ ở đây dòng thứ 2 sẽ có 2 tên. row1-end và row2-start.

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

7

Nếu định nghĩa của bạn chứa các phần lặp lại, bạn có thể sử dụng ký hiệu 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

023 để hợp lý hóa mọi thứ

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

9

Cái nào tương đương với cái này

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

0

Nếu nhiều dòng chia sẻ cùng một tên, chúng có thể được tham chiếu theo tên dòng của chúng và đếm

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

1

Đơn vị 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

024 cho phép bạn đặt kích thước của rãnh theo một phần không gian trống của vùng chứa lưới. Ví dụ: điều này sẽ đặt mỗi mục thành một phần ba chiều rộng của vùng chứa lưới

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

Dung lượng trống được tính sau bất kỳ mục nào không linh hoạt. Trong ví dụ này, tổng dung lượng trống có sẵn cho các đơn vị 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

024 không bao gồm 50px

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

00

grid-template-khu vực

Xác định mẫu lưới bằng cách tham chiếu tên của các khu vực lưới được chỉ định với thuộc tính 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

026. Việc lặp lại tên của một vùng lưới khiến nội dung trải rộng trên các ô đó. Dấu chấm biểu thị một ô trống. Bản thân cú pháp cung cấp một hình ảnh trực quan về cấu trúc của lưới

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  027 – tên của vùng lưới được chỉ định bằng 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  028

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  029 – dấu chấm biểu thị một ô lưới trống

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  030 – không có khu vực lưới nào được xác định

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

01

Thí dụ

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

02

Điều đó sẽ tạo ra một lưới rộng bốn cột, cao ba hàng. Toàn bộ hàng trên cùng sẽ bao gồm khu vực tiêu đề. Hàng ở giữa sẽ bao gồm hai khu vực chính, một ô trống và một khu vực thanh bên. Hàng cuối cùng là tất cả chân trang

Mỗi hàng trong khai báo của bạn cần có cùng số lượng ô

Bạn có thể sử dụng bất kỳ số lượng dấu chấm liền kề nào để khai báo một ô trống. Miễn là các dấu chấm không có khoảng cách giữa chúng, chúng đại diện cho một ô duy nhất

Lưu ý rằng bạn không đặt tên các dòng theo cú pháp này, chỉ các khu vực. Khi bạn sử dụng cú pháp này, các dòng ở hai đầu của khu vực thực sự được đặt tên tự động. Nếu tên vùng lưới của bạn là foo, thì tên của dòng hàng bắt đầu và dòng cột bắt đầu của vùng sẽ là foo-start, còn tên của dòng hàng cuối cùng và dòng cột cuối cùng sẽ là foo-end. Điều này có nghĩa là một số dòng có thể có nhiều tên, chẳng hạn như dòng ngoài cùng bên trái trong ví dụ trên, sẽ có ba tên. bắt đầu đầu trang, bắt đầu chính và bắt đầu chân trang

mẫu lưới

Viết tắt để thiết lập 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

3, 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

2, và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

033 trong một khai báo

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  030 – đặt cả ba thuộc tính về giá trị ban đầu

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  035 / 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  036> – đặt 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  2 và 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  3 tương ứng với các giá trị được chỉ định và đặt 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  033 thành 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  030

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

03

Nó cũng chấp nhận một cú pháp phức tạp hơn nhưng khá tiện dụng để chỉ định cả ba. Đây là một ví dụ

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

04

Điều đó tương đương với điều này

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

05

Vì 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

004 không đặt lại các thuộc tính lưới ẩn (

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

042, 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

043 và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

044), đây có thể là điều bạn muốn thực hiện trong hầu hết các trường hợp, nên bạn nên sử dụng thuộc tính 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

045 thay vì 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

004

khoảng cách cột
khoảng cách hàng
khoảng cách lưới-cột
khoảng cách lưới-hàng

Chỉ định kích thước của các đường lưới. Bạn có thể nghĩ nó giống như thiết lập độ rộng của rãnh giữa các cột/hàng

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  047 – giá trị độ dài

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

06

Thí dụ

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

07

Các rãnh chỉ được tạo giữa các cột/hàng, không phải trên các cạnh bên ngoài.

Ghi chú. Tiền tố 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

048 sẽ bị xóa và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

005 và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

006 được đổi tên thành 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

051 và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

052. Các thuộc tính không tiền tố đã được hỗ trợ trong Chrome 68+, Safari 11. 2 Bản phát hành 50+ và Opera 54+

khoảng cách
khoảng cách lưới

Viết tắt của 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

053 và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

054

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  055 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  056 – giá trị độ dài

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

08

Thí dụ

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

09

Nếu không có 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

053 được chỉ định, thì giá trị này được đặt thành cùng một giá trị như 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

054

Ghi chú. Tiền tố 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

048 không được dùng nữa (nhưng ai biết được, có thể không bao giờ thực sự bị xóa khỏi trình duyệt). Về cơ bản 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

007 được đổi tên thành 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

061. Thuộc tính không tiền tố đã được hỗ trợ trong Chrome 68+, Safari 11. 2 Bản phát hành 50+ và Opera 54+

biện minh-mục

Căn chỉnh các mục lưới dọc theo trục nội tuyến (hàng) (trái ngược với ________ 1062 căn dọc theo trục khối (cột)). Giá trị này áp dụng cho tất cả các mục lưới bên trong vùng chứa

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  063 – căn chỉnh các mục bằng phẳng với cạnh bắt đầu của ô của chúng

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  064 – căn chỉnh các mục sao cho phẳng với cạnh cuối của ô

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  065 – căn chỉnh các mục ở giữa ô của chúng

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  066 – lấp đầy toàn bộ chiều rộng của ô (đây là giá trị mặc định)

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

10

ví dụ

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

11

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

12

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

13

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

14

Hành vi này cũng có thể là .

sắp xếp các mục

Căn chỉnh các mục lưới dọc theo trục khối (cột) (trái ngược với ________ 1068 căn dọc theo trục nội tuyến (hàng)). Giá trị này áp dụng cho tất cả các mục lưới bên trong vùng chứa

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  066 – lấp đầy toàn bộ chiều cao của ô (đây là giá trị mặc định)

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  063 – căn chỉnh các mục bằng phẳng với cạnh bắt đầu của ô của chúng

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  064 – căn chỉnh các mục sao cho phẳng với cạnh cuối của ô

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  065 – căn chỉnh các mục ở giữa ô của chúng

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  073 – căn chỉnh các mục dọc theo đường cơ sở của văn bản. Có các công cụ sửa đổi thành

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  073 —

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  075 và

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  076 sẽ sử dụng đường cơ sở từ dòng đầu tiên hoặc dòng cuối cùng trong trường hợp văn bản nhiều dòng

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

15

ví dụ

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

16

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

17

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

18

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

19

Hành vi này cũng có thể là .

Ngoài ra còn có các từ khóa bổ nghĩa

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

078 và

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

079 (cách sử dụng giống như

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

080). Từ khóa

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

078 có nghĩa là “cố gắng căn chỉnh như thế này, nhưng không phải nếu nó có nghĩa là căn chỉnh một mục sao cho mục đó di chuyển vào khu vực tràn không thể tiếp cận”, trong khi đó,

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

079 sẽ cho phép di chuyển nội dung vào các khu vực không thể tiếp cận (“mất dữ liệu”)

mục địa điểm

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

010 đặt cả hai thuộc tính 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

009 và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

008 trong một khai báo

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  086 / 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  087 – Giá trị đầu tiên đặt 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  009, giá trị thứ hai 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  008. Nếu giá trị thứ hai bị bỏ qua, giá trị đầu tiên được gán cho cả hai thuộc tính

Để biết thêm chi tiết, hãy xem 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

009 và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

008

Điều này có thể rất hữu ích cho việc định tâm đa hướng siêu nhanh

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

50

biện minh cho nội dung

Đôi khi tổng kích thước lưới của bạn có thể nhỏ hơn kích thước vùng chứa lưới của nó. Điều này có thể xảy ra nếu tất cả các mục trong lưới của bạn được định kích thước bằng các đơn vị không linh hoạt như 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

092. Trong trường hợp này, bạn có thể đặt căn chỉnh của lưới trong vùng chứa lưới. Thuộc tính này căn chỉnh lưới dọc theo trục nội tuyến (hàng) (trái ngược với 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

093 căn chỉnh lưới dọc theo trục khối (cột))

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  063 – căn chỉnh lưới sao cho phẳng với cạnh bắt đầu của vùng chứa lưới

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  064 – căn chỉnh lưới sao cho phẳng với cạnh cuối của vùng chứa lưới

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  065 – căn chỉnh lưới ở giữa vùng chứa lưới

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  066 – thay đổi kích thước các mục lưới để cho phép lưới lấp đầy toàn bộ chiều rộng của vùng chứa lưới

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  098 – đặt một khoảng cách bằng nhau giữa mỗi mục lưới, với các khoảng trống có kích thước bằng một nửa ở các đầu xa

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  099 – đặt khoảng cách bằng nhau giữa mỗi mục lưới, không có khoảng trống ở các đầu xa

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  100 – đặt một khoảng cách bằng nhau giữa mỗi mục lưới, bao gồm cả các đầu xa

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

51

ví dụ

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

52

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

53

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

54

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

55

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

56

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

57

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

58

căn chỉnh nội dung

Đôi khi tổng kích thước lưới của bạn có thể nhỏ hơn kích thước vùng chứa lưới của nó. Điều này có thể xảy ra nếu tất cả các mục trong lưới của bạn được định kích thước bằng các đơn vị không linh hoạt như 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

092. Trong trường hợp này, bạn có thể đặt căn chỉnh của lưới trong vùng chứa lưới. Thuộc tính này căn chỉnh lưới dọc theo trục khối (cột) (trái ngược với 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

102 căn chỉnh lưới dọc theo trục (hàng) nội tuyến)

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  063 – căn chỉnh lưới sao cho phẳng với cạnh bắt đầu của vùng chứa lưới

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  064 – căn chỉnh lưới sao cho phẳng với cạnh cuối của vùng chứa lưới

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  065 – căn chỉnh lưới ở giữa vùng chứa lưới

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  066 – thay đổi kích thước các mục lưới để cho phép lưới lấp đầy toàn bộ chiều cao của vùng chứa lưới

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  098 – đặt khoảng cách bằng nhau giữa mỗi mục lưới, với khoảng cách bằng một nửa ở các đầu xa

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  108 – đặt khoảng cách bằng nhau giữa mỗi mục lưới, không có khoảng trống ở các đầu xa

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  100 – đặt một khoảng cách bằng nhau giữa mỗi mục lưới, bao gồm cả các đầu xa

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

59

ví dụ

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

60

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

61

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

62

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

63

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

64

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

65

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

66

nội dung địa điểm

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

013 đặt cả hai thuộc tính 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

012 và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

011 trong một khai báo

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  113 / 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  114 – Giá trị đầu tiên đặt 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  012, giá trị thứ hai 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  011. Nếu giá trị thứ hai bị bỏ qua, giá trị đầu tiên được gán cho cả hai thuộc tính

Tất cả các trình duyệt chính ngoại trừ Edge đều hỗ trợ thuộc tính tốc ký 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

013

Để biết thêm chi tiết, hãy xem 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

012 và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

011

grid-auto-columns
grid-auto-row

Chỉ định kích thước của bất kỳ rãnh lưới nào được tạo tự động (còn gọi là rãnh lưới ẩn). Các rãnh ẩn được tạo khi có nhiều mục lưới hơn các ô trong lưới hoặc khi một mục lưới được đặt bên ngoài lưới rõ ràng. (xem Sự khác biệt giữa lưới rõ ràng và ngầm định)

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  020 – có thể là độ dài, tỷ lệ phần trăm hoặc một phần không gian trống trong lưới (sử dụng đơn vị 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  121)

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

67

Để minh họa cách các rãnh lưới ẩn được tạo ra, hãy nghĩ về điều này

______368

Thao tác này tạo lưới 2 x 2.

Nhưng bây giờ, hãy tưởng tượng bạn sử dụng 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

4 và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

5 để định vị các mục lưới của mình như thế này

______369

Chúng tôi đã nói. item-b bắt đầu ở dòng cột 5 và kết thúc ở dòng cột 6, nhưng chúng tôi chưa bao giờ xác định dòng cột 5 hoặc 6. Bởi vì chúng tôi đã tham chiếu các dòng không tồn tại, nên các rãnh ẩn có chiều rộng bằng 0 được tạo để lấp đầy các khoảng trống. Chúng tôi có thể sử dụng 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

042 và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

043 để chỉ định độ rộng của các rãnh ẩn này.

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

70

grid-auto-flow

Nếu bạn có các mục lưới mà bạn không đặt rõ ràng trên lưới, thì thuật toán tự động sắp xếp sẽ khởi động để tự động đặt các mục. Thuộc tính này kiểm soát cách hoạt động của thuật toán tự động sắp xếp

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  126 – yêu cầu thuật toán tự động sắp xếp lần lượt điền vào từng hàng, thêm hàng mới nếu cần (mặc định)

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  127 – yêu cầu thuật toán tự động sắp xếp lần lượt điền vào từng cột, thêm các cột mới nếu cần

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  128 – yêu cầu thuật toán sắp xếp tự động cố gắng điền vào các lỗ sớm hơn trong lưới nếu các mục nhỏ hơn xuất hiện muộn hơn

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

71

Lưu ý rằng mật độ dày đặc chỉ thay đổi thứ tự trực quan của các mục và có thể khiến chúng xuất hiện không theo thứ tự, điều này không tốt cho khả năng tiếp cận

ví dụ

Hãy xem xét HTML này

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

72

Bạn xác định một lưới có năm cột và hai hàng, đồng thời đặt 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

016 thành 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

126 (cũng là giá trị mặc định)

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

73

Khi đặt các mục trên lưới, bạn chỉ xác định vị trí cho hai trong số chúng

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

74

Bởi vì chúng tôi đã đặt

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

016 thành

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

126, lưới của chúng tôi sẽ trông như thế này. Lưu ý cách ba mục chúng ta không đặt (mục-b, mục-c và mục-d) di chuyển trên các hàng có sẵn

Thay vào đó, nếu chúng ta đặt 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

016 thành 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

127, mục-b, mục-c và mục-d sẽ chảy xuống các cột

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

75

lưới

Cách viết tắt để đặt tất cả các thuộc tính sau trong một khai báo.

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

3, 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

2, 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

033, 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

043, 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

042 và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

044 (Lưu ý. Bạn chỉ có thể chỉ định các thuộc tính lưới rõ ràng hoặc ẩn trong một khai báo lưới duy nhất)

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  030 – đặt tất cả các thuộc tính phụ về giá trị ban đầu

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  142 – hoạt động giống như tốc ký 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  143 

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  144 – đặt 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  3 thành giá trị đã chỉ định. Nếu từ khóa 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  146 ở bên phải dấu gạch chéo, thì từ khóa đó sẽ đặt 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  044 thành 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  127. Nếu từ khóa 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  128 được chỉ định bổ sung, thì thuật toán sắp xếp tự động sẽ sử dụng thuật toán sắp xếp "dày đặc". Nếu 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  042 bị bỏ qua, nó sẽ được đặt thành 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  151

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  152 – đặt 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  2 thành giá trị đã chỉ định. Nếu từ khóa 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  146 ở bên trái dấu gạch chéo, thì từ khóa đó sẽ đặt 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  044 thành 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  126. Nếu từ khóa 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  128 được chỉ định bổ sung, thì thuật toán sắp xếp tự động sẽ sử dụng thuật toán sắp xếp "dày đặc". Nếu 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  043 bị bỏ qua, nó sẽ được đặt thành 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  151

ví dụ

Hai khối mã sau đây là tương đương

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

76

Hai khối mã sau đây là tương đương

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

77

Hai khối mã sau đây là tương đương

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

78

Và hai khối mã sau đây là tương đương

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

79

Nó cũng chấp nhận một cú pháp phức tạp hơn nhưng khá tiện dụng để thiết lập mọi thứ cùng một lúc. Bạn chỉ định 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

033, 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

3 và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

2, đồng thời tất cả các thuộc tính phụ khác được đặt thành giá trị ban đầu. Những gì bạn đang làm là chỉ định tên dòng và kích thước bản nhạc nội tuyến với các khu vực lưới tương ứng của chúng. Điều này là dễ nhất để mô tả với một ví dụ

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

90

Điều đó tương đương với điều này

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

91

Thuộc tính dành cho trẻ em
(Mục lưới)

Nhảy liên kết

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  163

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  164

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  165

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  166

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  167

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  168

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  59

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  170

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  171

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  172

Các thuộc tính

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

173, 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

174, 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

175, 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

176 và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

177 không có tác dụng đối với mục lưới

bắt đầu cột lưới
cột kết thúc lưới
bắt đầu hàng lưới
đường lưới

Xác định vị trí của một mục lưới trong lưới bằng cách tham chiếu đến các đường lưới cụ thể. ________ 3178/________ 3179 là dòng bắt đầu mục và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

180/

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

181 là dòng kết thúc mục

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  182 – có thể là một số để chỉ một đường lưới được đánh số hoặc một tên để chỉ một đường lưới được đặt tên

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  183 – mục sẽ trải rộng trên số lượng rãnh lưới được cung cấp

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  184 – mục sẽ trải dài cho đến khi chạm dòng tiếp theo với tên được cung cấp

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  151 – biểu thị vị trí tự động, khoảng tự động hoặc khoảng mặc định của một

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

92

ví dụ

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

93

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

94

Nếu không khai báo 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

180/

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

181 thì theo mặc định, mục sẽ mở rộng trên 1 rãnh.

Các mục có thể chồng lên nhau. Bạn có thể sử dụng 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

188 để kiểm soát thứ tự xếp chồng của chúng

Tìm hiểu thêm về ký hiệu

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

189 trong bài viết này của DigitalOcean

lưới-cột
lưới-hàng

Viết tắt của 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

190 + 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

191 và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

192 + 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

193, tương ứng

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  194 / 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  195 – mỗi giá trị chấp nhận tất cả các giá trị giống như phiên bản viết tay, bao gồm cả nhịp

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

95

Thí dụ

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

96

Nếu không có giá trị dòng kết thúc nào được khai báo, mục sẽ kéo dài 1 rãnh theo mặc định.

diện tích lưới

Đặt tên cho một mục để mục đó có thể được tham chiếu theo mẫu được tạo bằng thuộc tính 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

033. Ngoài ra, thuộc tính này có thể được sử dụng làm cách viết tắt thậm chí còn ngắn hơn cho 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

192 + 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

190 + 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

193 + 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

191

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  501 – tên bạn chọn

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  502 / 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  503 / 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  504 / 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  505 – có thể là số hoặc dòng được đặt tên

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

97

ví dụ

Như một cách để gán tên cho mục

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

98

Là cách viết tắt của 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

192 + 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

190 + 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

193 + 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

191

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

99

biện minh cho bản thân

Căn chỉnh một mục lưới bên trong một ô dọc theo trục nội tuyến (hàng) (trái ngược với 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

077 căn dọc theo trục khối (cột)). Giá trị này áp dụng cho một mục lưới bên trong một ô

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  063 – căn chỉnh mục lưới ngang hàng với cạnh bắt đầu của ô

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  064 – căn chỉnh mục lưới cho phẳng với cạnh cuối của ô

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  065 – căn chỉnh mục lưới ở giữa ô

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  066 – lấp đầy toàn bộ chiều rộng của ô (đây là giá trị mặc định)

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

00

ví dụ

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

01

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

02

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

03

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

04

Để đặt căn chỉnh cho tất cả .

tự sắp xếp

Căn chỉnh một mục lưới bên trong một ô dọc theo trục khối (cột) (trái ngược với 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

067 căn dọc theo trục nội tuyến (hàng)). Giá trị này áp dụng cho nội dung bên trong một mục lưới

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  063 – căn chỉnh mục lưới ngang hàng với cạnh bắt đầu của ô

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  064 – căn chỉnh mục lưới cho phẳng với cạnh cuối của ô

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  065 – căn chỉnh mục lưới ở giữa ô

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  066 – lấp đầy toàn bộ chiều cao của ô (đây là giá trị mặc định)

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

05

ví dụ

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

06

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

07

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

08

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

09

Để căn chỉnh tất cả các mục .

vị trí tự

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

522 đặt cả thuộc tính 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

523 và 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

524 trong một khai báo

giá trị

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  151 – Căn chỉnh “mặc định” cho chế độ bố cục

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  526 / 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  527 – Giá trị đầu tiên đặt 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  523, giá trị thứ hai 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  524. Nếu giá trị thứ hai bị bỏ qua, giá trị đầu tiên được gán cho cả hai thuộc tính

ví dụ

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

10

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

11

Tất cả các trình duyệt chính ngoại trừ Edge đều hỗ trợ thuộc tính tốc ký 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

522.

Đơn vị & chức năng đặc biệt

đơn vị fr

Bạn có thể sẽ sử dụng nhiều đơn vị phân số trong CSS Grid, chẳng hạn như

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

531. Về cơ bản, chúng có nghĩa là “phần không gian còn lại”. Vì vậy, một tuyên bố như

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

12

Có nghĩa là, một cách lỏng lẻo,

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

532. Ngoại trừ việc các giá trị phần trăm đó chắc chắn hơn nhiều so với các đơn vị phân số. Ví dụ: nếu bạn đã thêm phần đệm vào các cột dựa trên tỷ lệ phần trăm đó, thì bây giờ bạn đã phá vỡ 100% chiều rộng (giả sử mô hình hộp

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

533). Các đơn vị phân số cũng thân thiện hơn nhiều khi kết hợp với các đơn vị khác, như bạn có thể tưởng tượng

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

13

định cỡ từ khóa

Khi định cỡ hàng và cột, bạn có thể sử dụng tất cả độ dài mà bạn quen dùng, chẳng hạn như 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

092, rem, %, v.v., nhưng bạn cũng có từ khóa

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  535. kích thước tối thiểu của nội dung. Hãy tưởng tượng một dòng văn bản như “E pluribus unum”, nội dung tối thiểu có thể là chiều rộng của từ “pluribus”

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  536. kích thước tối đa của nội dung. Hãy tưởng tượng câu trên,

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  536 là độ dài của cả câu

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  151. từ khóa này rất giống với các đơn vị

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  024, ngoại trừ việc chúng “thua” trong cuộc chiến về kích thước so với các đơn vị

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  024 khi phân bổ không gian còn lại

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  541. sử dụng không gian có sẵn, nhưng không bao giờ ít hơn nội dung tối thiểu và không bao giờ nhiều hơn

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  536
• đơn vị phân số. xem ở trên

Chức năng định cỡ

• Hàm

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  543 thực hiện chính xác những gì nó có vẻ như. nó đặt giá trị tối thiểu và tối đa cho độ dài có thể. Điều này hữu ích khi kết hợp với các đơn vị tương đối. Giống như bạn có thể muốn một cột chỉ có thể thu nhỏ cho đến nay. Điều này cực kỳ hữu ích và có lẽ là những gì bạn muốn

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

14

• Hàm

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  544
• Hàm

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  545

Hàm repeat() và từ khóa

Hàm 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

023 có thể tiết kiệm một số thao tác nhập

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

15

Nhưng

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

023 có thể trở nên thú vị hơn khi kết hợp với từ khóa

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  548. Khớp càng nhiều cột càng tốt trên một hàng, ngay cả khi chúng trống

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  549 Lắp bất kỳ cột nào có vào không gian. Thích mở rộng các cột để lấp đầy khoảng trống hơn là các cột trống

Đây là đoạn trích nổi tiếng nhất trong tất cả CSS Grid và là một trong những thủ thuật CSS tuyệt vời nhất mọi thời đại

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

16

Sự khác biệt giữa các từ khóa được nêu chi tiết tại đây

nề

Một tính năng thử nghiệm của lưới CSS là bố cục khối xây. Lưu ý rằng có rất nhiều cách tiếp cận CSS nề, nhưng hầu hết chúng đều là thủ đoạn và có nhược điểm lớn hoặc không như bạn mong đợi

Thông số kỹ thuật hiện có một cách chính thức và đây là đằng sau một lá cờ trong Firefox

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

17

Xem bài viết của Rachel để tìm hiểu sâu

lưới con

Lưới con là một tính năng cực kỳ hữu ích của lưới cho phép các mục lưới có một lưới riêng kế thừa các đường lưới từ lưới mẹ

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

18

Điều này hiện chỉ được hỗ trợ trong Firefox, nhưng nó thực sự cần phải có ở mọi nơi

Cũng rất hữu ích khi biết về

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

550. Điều này không giống như lưới con, nhưng đôi khi nó có thể là một công cụ hữu ích theo cách tương tự

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

19

Hỗ trợ trình duyệt CSS Grid

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên

máy tính để bàn

ChromeFirefoxIEEdgeSafari575211*1610.1

Di động / Máy tính bảng

Android ChromeAndroid FirefoxAndroidiOS Safari107< . 310610710.3

Đoạn trích cột linh hoạt

Các cột có chiều rộng linh hoạt chia thành nhiều hoặc ít cột hơn khi có dung lượng, không có truy vấn phương tiện

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

0

Dự phòng nhúng CodePen

Hoạt hình lưới CSS

Theo thông số kỹ thuật Cấp 1 của Mô-đun Bố cục Lưới CSS, có 5 thuộc tính lưới có thể hoạt ảnh

• ________ 1007, ________ 1006, ________ 1005 dưới dạng độ dài, phần trăm, calc

• .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  001, 

  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }

  002 dưới dạng danh sách đơn giản về độ dài, tỷ lệ phần trăm hoặc calc, miễn là sự khác biệt duy nhất là các giá trị của độ dài, tỷ lệ phần trăm hoặc thành phần calc trong danh sách

Tại thời điểm viết bài này, chỉ hoạt ảnh của 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

556, 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

557, 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

558 được triển khai trong bất kỳ trình duyệt đã thử nghiệm nào