Tất cả các thẻ html5

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 đã tìm cách khắc phục 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