CSS Grid và Flexbox: so sánh trong thực tế. Bố cục trên lưới trong CSS. Hướng dẫn đầy đủ và tham khảo. Giải pháp Flexbox
Danny Markov
Thiết kế khá đơn giản - nó bao gồm một thùng chứa được căn giữa, bên trong chúng ta có tiêu đề, phần chính, bảng điều khiển bên và một tầng hầm. Dưới đây là các "kiểm tra" chính mà chúng ta nên chạy trong khi vẫn giữ CSS và HTML sạch nhất có thể:
- Đặt bốn phần chính của bố cục.
- Làm cho trang phản hồi nhanh (thanh bên nằm bên dưới nội dung chính trên màn hình nhỏ).
- Căn chỉnh nội dung tiêu đề - điều hướng bên trái, nút bên phải.
Như bạn có thể thấy, để so sánh, chúng tôi đã giữ mọi thứ đơn giản nhất có thể. Hãy bắt đầu với bài kiểm tra đầu tiên.
Bài kiểm tra 1: Bố cục các phần trang
Giải pháp Flexbox
Thêm display: flex vào container và đặt hướng phần tử con theo chiều dọc. Điều này định vị tất cả các phần bên dưới nhau.
Vùng chứa ( display: flex; flex-direction: cột; )
Bây giờ chúng ta cần đảm bảo rằng phần chính và thanh bên được đặt cạnh nhau. Vì các thùng chứa linh hoạt thường là một chiều nên chúng ta cần thêm yếu tố bổ sung.
Sau đó, chúng tôi đặt display: flex và flex-direction của phần tử này theo hướng ngược lại.
Trình bao bọc chính và thanh bên ( display: flex; flex-direction: row; )
Bước cuối cùng là đặt kích thước của phần chính và thanh bên. Chúng tôi muốn nội dung chính có chiều rộng gấp ba lần thanh bên, điều này có thể dễ dàng thực hiện với tính linh hoạt hoặc tỷ lệ phần trăm.
Như bạn có thể thấy, Flexbox đã làm tốt mọi thứ, nhưng chúng tôi cũng cần khá nhiều thuộc tính CSS cộng với một phần tử HTML bổ sung. Hãy xem CSS Grid sẽ hoạt động như thế nào.
Giải pháp lưới CSS
Có một số tùy chọn để sử dụng CSS Grid, nhưng chúng tôi sẽ sử dụng cú pháp vùng mẫu lưới là phù hợp nhất cho mục đích của chúng tôi.
Trước tiên, chúng ta sẽ xác định bốn vùng lưới, một vùng cho mỗi phần của trang:
Bây giờ chúng ta có thể thiết lập lưới của mình và xác định vị trí của từng khu vực. Mã ban đầu có vẻ khá phức tạp, nhưng khi bạn đã quen với hệ thống lưới, nó sẽ trở nên dễ hiểu hơn.
Container ( display: Grid; /* Xác định kích thước và số lượng cột trong lưới của chúng ta. Đơn vị fr hoạt động giống như Flexbox: các cột chia không gian có sẵn trong hàng theo giá trị của chúng. Chúng ta sẽ có hai cột - cột đầu tiên là gấp ba lần kích thước của phần thứ hai. */ Grid-template -columns: 3fr 1fr; /* Liên kết các khu vực được tạo trước đó với các vị trí trong lưới. Dòng đầu tiên là tiêu đề. Dòng thứ hai được phân chia giữa phần chính và phần sidebar. Dòng cuối cùng là footer. */ Grid-template-areas: "header header" " main sidebar" "footer footer"; /* Khoảng cách giữa các ô lưới sẽ là 60 pixels */ Grid-gap: 60px; )
Đó là tất cả! Bố cục của chúng tôi bây giờ sẽ tuân theo cấu trúc trên và chúng tôi đã thiết lập nó để không phải xử lý lề hoặc phần đệm.
Kiểm tra 2. Làm cho trang phản hồi nhanh
Giải pháp Flexbox
Bước này liên quan chặt chẽ với bước trước. Đối với giải pháp Flexbox, chúng ta sẽ phải thay đổi hướng flex và điều chỉnh lề.
@media (độ rộng tối đa: 600px) ( .main-and-sidebar-wrapper ( flex-direction: cột; ) .main ( lề-phải: 0; lề-dưới: 60px; ) )
Trang của chúng tôi khá đơn giản nên không có nhiều thao tác trong truy vấn phương tiện nhưng bố cục phức tạp hơn sẽ cần phải làm lại nhiều.
Giải pháp lưới CSS
Vì chúng ta đã xác định các vùng lưới nên chúng ta chỉ cần xác định lại thứ tự của chúng trong truy vấn phương tiện. Chúng ta có thể sử dụng cùng một thiết lập loa.
@media (độ rộng tối đa: 600px) ( .container ( /* Căn chỉnh các vùng lưới cho bố cục trên thiết bị di động */ Grid-template-areas: "header header" "main main" "sidebar sidebar" "footer footer"; ) )
Hoặc chúng ta có thể xác định lại toàn bộ bố cục từ đầu nếu chúng ta cho rằng giải pháp này sạch hơn.
@media (độ rộng tối đa: 600px) ( .container ( /* Chuyển đổi lưới thành bố cục một cột */ Grid-template-columns: 1fr; Grid-template-areas: "header" "main" "sidebar" " chân trang"; ) )
Kiểm tra 3: Căn chỉnh các thành phần tiêu đề
Giải pháp Flexbox
Chúng tôi đã thực hiện bố cục tương tự với Flexbox trong một trong những bài viết cũ của chúng tôi -. Kỹ thuật này khá đơn giản:
Tiêu đề ( display: flex; justify-content: space-between; )
Danh sách và nút điều hướng hiện đã được căn chỉnh chính xác. Tất cả những gì còn lại là đặt các vật phẩm vào bên trong
Điều hướng tiêu đề ( display: flex; căn chỉnh các mục: đường cơ sở; )
Chỉ có hai dòng! Không xấu cả. Hãy xem CSS Grid xử lý việc này như thế nào.
Giải pháp lưới CSS
Để tách điều hướng và nút, chúng ta phải thêm display:grid vào tiêu đề và thiết lập lưới hai cột. Chúng ta cũng sẽ cần hai dòng bổ sung trong CSS để định vị mọi thứ trong ranh giới thích hợp.
Tiêu đề( display: lưới; lưới-template-columns: 1fr 1fr; ) tiêu đề điều hướng (justify-self: start; ) nút tiêu đề (justify-self: end; )
Về các liên kết một dòng trong điều hướng, chúng tôi không thể thực hiện điều này một cách chính xác bằng CSS Grid. Đây là nỗ lực tốt nhất của chúng tôi:
Điều hướng tiêu đề ( display: Grid; Grid-template-columns: auto 1fr 1fr; Align-items: end; )
Rõ ràng là CSS Grid đã không xử lý tốt phần này của bố cục, nhưng điều đó không có gì đáng ngạc nhiên - trọng tâm là căn chỉnh các vùng chứa chứ không phải nội dung bên trong chúng. Hệ thống này không phải để hoàn thiện.
kết luận
Nếu bạn đọc toàn bộ bài viết (và đó là một công việc tuyệt vời!), kết luận sẽ không làm bạn ngạc nhiên. Thực ra là không hệ thống tốt hơn- cả Flexbox và CSS Grid đều tốt theo cách riêng của chúng và nên được sử dụng cùng nhau chứ không phải thay thế cho nhau.
Đối với những người trực tiếp đưa ra kết luận của bài viết này (đừng lo lắng, chúng tôi cũng làm như vậy), đây là bản tóm tắt so sánh:
- CSS Grid rất tốt để tạo ra một bức tranh lớn. Hệ thống này giúp quản lý bố cục trang dễ dàng hơn và thậm chí có thể xử lý các thiết kế không đều và không đối xứng.
- Flexbox rất tốt cho việc căn chỉnh nội dung trong các phần tử. Sử dụng hệ thống này để đặt các chi tiết thiết kế nhỏ.
- Sử dụng CSS Grid cho bố cục 2D (hàng VÀ cột).
- Flexbox hoạt động tốt hơn chỉ trong một chiều (hàng HOẶC cột).
- Không có lý do gì để chỉ sử dụng CSS Grid hoặc chỉ Flexbox. Nghiên cứu chúng và sử dụng chúng cùng nhau.
Trong bài viết này bạn sẽ tìm thấy khóa học đầy đủ bằng lưới CSS. Chúng ta sẽ xem nó là gì, sự khác biệt với FlexBox là gì và cách bạn có thể làm việc với CSS Grid.
Lưới CSS là cách tiếp cận mớiđể tạo các trang web thích ứng với nhiều khối nằm ở bất kỳ đâu trên trang web. Bên cạnh đó Lưới CSS Ngoài ra còn có một công nghệ rất giống với mắt lưới. Chúng tôi sẽ không đi sâu vào những khác biệt nhỏ nhất giữa chúng, vì điều này sẽ cần một bài viết riêng, nhưng chúng tôi sẽ mô tả ngắn gọn những khác biệt chính.
Lưới CSS có thể gọi là phiên bản ngầu hơn và cải tiến hơn FlexBox, vì FlexBox cho phép bạn chỉ làm việc trên một mặt phẳng: tạo cột hoặc tạo hàng.
Lưới CSS cho phép bạn làm được nhiều việc hơn vì chúng hoạt động trên cả hai mặt phẳng cùng một lúc. Do đó, việc tạo các khối trang web thích ứng dễ dàng hơn nhiều và khả năng sắp xếp các đối tượng theo ý muốn đơn giản là vô tận.
Chúng tôi mời bạn xem video đầy đủ học về lưới CSS để làm quen với nó ngay lập tức Lưới CSS:
- Bài học về ;
Trong bài học, ba trang đã được tạo, mã cho mỗi trang có thể được sao chép bên dưới.
tập tin đầu tiên
Tệp thứ hai
Tệp thứ ba
Nguyên lý hoạt động
Làm việc với lưới rất đơn giản. Thuật toán hành động ở đây như sau:
- Chúng tôi tạo một khối chính và đặt các khối khác vào đó ( phần);
- Thêm thuộc tính display:grid vào khối chính;
- Thuộc tính lưới CSS hiện có thể được áp dụng cho tất cả các thành phần khối chính;
- Thêm các thuộc tính khác nhau. Bạn có thể tìm thấy tài liệu về tất cả các thuộc tính có thể có;
Mỗi khối có thể được đặt theo chiều rộng, chiều cao và vị trí. Các khối được tạo dựa trên lưới ngay lập tức có thiết kế thích ứng, giúp điều chỉnh các khối theo các độ phân giải màn hình khác nhau.
Bằng cách này bạn có thể viết ít hơn và nhận được nhiều hơn. Còn gì tuyệt vời hơn nữa? Chia sẻ kinh nghiệm sử dụng lưới trong dự án của bạn trong phần bình luận cho bài viết này ⇣
Ngày xửa ngày xưa, tôi đã viết về một dịch vụ đặc biệt, đó là AI để tạo một trang web. Đánh giá theo kết quả hiện tại, họ hóa ra là “tầm thường”, đặc biệt là khi xét đến mức giá đã nêu. về mặt này chúng sẽ hiệu quả hơn.
Hôm nay tôi muốn nói về một “công nghệ” có tên tương tự nhưng bản chất hoàn toàn khác - CSS Grid! Bài viết bao gồm một số phần:
Cách tiếp cận này để xây dựng bố cục giúp bạn dễ dàng tạo đủ lưới linh hoạt các trang web từ sử dụng CSS. Trong tương lai nó có thể sẽ được sử dụng ở mọi nơi. Nếu tôi hiểu chính xác thì nó hoàn hảo cho các tác vụ tương tự như Flexbox, nhưng không giống như nó, nó có thể hoạt động đồng thời ở các chiều hai chiều (cột và hàng). Dưới đây tôi cung cấp bản dịch của bài viết, đây là một dạng giới thiệu về chủ đề và chứa các ví dụ giáo dục đơn giản. Chú ý! Tác giả của ghi chú đang thực hiện một khóa học (!) miễn phí về CSS Grid vào tháng 12, nếu bạn muốn, hãy gửi yêu cầu đến Email của anh ấy.
Tôi cũng tìm thấy một video hữu ích về chủ đề này trên Internet. Có lẽ ai đó sẽ dễ dàng tiếp nhận thông tin như thế này hơn:
Giới thiệu về lưới CSS
Năm nay, công nghệ này đã nhận được sự hỗ trợ tích hợp trong Chrome, FF, Safari nên rất có thể nó sẽ trở thành công cụ phổ biến trong thời gian tới. Nhưng hiện tại, bạn cần nhớ quan tâm đến những trình duyệt web lỗi thời và lag.
Lưới đơn giản nhất
Có 2 đối tượng chính ở đây:
- cha/trình bao bọc (gói tất cả các khối bên trong tạo nên nó);
- trẻ em/vật phẩm (chính các phần tử).
Đây là thiết kế đơn giản nhất:
Trình bao bọc (hiển thị: lưới;)
Tuy nhiên, ngay sau đó, sẽ không có gì thay đổi nhiều vì định dạng hiển thị không được xác định. Bạn sẽ thấy 6 DIV nối tiếp nhau.
Cột và hàng
Để tạo lưới hai chiều, bạn cần chỉ định tham số của hàng và cột - sử dụng các tùy chọn lưới-mẫu-hàng Và lưới-mẫu-cột tương ứng:
| .wrapper ( display : lưới; lưới-template-cột : 100px 100px 100px ; lưới-template-rows : 50px 50px ; ) |
Trình bao bọc ( display: lưới; lưới-template-cột: 100px 100px 100px; lưới-template-rows: 50px 50px; )
Vì có ba giá trị cho các cột nên số lượng chúng sẽ được tạo ra như nhau, do đó chỉ có 2 hàng. Các số tính bằng pixel đặt chiều rộng của các phần tử trong trường hợp đầu tiên (mỗi phần tử 100px) và chiều cao (50px) trong giây.
Đây là một ví dụ khác để giúp bạn hiểu rõ hơn về cách thức hoạt động của nó:
| .wrapper ( display : lưới; lưới-template-cột : 200px 50px 100px ; lưới-template-rows : 100px 30px ; ) |
Trình bao bọc ( display: lưới; lưới-template-cột: 200px 50px 100px; lưới-template-rows: 100px 30px; )
Hình ảnh sau đây sẽ được hiển thị:
Vị trí và kích thước
Với tính năng này, bạn sẽ có được khả năng thực sự rất mạnh mẽ để tạo lưới trang web. Giả sử chúng ta có kích thước 3x3:
| .wrapper ( display : lưới; lưới-template-cột : 100px 100px 100px ; lưới-template-rows : 100px 100px 100px ; ) |
Trình bao bọc ( display: lưới; lưới-template-cột: 100px 100px 100px; lưới-template-rows: 100px 100px 100px; )
Nếu mã HTML, như trong ví dụ của chúng tôi, có 6 phần tử DIV (xem ở phần đầu), thì trong trong trường hợp này Chỉ có 2 hàng sẽ được hiển thị trên trang web, hàng thứ ba sẽ tạm thời không được lấp đầy. Tuy nhiên, khi chúng ta bắt đầu sử dụng thông số khác nhau cho vị trí và kích thước khối - cột lưới hàng lưới, tình hình sẽ thay đổi.
Chúng tôi gán kiểu cho một trong các đối tượng:
| .item1 ( lưới-cột-bắt đầu : 1 ; cuối cột lưới : 4 ; ) |
Mục1 ( bắt đầu cột lưới: 1; cuối cột lưới: 4; )
Điều này có nghĩa là DIV với lớp item1 bắt đầu từ dòng đầu tiên của cột trong lưới và kết thúc ở dòng thứ 4, nghĩa là nó lấp đầy toàn bộ hàng.
Trên thực tế hiện nay một số đối tượng đã chuyển sang dòng cuối cùng, mà chúng tôi đã viết ra trước (3x3). Có một lựa chọn đơn giản hơn:
| .item1 ( cột lưới : 1 / 4 ; ) |
Item1 (cột lưới: 1 / 4; )
| .item1 ( bắt đầu cột lưới : 1 ; cuối cột lưới : 3 ; ) .item3 ( bắt đầu hàng lưới : 2 ; cuối hàng lưới : 4 ; ) .item4 ( bắt đầu cột lưới : 2 ; cuối cột lưới : 4 ; ) |
Item1 ( lưới-cột-bắt đầu: 1; lưới-cột-cuối: 3; ) .item3 ( lưới-hàng-bắt đầu: 2; lưới-hàng-cuối: 4; ) .item4 ( lưới-cột-bắt đầu: 2; cuối cột lưới: 4; )
Nó cho chúng ta hình ảnh sau:
Bạn đã tìm ra được nó chưa? Về nguyên tắc, nó không khó, nhưng bạn cần hiểu rằng đây chỉ là phần cơ bản về các sắc thái của CSS Grid.
Các khu vực tạo mẫu và bố cục bằng lưới CSS
Mã đánh dấu như sau (HTML):
Vùng chứa ( display: lưới; lưới-template-cột: lặp lại (12, 1fr); lưới-mẫu-hàng: 50px 350px 50px; khoảng cách lưới: 5px; )
Nếu về nguyên tắc mọi thứ đã rõ ràng về các hàng thì cần phải làm rõ các cột. Ở đây với ý nghĩa lưới-mẫu-cột một lưới được tạo ra bao gồm 12 cột giống hệt nhau(chiều rộng của mỗi chiều = 1/12 tổng số) + khoảng đệm giữa chúng là 5px (khoảng cách lưới).
Thêm khu vực mẫu lưới
Tùy chọn này thậm chí còn linh hoạt hơn và tính năng tuyệt vời. Có lẽ cú pháp và định dạng của tham số khu vực mẫu lưới trông hơi bất thường, nhưng xa hơn bạn sẽ hiểu tại sao mọi thứ lại giống hệt như thế này:
| .container ( display : Grid; Grid-gap: 5px ; Grid-template-columns : lặp lại (12 , 1fr) ; Grid-template-rows : 50px 350px 50px ; Grid-template-areas : "h h h h h h h h h h h h" "m m c c c c c c c c c c" "f f f f f f f f f f f " ; ) |
Vùng chứa ( hiển thị: lưới; khoảng cách lưới: 5px; cột mẫu lưới: lặp lại (12, 1fr); hàng mẫu lưới: 50px 350px 50px; vùng mẫu lưới: "h h h h h h h h h h h h" "m m c c c c c c c c c c c" "f f f f f f f f f f f f" ; )
Đó là loại đại diện trực quan lưới trang web của bạn trong CSS. Tất cả các ký tự trong thông số này tạo thành 3 hàng và 12 cột, được xác định bởi dòng trên. Mỗi chữ cái tương ứng với một ô. Các tên trong ví dụ tương ứng với các khối mã HTML: tiêu đề (h), menu (m), nội dung (c) và chân trang (f), nhưng bạn có thể sử dụng bất kỳ tùy chọn nào khác.
Chỉ định khu vực mẫu và thử nghiệm
TRÊN bước tiếp theo bạn "liên kết một cách hợp lý" các ký tự vùng chứa và phần tử DIV:
| .header ( Grid-area : h; ) .menu ( Grid-area : m; ) .content ( Grid-area : c; ) .footer ( Grid-area : f; ) |
Tiêu đề ( Grid-area: h; ) .menu ( Grid-area: m; ) .content ( Grid-area: c; ) .footer ( Grid-area: f; )
Trang web sẽ hiển thị bố cục như thế này:
Và bây giờ phép thuật bắt đầu. Hãy hoán đổi một số chữ cái trong tham số khu vực mẫu lưới, ví dụ: “c” và “m” ở những vị trí:
| lưới-mẫu-khu vực: "h h h h h h h h h h h h h h" "c c c c c c c c c c c m m" "f f f f f f f f f f f f" ; |
lưới-mẫu-khu vực: "h h h h h h h h h h h h h" "c c c c c c c c c c c m m" "ff f f f f f f f f f f f";
Lưới sẽ trông khác:
Việc thêm khả năng thích ứng vào thiết kế này nhìn chung trông thật tuyệt vời. Bạn không thể làm điều này chỉ với HTML, nhưng trong CSS mọi thứ đều có thể: ". h h h h h h h h h h ." "c c c c c c c c c m m" ". ff ff ff ff ff ." ;
lưới-mẫu-khu vực: ". h h h h h h h h h h ." "c c c c c c c c c m m" ". ff ff ff ff ff .";
Trang web trông như thế này:
Không có tập lệnh hoặc HTML - chỉ có sự kỳ diệu của CSS Grid!
Ví dụ về lưới và Flex bổ sung
Sau này về Thủ thuật CSS, tôi đã tìm thấy một bài viết khác về chủ đề này, một số tùy chọn trong đó có thể hữu ích cho bạn. Theo các liên kết đến (logo trong khối mã ở trên cùng bên phải) để xem ví dụ hoạt động trên màn hình lớn.
Bố cục trang web cổ điển
Chúng ta có đầu trang và chân trang được kéo dài hết chiều rộng và giữa chúng có một khối nội dung với hai thanh bên. Trong trường hợp đầu tiên, khi thu nhỏ màn hình, mọi đồ vật sẽ vẫn giữ nguyên vị trí như trước.
Nếu bạn cần các khối được đặt ở vị trí bên dưới khối kia thì:
Lưới blog 2 cột
Hãy nói rằng ở trung tâm của chúng tôi khối lớn nội dung và thanh bên. Mã bên dưới giữ nguyên tất cả các đối tượng khi kích thước trang giảm.
Kỹ thuật thứ hai là sắp xếp chúng lần lượt.
Phân bố chiều rộng của các phần tử
Nhìn bề ngoài, ví dụ này giống như một thư viện, khi tất cả các hình ảnh nằm cạnh nhau trong một số cột. Khi bạn giảm kích thước, ngày càng ít chúng xuất hiện trên mỗi dòng.
Hình ảnh bên trong bài viết
Ở đây nội dung được chia thành 2 phần và giữa chúng có một khối toàn màn hình.
Tổng cộng. Nói chung, tôi đã phát hiện ra khái niệm CSS Grid, thành thật mà nói, nó đã gây ấn tượng với tôi - đặc biệt là các khung trong đó các khu vực bố cục với các chữ cái khác nhau được xem xét. Tất nhiên, đây chỉ là những điều cơ bản về “công nghệ”, cộng với việc tôi không mô tả chi tiết từng tham số mã. Các ví dụ ở phần cuối của bài viết phức tạp hơn và cần được xem xét cẩn thận. Nó kết hợp cả Flex và Grid. Nếu chủ đề này thú vị, hãy đăng ký các khóa học của tác giả đầu tiên - Các mục email trong ghi chú thứ nhất hoặc thứ hai ban đầu.
Bạn có điều gì cần bổ sung về CSS Grid không? — viết suy nghĩ, lời khuyên hoặc gửi liên kết thú vị.
Tôi nghĩ bạn đã biết rằng Grid vượt trội hơn Flexbox trong việc tạo bố cục. Nhưng còn bố cục đáp ứng thì sao? Nên sử dụng Flexbox hay Grid cái nào tốt hơn? Cả hai đều có thể hoạt động với bố cục đáp ứng. Rốt cuộc, bạn có thể nghĩ Flexbox phù hợp hơn - Các vật phẩm Flex có thể kéo dài, co lại, thay đổi hướng, v.v. Nhưng Grid thực sự có một số thủ thuật mới sẽ giúp bạn tiết kiệm rất nhiều thời gian và rắc rối cho các bố cục đáp ứng.
Hàm Minmax
Cái đầu tiên rực rỡ công cụ mới Lưới, một hàm minmax cho phép chúng ta xác định phạm vi cho các cột và hàng trong bố cục của mình. Trong ví dụ này, chúng tôi có một thanh bên màu cam và chúng tôi muốn chiều rộng tối thiểu là 100 pixel nhưng không quá 30% chiều rộng của vùng chứa. Chiều rộng của vùng chứa là 500 pixel, vì vậy thanh bên của chúng tôi vui vẻ chiếm 30% (150 pixel).
Đây là cùng một mã, nhưng chiều rộng vùng chứa nhỏ hơn 150px. Bây giờ của chúng tôi giá trị tối thiểu kích hoạt và đảm bảo rằng thanh bên màu cam không nhỏ hơn 100 pixel.
Cách hoạt động của hàm minmax thật tuyệt vời, trong hầu hết các trường hợp, bạn thậm chí sẽ không cần sử dụng truy vấn phương tiện.
Chúng ta có thể đạt được hiệu quả tương tự bằng cách sử dụng Flexbox, nhưng phải mất một chút thời gian làm việc nhiều hơn và mã. Chúng ta phải sử dụng kết hợp flex-grow, min-width, max-width:
Phương pháp Grid linh hoạt hơn và dễ thích ứng hơn. Mã ít hơn gần hai lần.
Một quy tắc cho tất cả các yếu tố
Nếu bạn thực sự cần truy vấn phương tiện, thì với bố cục Lưới, điều đó thật dễ dàng thực hiện. Giả sử chúng tôi muốn thay đổi bố cục này thành thiết bị di động trong một cột. Với Flexbox, chúng ta sẽ cần thay đổi mọi thành phần trong bố cục để ghi đè chiều rộng tối thiểu. Không cần ghi đè chiều rộng tối đa vì chiều rộng tối thiểu được ưu tiên.
Nếu bạn có bố cục đơn giản, phương pháp này hoạt động khá tốt. Nhưng bố cục của bạn càng phức tạp thì nhiều yếu tố hơn sẽ cần phải được ghi đè thông qua các truy vấn phương tiện. Với sự trợ giúp của Grid, vấn đề này sẽ được giải quyết dễ dàng hơn nhiều.
Tôi nhận thấy kỹ thuật Grids khoảng một năm trước. Sau đó, kỹ thuật này, sau một nghiên cứu rất hời hợt, dường như vô dụng và mang tính thử nghiệm đối với tôi; tôi cảm thấy khó chịu vì thực tế là để triển khai cần phải tạo thêm đánh dấu. Nhưng giờ đây, việc không chú ý đến số lượng trang web được xây dựng trên lưới cũng như số lượng bài viết và hướng dẫn về nó đang trở nên khó khăn. Nhờ có phần sau, việc nghiên cứu và hiểu các nguyên tắc và khái niệm cũng như rút ra ít nhiều kết luận thực tế đã trở nên dễ dàng hơn nhiều. Kết luận của tôi một năm sau đó là: “Thật đơn giản và giải pháp hữu ích từng được tạo ra để bố trí các trang web, mọi nhà thiết kế web có lòng tự trọng đều nên biết.”
Bất cứ ai đã từng làm việc với lưới đều biết lưới là gì. biên tập viên đồ họa (Photoshop, Pháo hoa, Gimp, v.v.) và tất nhiên đánh giá cao sự cần thiết của nó khi tạo ra bất kỳ thiết kế nào. Nhưng làm cách nào để triển khai Lưới trên web? Trong thực tế dạng bảng bố cục là một thiết kế trang web thực sự với Lưới, chắc chắn là rất tiện lợi. Nhưng không phải mục đích sử dụng của các yếu tố bàn thật kinh khủng.
May mắn thay, sự phổ biến to lớn của các tiêu chuẩn web đã tăng lên và tiếp tục phát triển qua những năm trước, cũng như sự hỗ trợ của chúng trong các trình duyệt hiện đại, đã cho chúng tôi cơ hội tạo các trang đa chức năng với rất ít đánh dấu hợp lý. Cách bố trí này được gọi Khối. Nhưng cũng Khối bố cục hóa ra là Mặt yếu. Khi tạo các trang với một tập hợp khổng lồ các phần tử có kích thước và ý nghĩa khác nhau, việc đánh dấu các trang như vậy đã trở thành một nhiệm vụ rất khó khăn và nếu có nhiều người làm việc đánh dấu, công việc đó có thể trở thành một cơn ác mộng.
Và rồi kỹ thuật sử dụng Lưới đã ra tay giải cứu. Kỹ thuật này là sự kết hợp giữa Khối Và dạng bảng cách trình bày. Sử dụng nó mang lại cho chúng tôi:
- tốc độ và dễ dàng phát triển
- tự do định vị
- tỷ lệ của các thành phần trang và vị trí của chúng
Bố cục với Grid là gì? Trước hết, đó là một khái niệm. Một khái niệm bao gồm nhiều khía cạnh thiết kế và rất ít quy tắc để thực hiện nó. Điều này mang lại sự tự do hoàn toàn và không có tiêu chuẩn hóa trong việc thực hiện nó. Tôi sẽ nói nhiều hơn nữa - cùng một Grid có thể được triển khai nhiều nhất những cách khác. Nếu bạn đã đọc về Grid, bạn có thể nhận thấy rằng mỗi tác giả đều bắt đầu từ một góc độ mới, đi sâu vào các chi tiết, nói một cách nhẹ nhàng thì khó hiểu. May mắn thay họ bắt đầu xuất hiện Hệ thống lưới - Thư viện CSS và để làm việc với Grid. Và sử dụng ví dụ của họ, bạn có thể nhanh chóng thành thạo nguyên tắc cơ bản kỹ thuật này.
Tôi nghĩ thật vô nghĩa khi viết về tất cả các khía cạnh của Lưới; bạn có thể dễ dàng tìm thấy thông tin về nó trên Internet. Tôi khuyên bạn nên tạo đơn giản của riêng bạn Hệ thống lưới điện.
Trước tiên, bạn cần hiểu rằng lưới bao gồm các cột và khoảng cách giữa chúng. Có ba giá trị chính - chiều rộng lưới, chiều rộng cột và chiều rộng khoảng cách giữa các cột. Chiều rộng của các cột phụ thuộc vào số lượng của chúng.
Hãy thử tạo một lưới rộng 950 pixel với 16 cột có khoảng cách 10 pixel, do đó, một cột phải rộng 50 pixel. Sau khi hiểu tất cả các giá trị, chúng tôi mở bất kỳ trình soạn thảo đồ họa nào mà chúng tôi biết và tạo bố cục. Bạn cũng có thể thêm phần đệm vào Lưới ở bên trái và bên phải, giả sử mỗi phần là 20 pixel và điều này sẽ dẫn đến bố cục có chiều rộng là 990 pixel. Bạn có thể xem ví dụ của tôi.
Bây giờ chúng ta có thể bắt đầu tạo thư viện của mình. Giống như hầu hết các thư viện CSS của chúng tôi cần thiết lập lại toàn cục, tôi đề xuất Thiết lập lại CSS của Eric Mayer, giữ nguyên đặt lại.css hãy tạo ra lưới.css mà chúng ta có thể thêm ngay một phương pháp làm sạch các thùng chứa khối nổi - Clear Fix. Điều đầu tiên chúng ta cần là một quy tắc cho vùng chứa sẽ chứa tất cả các cột của chúng ta. Chiều rộng của mỗi vùng chứa bằng chiều rộng của lưới của chúng tôi.
.thùng đựng hàng(
lề: 0 tự động;
chiều rộng: 950px;
}
Bây giờ chúng ta có thể thêm quy tắc cho các cột của mình, nó chứa chiều rộng và phần đệm. Thụt lề hoạt động như một khoảng trống (mương nước) giữa các cột.
.cột(
nổi: trái;
lề phải: 10px;
tràn: ẩn;
chiều rộng: 50px;
}
Cột cuối cùng không cần thụt lề; để làm điều này, hãy thêm quy tắc cho nó:
Container của chúng ta chứa các cột, các cột là các khối nổi nên phải được làm sạch. Để tránh .clearfix không cần thiết trong đánh dấu, bạn có thể áp dụng quy tắc này cho vùng chứa:
.clearfix:sau, .container:sau{
nội dung: ".";
hiển thị: khối;
chiều cao: 0;
rõ ràng: cả hai;
khả năng hiển thị: ẩn;
}sửa chữa rõ ràng, .thùng đựng hàng( hiển thị: khối nội tuyến; )
/* Ẩn khỏi IE-mac \*/
*html.clearfix, *html.container(chiều cao: 1%;)
.clearfix, .thùng đựng hàng(hiển thị: khối;)
/* Kết thúc việc ẩn khỏi IE-mac */
Bây giờ chúng ta có thể bắt đầu với các cột của mình. Cột có thể rộng hai hoặc ba, v.v. Để làm điều này, chúng ta có thể áp dụng các quy tắc sau cho chúng:
.span-1 ( chiều rộng: 50px; )
.span-2 (chiều rộng: 110px; )
.span-3 (chiều rộng: 170px; )
.span-4 (chiều rộng: 230px; )
.span-5 (chiều rộng: 290px; )
.span-6 (chiều rộng: 350px; )
.span-7 (chiều rộng: 410px; )
.span-8 (chiều rộng: 470px; )
.span-9 (chiều rộng: 530px; )
.span-10 (chiều rộng: 590px; )
.span-11 (chiều rộng: 650px; )
.span-12 (chiều rộng: 710px; )
.span-13 (chiều rộng: 770px; )
.span-14 (chiều rộng: 830px; )
.span-15 (chiều rộng: 890px; )
.span-16 ( chiều rộng: 950px; lề phải: 0; )
Về nguyên tắc, đây là tất cả những gì cần thiết cho việc triển khai Lưới; bạn cũng có thể thêm trình bao bọc và lớp để xem Lưới bằng bố cục. Hãy tạo ra chính.css và thêm vào nó:
.vỏ bánh(
lề: 0 tự động;
chiều rộng: 990px;
}
.overlay(
nền: url trong suốt (overlay.png) lặp lại-y cuộn trên cùng bên trái;
}
Đây là cách bố trí có thể trông như thế nào:
Tôi nghĩ điều này là đủ cho một sự khởi đầu.
Bạn có thể xem ví dụ của tôi
