11 điều tôi đã học khi đọc Đặc tả lưới CSS

Minh họa bởi Alex Kunchevsky

Ngày 11 tháng 6 năm 2017, tôi quyết định đọc thông số CSS Grid.

Thông số kỹ thuật là một chút kỹ thuật, nhưng đó là thông số kỹ thuật thú vị nhất mà tôi từng đọc. Nếu bạn là một nhà phát triển nâng cao hơn, hãy đánh dấu nó để tham khảo trong tương lai.

Vì vậy, điều này sẽ hữu ích?

Tôi tin rằng sự khác biệt giữa các kỹ sư giỏi và tuyệt vời, là người sau dành thời gian của họ để hiểu những gì thực sự diễn ra dưới mui xe. Họ học cách mọi thứ hoạt động, thay vì học bằng cách sao chép và dán.

Vì vậy, bạn có muốn trở thành một nhà phát triển tuyệt vời?

Chết tiệt Hoặc, bạn sẽ không được đọc bài viết này.

Bạn học được gì

Trong khi đọc thông số kỹ thuật, tôi đã học được một số chi tiết rất tinh tế, nhưng sâu sắc.

Trong bài viết này, tôi sẽ chia sẻ chúng với bạn.

1. Lưới CSS là khai báo

API khai báo rất ngọt ngào để làm việc với. Hãy suy nghĩ ReactJS?

Khi các trang web phát triển từ các tài liệu đơn giản thành các ứng dụng tương tác phức tạp, bố cục web trở nên khó sáng tác. Quá khó khăn, họ là cơn ác mộng của tôi.

Đây chính xác là vấn đề CSS Grid đã giải quyết ngày hôm nay.

Từ thông số kỹ thuật.

Lưới CSS lấy đi quá trình đau đớn của việc tạo các bố cục thông minh và thay thế nó bằng một bộ quy tắc khai báo tuyệt đẹp làm cho quá trình gần như dễ dàng.

Đây là thời điểm tốt trong lịch sử của CSS.

2. Đơn vị phân số không phải lúc nào cũng tạo ra các hàng và cột cách đều nhau

Một trong những điều đầu tiên mọi người tìm hiểu và yêu thích về Lưới CSS là đơn vị phân số. Ngay cả một con vịt có thể thoát khỏi nó.

Các đơn vị phân số lấy đi nỗi đau của tính toán tỷ lệ phần trăm. Đó là một niềm vui để làm việc với.

Hầu hết mọi người dạy rằng đơn vị phân số (fr) mang lại các cột hoặc hàng cách đều nhau.

Ví dụ: một khai báo như 1fr 1fr 1fr dự kiến ​​sẽ cung cấp cho bạn các cột hoặc các hàng có khoảng cách đều nhau. Xem hình minh họa dưới đây:

Các cột cách đều nhau được tạo bởi đơn vị phân số.

Đáng buồn thay, điều này KHÔNG phải luôn luôn đúng. Con vịt tội nghiệp.

Sau đây là từ thông số kỹ thuật:

Đơn vị fr lấp đầy không gian có sẵn NHƯNG nó KHÔNG BAO GIỜ nhỏ hơn kích thước tối thiểu của thùng chứa lưới hoặc nội dung của hàng hoặc cột.

Về cơ bản, nếu bạn có một hình ảnh, img hoặc bất kỳ mục lưới nào, với khai báo chiều rộng tối thiểu hoặc chiều cao tối thiểu, bạn có thể có kết quả không mong muốn với đơn vị phân số.

Sau khi quẩn quanh như một con vịt sợ ướt, tôi đã dành rất nhiều thời gian để thử nghiệm với đơn vị phân số. Tôi đã viết một bài báo về những phát hiện của tôi.

3. Bạn không thực sự biết lưới có kích cỡ như thế nào. Hay là bạn

Một định nghĩa lưới CSS luôn bắt đầu trong các dòng này:

hiển thị: lưới

Thông thường, nó được theo sau bởi các định nghĩa hàng và cột. Một cái gì đó như thế này:

lưới-mẫu-hàng: 10px 1fr 3fr
lưới-mẫu-cột: 1fr

Và cuối cùng, bạn có khả năng đặt các mục lưới với bất kỳ kỹ thuật nào phù hợp với bạn.

Vì có rất nhiều cách để đặt các mục lưới, tôi sẽ bỏ qua mã cần thiết cho ngắn gọn.

Vì vậy, đây là vấn đề.

Trong mui xe, bạn phải giả định rằng kích thước của các hàng và cột lưới được tính toán trước tiên trước khi các mục được đặt. Đúng?

Vâng, có vẻ như sự thật là hoàn toàn ngược lại.

