Hướng dẫn dành cho người mới bắt đầu với CSS Grid

Ảnh của Greg Rakozy trên Bapt

Lần đầu tiên tôi nghe về CSS Grid vào cuối năm 2016. Tôi đang ngồi tại một trong những cuộc họp Tech Ladies® đầu tiên của tôi và một người tham dự đã đề cập đến việc nghe nó tuyệt vời như thế nào. Nhanh chóng chuyển tiếp một năm rưỡi sau đó và cuối cùng tôi cũng đào sâu hơn vào Lưới. Là một người dùng Flexbox tận tâm, tôi đã có thể biết đây sẽ là một người thay đổi trò chơi như thế nào.

Câu hỏi lớn nhất tôi có khi bắt đầu tìm hiểu về CSS Grid là: Grid khác với Flexbox như thế nào? Và tôi phát hiện ra rằng nói chung, Grid có thể làm mọi thứ mà Flexbox có thể làm. Một số người có suy nghĩ rằng Grid dành cho bố cục đa chiều trong khi Flexbox nên được sử dụng cho bố cục một chiều. Nhưng Grid cũng tuyệt vời ở bố cục một chiều - đặc biệt là nếu bạn quay lại sau và quyết định rằng bạn muốn làm cho bố cục đó đa chiều.

Thiết lập lưới CSS

Lưới rất dễ cài đặt - tất cả chỉ cần hai dòng CSS.

HTML

1   
2   
3   
4   
5   
6

CSS

.vỏ bánh {
    hiển thị: lưới;
    lưới-mẫu-cột: 10rem 10rem 10rem;
}

Và Voila! Bạn có một lưới. Nghiêm túc mà nói, tất cả những gì bạn cần. Nó rất tuyệt.

Bạn có thể nhận thấy rằng, không giống như khi cài đặt Flexbox để hiển thị: flex, việc thêm hiển thị: lưới vào trình bao bọc của bạn không ngay lập tức tạo ra sự khác biệt. Điều này là do bạn aren xác định rõ ràng có bao nhiêu cột bạn muốn lưới của bạn có. Bạn sẽ làm điều này với các cột lưới-mẫu như tôi đã làm ở trên. Vì vậy, trong ví dụ này, tôi cài đặt ba cột có chiều rộng 10rem mỗi cột.

Lưới CSS cơ bản

Bạn có thể sử dụng bất kỳ giá trị nào bạn muốn khi đặt cột lưới-mẫu-cột, nhưng tôi khuyên bạn nên tránh xa tỷ lệ phần trăm trừ khi bạn đang cố gắng thêm tối đa 100%. Điều này là do bạn sẽ phải lấy số lượng khoảng cách lưới (mà chúng tôi sẽ bổ sung vào một chút) và điều đó có thể gây ra một chút khó khăn.

Các bài hát rõ ràng và ẩn

Trước khi tôi nói về các bản nhạc rõ ràng và ẩn, trước tiên hãy nói về các bản nhạc. Các bản nhạc là cách các cột và hàng được đánh số. Thay vì tự mình đếm các cột và hàng riêng lẻ, trong CSS Grid, bạn đếm chúng theo các dòng theo dõi. Ở đây, mạng lưới chúng tôi bắt đầu với - Tôi đã đánh số tất cả các hàng và cột theo dõi để giúp bạn dễ nhìn hơn một chút.

Lưới CSS với các dòng cột và dòng hàng được đánh số

Bạn có thể thấy rằng chúng tôi thực sự có bốn dòng cột và ba dòng hàng. Điều này sẽ giúp khi đặt các mục của bạn trên lưới.

Một lưu ý phụ: nếu bạn sử dụng Firefox phiên bản dành cho nhà phát triển (phiên bản beta của Firefox thông thường) thì nó thực sự có một số công cụ phát triển tuyệt vời để xem các số theo dõi cột và hàng. Nếu bạn kiểm tra phần tử trình bao bọc của mình và sau đó chuyển đến tab bố cục, hãy chọn hộp cho trình bao bọc của bạn và bây giờ lưới của bạn sẽ trông như dưới đây! Tôi thực sự hy vọng Chrome sẽ thêm một tính năng kiểm tra như thế này trong tương lai. Nó rất hữu ích.

Công cụ kiểm tra phiên bản Firefox Developer

