Bố cục linh hoạt thời trang với lưới CSS

Sep 16, 2025

Cách

Lưới CSS là hoàn hảo để tạo bố cục hai trục của các hàng và cột. Cú pháp rất đơn giản và làm cho bố cục trang một cách dễ dàng. Bố cục có yêu cầu nhiều thùng chứa lồng nhau bây giờ có thể được mô tả đơn giản trong CSS.

Lưới hoạt động khác nhau với các thuộc tính bố cục khác, vì áp dụng giá trị 'lưới' cho thuộc tính 'hiển thị' sẽ ảnh hưởng đến bất kỳ trẻ em trực tiếp nào. Các yếu tố này hiện là các mục lưới và sẽ được định vị theo các quy tắc bạn đặt trên cha mẹ (trừ khi được đặt đặc biệt).

Bắt đầu nắm với lưới

Lưới mang đến một số tính năng mới:

Gap Gap.

Thay vì sử dụng lề, lưới có tài sản riêng để xác định khoảng cách giữa các vật phẩm lưới, cho phép bố cục của lưới được xác định và không bị ảnh hưởng bởi bất kỳ khoảng trống nào. Các hệ thống lưới (giống như các hệ thống được tìm thấy trong bootstrap inuit và twitter) thường dựa vào cài đặt lề phủ định để sắp xếp tất cả mọi thứ một cách chính xác.

ĐƠN VỊ FR.

Ngắn cho phân số, đơn vị đo lường mới này được sử dụng để phân tách bố cục thành phân số, có hoặc không có khoảng cách.

Vị trí lưới

Lưới CSS cho phép bất kỳ yếu tố nào được ưu tiên và định vị bất cứ nơi nào trên lưới trước tất cả các mục khác, sau đó được định vị tự động.

Khu vực lưới và mẫu

Các khu vực được đặt tên trên lưới được xác định, sau đó có thể được tham chiếu để xác định bố cục trong một thời trang gần như ASCII.

nhỏ nhất lớn nhất()

Giá trị thuộc tính 'MINMAX () cho phép bạn áp dụng kích thước tối thiểu và tối đa cho các mục, cột và hàng lưới. Tính năng này đáng buồn bị thiếu từ Flexbox và mọi mô-đun bố cục khác trong CSS.

Xây dựng lưới điện của bạn

Các khu vực và mẫu mạnh mẽ của CSS cho phép các bố cục phức tạp dễ dàng đạt được. Bạn bắt đầu bằng cách áp dụng tên vào các phần tử trong lưới bằng cách sử dụng thuộc tính 'khu vực lưới' - ví dụ 'tiêu đề {Lưới: Tiêu đề; } '. Khi bạn đã đặt tên tất cả các khu vực trong lưới của mình, sau đó bạn có thể sử dụng thuộc tính 'Mẫu Lưới-Mẫu' để mô tả bố cục.

 Mẫu lưới-Khu vực:
  "Tiêu đề tiêu đề tiêu đề"
  "Tay bên trái bài viết bên phải"
  "Chân trang chân chân"
;

Ví dụ về mã ở trên mô tả lưới ba by ba, bạn chỉ cần lặp lại tên của mục lưới nếu bạn muốn nó trải rộng nhiều cột hoặc hàng. Bạn cũng có thể sử dụng các truy vấn phương tiện để thay đổi bố cục lưới cho các màn hình có kích thước khác nhau.

Sau đó, bạn có thể sử dụng đơn vị 'fr' mới để xác định cách chia chiều rộng giữa các cột khác nhau:

 Mẫu lưới-Cột: 1FR 3fr 1fr;

Ví dụ hiển thị ở trên sẽ chia chiều rộng có sẵn thành năm giá trị chiều rộng bằng nhau; Nói cách khác, nó sẽ áp dụng một phần năm vào cột đầu tiên, ba phần năm đến cột thứ hai và thứ năm cuối cùng đến cột cuối cùng.

Để kích thước các hàng, bạn có thể sử dụng giá trị thuộc tính 'minmax' mới để kích thước các cột trên cùng và dưới cùng với nội dung của chúng và sau đó cho phép hàng giữa xoay khoảng không gian còn lại trong lưới.

 Mẫu lưới-Rows:
  MINMAX (MIN-NỘI DUNG, MAX-NỘI DUNG)
  Tự động
minmax (nội dung tối thiểu, hàm lượng tối đa);

Bài viết này ban đầu được xuất bản trong số phát hành 271 của Trình thiết kế web thiết kế web sáng tạo. Mua Vấn đề 271. hoặc là Theo dõi nhà thiết kế web .

Bạn muốn tăng cường kỹ năng lưới CSS của bạn?

Brenda Storer is giving her talk Using CSS Grid in the Real World at Generate New York from 25 - 27 April 2018 — Brenda Storer đang nói chuyện với cô ấy bằng cách sử dụng lưới CSS trong thế giới thực tại Gener New York từ 25 - 27 tháng 4 năm 2018

Là một nhà thiết kế và nhà phát triển tiền tuyến tại cơ quan phát triển phần mềm, Brenda Storer đã sử dụng lưới CSS trong sản xuất cho các trang web kể từ khi phát hành ban đầu cho các trình duyệt vào tháng 3 năm 2017 và là một người hâm mộ lớn.

Trong cuộc nói chuyện của cô ấy tại Tạo New York từ ngày 25-27 tháng 4 năm 2018 , Brenda sẽ hiển thị từng bước Cách bạn có thể tăng cường dần dần trang web của mình bằng lưới CSS và viết một dự phòng chống đạn cho các trình duyệt cũ hơn (hoặc thậm chí tiếp tục sử dụng khung lưới hiện tại của bạn dưới dạng dự phòng), tất cả đều có CSS thuần túy: Không cần JavaScript .

Tạo New York diễn ra từ ngày 25-27 tháng 4 năm 2018. Nhận vé của bạn bây giờ .

Những bài viết liên quan:

Bí mật bố trí lưới CSS được tiết lộ
Tạo một bố cục đáp ứng với lưới CSS
Tăng tốc với lưới CSS

Bố cục linh hoạt thời trang với lưới CSS

Bắt đầu nắm với lưới

Xây dựng lưới điện của bạn

Bạn muốn tăng cường kỹ năng lưới CSS của bạn?

Cách - Các bài báo phổ biến nhất

Cách tránh một ngày Amazon Prime 2020 thất bại

Làm việc thông minh với UI ZBrush của bạn

Bắt đầu với Redux Thunk

rải rác cây với V-Ray

Cách sử dụng Markdown trong phát triển web

trồng cây ở Houdini

Biến thiết kế 2D của bạn thành 3D với Project Felix

Cách thiết kế quảng cáo cho một thương hiệu tưởng tượng

Thể loại