Thật kỳ lạ.

Sau đây là từ thông số kỹ thuật:

2.3. Định cỡ lưới
Khi các mục lưới đã được đặt, kích thước của các rãnh lưới (hàng và cột) được tính toán, chiếm kích thước của nội dung của chúng và / hoặc không gian có sẵn như được chỉ định trong định nghĩa lưới.

Lưu ý sự tiến triển.

  1. Các mục lưới được đặt.
  2. Các kích thước của rãnh lưới được tính toán

Bạn có thể có câu hỏi xung quanh vấn đề này. Vì vậy, tôi sẽ cố gắng giải quyết những lo lắng đó của bạn.

Đầu tiên, lưu ý rằng mỗi mục lưới được gán một vùng lưới. Các mục lưới sau đó có kích thước trong khu vực này. Vì vậy, làm thế nào chính xác là các mục lưới được đặt mà không tính toán kích thước của các bản nhạc?

Nếu bạn xem phần Đặt các mục lưới của thông số kỹ thuật, bạn sẽ tìm thấy một manh mối.

Rất nhiều điều được xem xét khi định cỡ lưới và phần lớn bao gồm kích thước của các mục lưới.

Lưới kích thước có thể được dựa trên những điều sau đây:

  • Hàm định cỡ cố định (độ dài hoặc phần trăm có thể phân giải).
  • Hàm định cỡ nội tại (nội dung tối thiểu, nội dung tối đa, tự động, nội dung phù hợp ()) hoặc
  • Một chức năng định cỡ linh hoạt (flex).

Những gì tôi tin rằng xảy ra dưới mui xe là, các mục lưới được đặt.

Nghĩa là, khối chứa cho vật phẩm được xác định, chức năng định cỡ cho vật phẩm sau đó được xác định. Điều này lần lượt ảnh hưởng đến kích thước của các rãnh lưới.

Bạn thấy sao?

Không phải những gì bạn nghĩ ban đầu.

4. Theo mặc định, các mục lưới được kéo dài để phù hợp với diện tích lưới của chúng - ngoại trừ trong một số trường hợp nhất định

Nếu không có sự can thiệp của bạn, các mục lưới sẽ luôn kéo dài để phù hợp với diện tích lưới của chúng.

Vì vậy, nếu bạn đã có một tuyên bố như vậy:

lưới-mẫu-khu vực: 'tiêu đề tiêu đề'
                     'sidebar chính chính'
                     'chân trang bên'

Và bạn đã có div được gán cho các khu vực lưới cụ thể, như vậy:

.div1 {
   khu vực lưới: tiêu đề
}
.div2 {
   khu vực lưới: thanh bên
}
.div3 {
   diện tích lưới: chính
}
.div4 {
   khu vực lưới: chân trang
}

Bạn không cần phải khai báo chiều rộng và chiều cao của các div trên 100%

Họ sẽ tự động kéo dài để lấp đầy các khu vực tương ứng của họ.

Bây giờ, ở đây, việc bắt cá.

Hành vi này không phù hợp với Hình ảnh.

Như Rachel Andrew đã chỉ ra, thông số kỹ thuật tiếp tục nói rằng hành vi này là khác nhau đối với các mục lưới có tỷ lệ khung hình nội tại.

Hãy để cho những lời lớn làm bạn sợ. Nó không phải là demogorgon.

Một hình ảnh theo mặc định là một yếu tố khối nội tuyến, nhưng chúng cũng có kích thước cụ thể. Họ có kích thước tự nhiên liên quan đến chúng. Một hình ảnh có thể rộng 400px x 600px hoặc bất kỳ kích thước cụ thể nào.

Nhưng, các phần tử khối thông thường như div, không có kích thước nội tại. Đó là, họ không có kích thước tự nhiên thuộc về họ.

Vì vậy, trong khi các mục lưới không có kích thước nội tại sẽ kéo dài để phù hợp với diện tích lưới của chúng, điều này không đúng đối với các mục lưới có kích thước nội tại, ví dụ như hình ảnh.

5. Bạn có thực sự biết Grid Item là gì không?

Hãy xem xét khối mã dưới đây:

    
chặn     
nổi         Tôi là một văn bản ngẫu nhiên              mục 4     

Trong khối mã ở trên, bạn có thể phát hiện ra các mục lưới không?

Có bao nhiêu mục lưới trong khối mã, 3 hoặc 4?

Tôi đã thất bại câu hỏi này một cách trắng trợn.

Lưu ý rằng văn bản tôi là một văn bản ngẫu nhiên được gói bởi bất kỳ thẻ html nào.

đó là cái gì