Hãy để Lùi quay trở lại sự khác biệt giữa các bản nhạc rõ ràng và ẩn. Nếu chúng tôi lấy mã của chúng tôi từ phía trên, bạn sẽ nhận thấy rằng chúng tôi chỉ thiết lập các cột. Trong trường hợp này, chúng tôi đã đặt rõ ràng các cột của chúng tôi có ba cột, nhưng chúng tôi đã ngầm đặt các hàng của chúng tôi. Chúng tôi có sáu mục, nhưng rõ ràng tất cả các mục này không thể vừa trong ba cột để hàng thứ hai được đặt ngầm.

Điều này hơi khó hiểu, vì vậy tôi chắc chắn khuyên bạn nên tự loay hoay với CSS Grid để thấy sự khác biệt giữa các bản nhạc rõ ràng và ẩn.

Thêm Grid-Gap

Hãy nghĩ về khoảng cách lưới như lề ngoại trừ nó sẽ chỉ được thêm vào giữa các mục và không ở bên ngoài lưới. Tôi đã gặp rất nhiều trường hợp khi tôi thêm ký quỹ vào các mục trong lưới Flexbox chỉ để đi đến trình bao bọc lưới Lưới và đặt cùng một mức ký quỹ, nhưng âm, để bù cho lề được đặt bên ngoài lưới. Rất may với CSS Grid, bạn không phải đối phó với điều đó.

Hãy để lấy ví dụ CSS của chúng tôi ở trên và thêm một số khoảng cách lưới.

.vỏ bánh {
  hiển thị: lưới;
  lưới-mẫu-cột: 10rem 10rem 10rem;
  khoảng cách lưới: 1rem;
}
Lưới CSS với 1rem của khoảng cách lưới

Tôi đã sử dụng khoảng cách lưới thuộc tính tốc ký, nhưng bạn có thể xác định một giá trị rõ ràng cho các cột và hàng bằng cách sử dụng khoảng cách giữa cột và cột lưới và khoảng cách hàng lưới.

* Lưu ý: Chrome 66 sẽ thay đổi khoảng cách lưới thành khoảng cách và khoảng cách giữa cột-cột / khoảng cách hàng lưới thành khoảng cách cột / khoảng cách hàng.

Hàm Lặp lại ()

Xác định độ rộng mà bạn muốn mỗi cột của bạn rộng bao nhiêu khi sử dụng các cột lưới mẫu với ba cột có cùng chiều rộng là khá đơn giản. Nhưng đó rất nhiều cách gõ nếu bạn muốn có nhiều cột hơn thế. Đây là nơi hàm repeat () xuất hiện.

Ở đây, ví dụ của chúng tôi, chúng tôi đã sử dụng hàm repeat () được thêm vào.

.vỏ bánh {
  hiển thị: lưới;
  lưới-mẫu-cột: lặp lại (3, 10rem);
  khoảng cách lưới: 1rem;
}

Như bạn có thể thấy trong CSS của mình, tôi đã cài đặt ba cột mỗi cột rộng 10 cột. Lưới này sẽ trông giống hệt như lưới được mô tả trong ví dụ về khoảng cách lưới của chúng tôi. Bằng cách sử dụng hàm repeat (), chúng tôi chỉ làm cho việc viết mọi thứ trở nên đơn giản và dễ đọc hơn khi bạn muốn đặt nhiều cột.

Đơn vị phân số

Các đơn vị phân số, hoặc fr, là một đơn vị độ dài CSS mới được giới thiệu với CSS Grid và là đơn vị mà tôi có thể thấy bản thân mình sử dụng mọi lúc. Nói rằng chúng tôi muốn ba cột có chiều rộng bằng nhau. Thay vì đặt chiều rộng: calc (100% / 3) trên các mục, chúng ta có thể sử dụng các đơn vị phân số. Hãy nghĩ về các đơn vị phân số là không gian trống miễn phí.

Hãy để tiếp tục với ví dụ của chúng tôi mà chúng tôi đã sử dụng.

.vỏ bánh {
  hiển thị: lưới;
  lưới-mẫu-cột: 1fr 1fr 1fr;
  khoảng cách lưới: 1rem;
}

Bạn có thể nhận thấy rằng điều duy nhất tôi đã thay đổi là các cột lưới-mẫu. Bây giờ tôi đang nói với trình duyệt rằng tôi muốn có ba cột và tôi muốn mỗi cột đó chiếm một đơn vị phân số hoặc một không gian trống.

Lưới CSS sử dụng các đơn vị phân số