Vì vậy, những gì câu trả lời của bạn?

Chà, nếu bạn trả lời 3, bạn sai. Haha, có được!

Theo thông số kỹ thuật, một mục lưới ẩn danh được bao bọc xung quanh mỗi lần chạy văn bản trong một lưới.

Vâng, điều đó có nghĩa là tôi là một văn bản ngẫu nhiên cũng là một mục lưới.

chặn     
nổi
    
    Tôi là một văn bản ngẫu nhiên

    
        mục 4
    

Vâng, câu trả lời là 4. Chúng tôi đã có 3 mục lưới rõ ràng và 1 mục lưới ẩn danh!

Hiểu chưa

6. Các lề của các mục lưới liền kề không sụp đổ.

Có sự khác biệt lớn giữa các yếu tố khối và container lưới.

Ý tôi là, một yếu tố có màn hình: khối và khối khác có màn hình: lưới có rất nhiều điểm khác biệt cơ bản.

Sự khác biệt tôi đang chọn để thảo luận ở đây là phải làm với lợi nhuận thu được.

Một trong những điều đầu tiên bạn học được với CSS là khái niệm về lợi nhuận có thể thu gọn. Tôi không muốn dành nhiều thời gian để giải thích ý nghĩa của lợi nhuận có thể thu được. Nếu bạn đưa nó lên trong các ý kiến, tôi sẽ.

Vì vậy, trở lại lưới.

Với mỗi mục lưới, lề không bao giờ bị sụp đổ.

Vâng, điều này là dễ hiểu. Để tôi chỉ cho bạn hiểu vì sao.

Các mục lưới liền kề được chứa độc lập trong khối chứa được hình thành bởi các vùng lưới của chúng.

Điều mà đoạn văn phức tạp ở trên có nghĩa là đây. Mỗi mục lưới sống và thở trong một khu vực lưới

Các mục lưới được đặt trong khu vực lưới tương ứng của chúng. Họ ở trong vùng lãnh thổ không bị xáo trộn của riêng họ. Họ không bị ảnh hưởng bởi lợi nhuận có thể thu gọn. Thật tuyệt.

Vì vậy, về mặt kỹ thuật, bạn có thể nói rằng mục lưới không phải là hàng xóm trực tiếp của các mục lưới khác. Nhưng được chứa trong một lãnh thổ khép kín không bị gián đoạn - khu vực lưới điện.

Nếu bạn tò mò về sự khác biệt khác tồn tại giữa các yếu tố khối và các yếu tố lưới, tôi đã viết một bài viết thú vị về chủ đề này.

7. tự động điền và tự động phù hợp. Có gì khác biệt?

Trong khi tự động điền và tự động phù hợp trông giống như các chức năng giống nhau, chúng khác nhau theo một cách.

Chúng giống nhau theo nghĩa là chúng cho phép tự động tạo các rãnh lưới lấp đầy thùng chứa lưới theo một cách nào đó.

Ví dụ: đoạn mã sau sẽ tạo ra nhiều cột 200px như vừa với chiều rộng cửa sổ. Nếu có bất kỳ không gian còn lại, nó sẽ được phân phối giữa các cột 200px.

thân hình {
  hiển thị: lưới;
  lưới-mẫu-cột: lặp lại (tự động điền, minmax (200px, 1fr));
}

Có gì khác biệt?

tự động điền sẽ tạo các bản nhạc ngay cả khi không có mục lưới nào để điền vào. tự động phù hợp sẽ không làm điều này. Nó sẽ xì hơi các bài hát trống về không.

Đó là tất cả.

8. Trong định nghĩa vùng lưới-mẫu, số lượng từ trong chuỗi PHẢI bằng nhau.

Bạn có nhớ các giá trị khu vực lưới-mẫu trông giống như bản đồ không?

Chà, có vẻ như nó có thể làm mọi thứ rối tung lên rất nhanh.

Trong khai báo vùng lưới-mẫu, tất cả các chuỗi phải có cùng số cột hoặc nếu không thì khai báo không hợp lệ.

Ví dụ:

/ * cái này hợp lệ * /
lưới-mẫu-khu vực: "thanh bên tiêu đề tiêu đề"
                     "thanh bên chính chính"
                     "thanh bên chính chính"
/* cái này sai */
lưới-mẫu-khu vực: "thanh bên tiêu đề tiêu đề"
                     "thanh bên chính chính"
                     "thanh bên chính chính"

Số lượng từ trong chuỗi, phải bằng nhau.

9. Tránh sử dụng tỷ lệ phần trăm trong phần đệm hoặc lề trên các mục lưới hoàn toàn

Từ thông số lưới CSS