Lý do mỗi mục rộng hơn một chút so với ví dụ trước của chúng tôi là vì chúng hiện đang chiếm nhiều không gian nhất có thể trong khi vẫn khớp trong ba cột. Trong trường hợp này, tôi đã thiết lập một chiều rộng cứng để chúng chiếm toàn bộ chiều rộng màn hình của tôi. Tôi biết điều này hơi khó nhìn nếu không có nó trên màn hình của chính bạn, vì vậy tôi chắc chắn khuyên bạn nên tự mình làm điều này.

Bạn cũng không cần phải đặt tất cả các cột của mình thành 1fr. Dưới đây là một ví dụ nơi tôi cài đặt cột đầu tiên và thứ ba của tôi thành 10 trong khi cột giữa của tôi là 1fr. Bạn cũng có thể đặt các cột của mình thành 2fr, 3fr, v.v. và các mục cột đó sẽ chiếm gấp 2, 3 lần (v.v.) dung lượng.

Lưới CSS chỉ với cột giữa được đặt thành 1fr

Định cỡ các mục lưới riêng lẻ

Hãy để nói chuyện về kích thước các mục lưới cá nhân của chúng tôi. Bạn không thể đặt chiều rộng cứng cho các mục riêng lẻ, vì chúng tôi đặt rõ ràng chiều rộng với các cột lưới-mẫu-cột. Nhưng nếu bạn muốn mục năm trong ví dụ của chúng tôi là chiều rộng của nhiều cột thì sao? Chúng ta có thể làm điều này bằng cách sử dụng cột lưới và nhịp.

.vỏ bánh {
  hiển thị: lưới;
  lưới-mẫu-cột: lặp lại (3, 10rem);
  khoảng cách lưới: 1rem;
}
.item5 {
  cột lưới: nhịp 2;
}

Bạn có thể thấy ở trên rằng chúng tôi thiết lập cột lưới của mục năm là một khoảng hai sẽ cho phép mục năm kéo dài theo chiều rộng của hai cột.

Lưới CSS với khoảng trên một mục riêng lẻ

Nhưng nếu bạn muốn mục năm kéo dài ba cột thì sao? Đây là những gì sẽ xảy ra.

CSS Grid bao gồm mục năm trên ba cột

Bởi vì mục năm tự nhiên bắt đầu ở cột thứ hai, chúng tôi không có đủ không gian cho nó để trải rộng tổng chiều rộng mà chúng tôi đã đặt. Vì vậy, nó sẽ di chuyển xuống hàng tiếp theo. Bạn có thể áp dụng cùng một khái niệm từ cột lưới sang hàng lưới nếu bạn muốn một mục để trải rộng nhiều hàng.

Có một giải pháp khá đơn giản để sửa chỗ trống mà Lừa còn lại từ mục năm di chuyển xuống một hàng. Nó có thể được sử dụng cho dù bạn có cài đặt một mục để mở rộng một hàng hay một cột lưới Grid-auto-Flow: dày đặc.

.vỏ bánh {
  hiển thị: lưới;
  lưới-mẫu-cột: lặp lại (3, 10rem);
  khoảng cách lưới: 1rem;
  lưới điện tự động: dày đặc;
}
.item5 {
  cột lưới: nhịp 3;
}

Trong CSS Grid, lưới sẽ tự động kiểm tra xem các mục có phù hợp không. Như tôi đã nói ở trên, nếu một vật phẩm không phù hợp thì nó sẽ bị phá vỡ sang dòng tiếp theo. Grid-auto-Flow: dense bảo lưới điền vào các khoảng trống đó với bất kỳ mục nào sẽ phù hợp. Trong trường hợp này, tôi đã thêm một mục lưới thứ bảy để lưới tự động di chuyển mục đó và mục thứ sáu vào các điểm trống.

CSS Grid sẽ luôn bố trí các mục cần đi vào một vị trí cụ thể trước tiên - trong trường hợp này là mục năm, vì nó trải dài ba cột. Sau đó, nếu bạn có chế độ tự động chuyển lưới: tập hợp dày đặc, nó sẽ tìm các mục khác để khớp với các điểm trống trên lưới.

Lưới CSS với lưới tự động chảy: dày đặc

Thuộc tính tự động luồng lưới tự xác định theo hướng bạn cần thêm một hàng hoặc cột khác sau khi bạn đã xác định các mục của mình. Hàng là mặc định. Tôi đã thấy một trường hợp sử dụng lớn cho việc này bên cạnh việc sử dụng luồng tự động lưới: dày đặc.

Đặt các mục lưới