Lý do đằng sau điều này là đơn giản. Tại thời điểm viết bài này, bạn sẽ có hành vi khác nhau trong các trình duyệt khác nhau.

Theo thông số kỹ thuật, tỷ lệ phần trăm có thể được giải quyết theo chiều rộng của phần tử hoặc lề trái / phải so với chiều rộng trong khi đỉnh / đáy được phân giải theo chiều cao

Để có kết xuất nhất quán trên hầu hết các trình duyệt, tránh sử dụng tỷ lệ phần trăm trong phần đệm hoặc lề của các mục lưới.

Quan trọng hơn, đã có một vài bit khó hiểu với CSS Grid. Don lồng tự bắn vào chân mình với phần trăm phần trăm hoặc phần lề trong các mục lưới.

10. Kích thước của lưới rõ ràng được giải quyết như thế nào khi có xung đột?

Giả sử rằng bạn có một khai báo lưới như vậy:

lưới-mẫu-khu vực: "thanh bên tiêu đề tiêu đề"
                     "thanh bên chính chính"
                     "thanh bên chính chính"

Trong khối mã ở trên, bạn có 4 cột và 3 hàng.

Điều gì nếu bạn cũng đã làm điều này:

lưới-mẫu-cột: lặp lại (5, 1fr)
lưới-mẫu-hàng: lặp lại (4, 1fr)

Bây giờ bạn có nhiều cột và hàng hơn. 5 cột và 4 hàng.

Bạn hiểu rồi chứ?

Có một cuộc xung đột trong các tuyên bố. Vì vậy, làm thế nào được giải quyết?

Theo thông số kỹ thuật, kích thước của lưới rõ ràng được xác định bằng số lượng lớn hơn của số hàng / cột được xác định bởi các khu vực mẫu-lưới và số lượng hàng / cột có kích thước theo cột lưới-mẫu-hàng / lưới-mẫu-cột .

Thông số kỹ thuật có vẻ như nó phức tạp một điều đơn giản. Trong ngôn ngữ đơn giản, điều đó có nghĩa là gì, khai báo với số lượng hàng hoặc cột lớn hơn sẽ thắng.

Trong ví dụ trên, lưới sẽ chiếm 5 cột và 4 hàng KHÔNG 4 cột và 3 hàng.

* EDIT: Thuộc tính khu vực lưới mẫu được sử dụng để đặt các mục lưới trên lưới. Vì vậy, tại sao chúng ta nên có một xung đột trong định nghĩa lưới? Các lưới Aren lồng được cho là được xác định chỉ bằng các thuộc tính lưới-cột-cột và lưới-mẫu-hàng? Tôi trả lời điều này trong phần bình luận. Kiểm tra nó ra.

11. Kích thước của lưới không hoàn toàn là tổng của các kích thước theo dõi

Các rãnh lưới đề cập đến khoảng cách giữa các đường lưới.

Mặc dù điều này là đơn giản, nhưng điều đáng nói là trong trường hợp bạn có một lưới chiều rộng cố định được thiết lập.

Kích thước của lưới có thể bị ảnh hưởng bởi khoảng cách giữa các hàng, lưới-cột và khoảng cách nội dung, căn chỉnh nội dung. Đáng buồn thay, có thể thêm không gian giữa các bài hát quá.

Vì vậy, hãy cẩn thận trong khi tính toán độ rộng cố định trong lưới.

THƯỞNG: Tất cả chúng ta có thể góp phần làm cho DOCS tốt hơn

Bởi vì tôi là một linh hồn tốt bụng, tôi đã thêm một mẹo nữa ở đây

Spec được viết bởi con người. Và nó xảy ra đến mức con người có thể phạm sai lầm.

Trong khi đọc thông số kỹ thuật, tôi phát hiện một lỗi đánh máy nhỏ.

Lúc đó, tôi đặc biệt chắc chắn phải làm gì. Vì vậy, tôi đã hỏi xung quanh trên Twitter.

Jen Simmons tốt bụng đã giúp gửi một vấn đề trên github và nó đã được sửa.

Vì vậy, những gì đạo đức đạo đức?

Bạn có thể giúp làm cho các tài liệu tốt hơn bằng cách đóng góp bằng mọi cách có thể.

Vâng, bạn

Hãy cùng nhau làm cho web tốt hơn.

Bạn muốn trở thành Pro?

Tải xuống hướng dẫn Lưới CSS miễn phí của tôi và cũng nhận được hai khóa học Flexbox tương tác chất lượng miễn phí!

Cách làm chủ Lưới CSS và cách xây dựng trên đường đi (Hướng dẫn PDF miễn phí)

Nhận chúng ngay bây giờ