Trong ví dụ của chúng tôi với việc định cỡ các mục lưới riêng lẻ, ban đầu chúng tôi đã đặt mục năm thành cột lưới: nhịp 2, cho phép mục năm kéo dài qua hai cột. Trên thực tế, cột lưới là tốc ký cho bắt đầu cột lưới và kết thúc cột lưới. Điều tương tự cũng xảy ra với hàng lưới.

Vì vậy, về mặt kỹ thuật, chúng tôi đã thiết lập mục năm là lưới-cột-bắt đầu: span 2and lưới-cột-end: auto. Về cơ bản, chúng tôi đã nói với lưới để bắt đầu mục năm, nơi nó sẽ tự nhiên, nhưng đi gấp đôi kích thước.

Hãy để một lần nữa làm việc với mục năm và tôi sẽ trình bày cho bạn điều này bằng cách sử dụng các công cụ kiểm tra phiên bản Firefox dành cho nhà phát triển Firefox để bạn có thể dễ dàng hơn để xem mục năm của mục theo dõi là gì. Tôi cũng đã thêm một vài mục lưới.

.vỏ bánh {
  hiển thị: lưới;
  lưới-mẫu-cột: lặp lại (3, 10rem);
  khoảng cách lưới: 1rem;
}
.item5 {
  lưới-cột-bắt đầu: 1;
  lưới-cột-cuối: 3;
}

CSS Grid sẽ bố trí tất cả các mục trước mục thứ năm của chúng tôi, dừng lại và sau đó xem nơi chúng tôi bắt đầu và kết thúc mục năm, và đặt nó ở nơi chúng tôi đã nói với nó. Tốc ký của điều này sẽ là cột lưới: 1/3 trong đó 1 là giá trị bắt đầu của chúng tôi và 3 là giá trị kết thúc của chúng tôi.

Lưới CSS sử dụng lưới-cột-bắt đầu và lưới-cột-cuối

Bạn cũng có thể cho biết một mục lưới riêng lẻ bạn muốn nó rộng bao nhiêu và nơi bạn muốn kết thúc. Tôi sử dụng thuộc tính cột tốc ký trong ví dụ này, vì vậy tôi nói với mục năm để kéo dài hai cột kết thúc ở dòng bốn.

.vỏ bánh {
  hiển thị: lưới;
  lưới-mẫu-cột: lặp lại (3, 10rem);
  khoảng cách lưới: 1rem;
}
.item5 {
  cột lưới: nhịp 2/4;
}
Lưới CSS với thuộc tính tốc ký cột lưới

Nếu bạn muốn mặt hàng của mình trải rộng toàn bộ chiều rộng của lưới, nhưng không thể biết lưới của bạn rộng bao nhiêu, bạn có thể đặt cột lưới: 1 / -1. Về cơ bản, giá trị -1 đó đang nói với mục của bạn đi suốt đến bản nhạc cuối cùng. Nếu bạn làm điều này với các hàng bạn sẽ nhận thấy rằng mặt hàng của bạn có thể không đi hết xuống phía dưới lưới của bạn. Nó sẽ chỉ đi đến dưới cùng của hàng rõ ràng, không phải hàng ẩn của bạn.

Tài nguyên

Dưới đây là một số tài nguyên tôi đặc biệt khuyên dùng để tìm hiểu sâu hơn về CSS Grid!

  • Hướng dẫn sử dụng CSS CSS của Wes Bos Cảnh - nó hoàn toàn miễn phí và là nơi tôi học về lưới. Tôi yêu phong cách giảng dạy của ông!
  • CSS Tricks Hướng dẫn đầy đủ về Lưới CSS - điều này có một số bảng cheat tuyệt vời khi bạn bị mắc kẹt trên một khía cạnh nhất định của Lưới.
  • CSS Grid Garden - một cách thú vị để thực hành những gì bạn đã học về CSS Grid. Tôi khuyên bạn nên làm một hướng dẫn trước khi thử điều này vì đôi khi nó hơi khó hiểu.

Cảm ơn đã đọc hướng dẫn của tôi về CSS Grid! Kiểm tra các bài viết khác của tôi như Làm thế nào để trả lời câu hỏi đáng sợ ‘Nói cho tôi biết về bản thân Câu hỏi phỏng vấn của bạn,‘ Tại sao bạn nên thuê một Bootcamp Grad hoặc câu chuyện của tôi về cách tôi trở thành một nhà phát triển.

Và hãy chắc chắn theo dõi tôi trên Twitter cho rất nhiều tweet về công nghệ và, nếu tôi thành thật, rất nhiều tweet về chó cũng vậy.