Biết cách tạo lưới đáp ứng là một phần thiết yếu của quá trình phát triển web.
Cho dù bạn đang tạo trang danh mục đầu tư cho nhiếp ảnh gia, trang thương mại điện tử hay trang đích, tất cả đều sẽ dựa trên bố cục lưới. Lưới có ở khắp mọi nơi.
Nếu bạn biết cách tạo bố cục lưới tốt, đáp ứng, bạn sẽ ngay lập tức nổi bật với tư cách là nhà phát triển web giao diện người dùng.
Hãy bắt đầu ngay với nó với tổng quan nhanh về lưới là gì:
Bố cục lưới là gì?
Lưới là một phương pháp đã được thử nghiệm và đúng để tổ chức các yếu tố hình ảnh trong phương tiện truyền thông.
Các nhà thiết kế đã thực hiện các lưới kể từ những ngày đầu tiên của báo in và quảng cáo.
Sử dụng lưới tạo ra một bố cục đẹp mắt về mặt thẩm mỹ, dễ dàng cho não bộ tiếp nhận và lĩnh hội. Vì vậy, đó là thứ mà bạn chắc chắn muốn sử dụng trong các trang web của mình.
Một thiết kế lưới sẽ chia khu vực thành các cột. Giữa các cột là khoảng trắng hoặc rãnh nước.
Thông thường, bạn muốn có tổng cộng mười hai cột vì sau đó bạn có thể chia không gian thành hai hoặc ba.
Bạn có thể thấy phương pháp này có hiệu lực trên chủ đề trang web Studiopress:
Tất nhiên, không phải tất cả các cột đều phải có cùng chiều rộng. Bạn có thể muốn một số cột kéo dài hai cột và những cột khác kéo dài bốn, sáu hoặc nhiều hơn.
Chỉ cần đảm bảo rằng tất cả các phần tử trên trang bắt đầu và kết thúc ở một trong các cột.
Ngoài ra, bạn có thể chia khu vực theo chiều dọc của mình thành các khu vực khác nhau, với mỗi khu vực có sự kết hợp khác nhau của độ rộng cột.
Không phức tạp như nó nghe ban đầu, phải không? Vì vậy, bây giờ chúng ta đã biết những kiến thức cơ bản, cách tốt nhất để xây dựng lưới đáp ứng trong trang web của bạn là gì?
Đọc tiếp và tìm hiểu:
Các phương pháp tạo lưới đáp ứng
Gần đây, người ta nói nhiều về cách bố trí lưới flexbox và CSS.
Trước những công nghệ CSS mới này, bạn phải sử dụng thuộc tính float của CSS. Bạn đã tạo một số phần tử cột nổi, rắc vào một loạt chiều rộng phần trăm và các truy vấn phương tiện và bạn đã sẵn sàng.
(Và trước lưới float, bảng HTML là lựa chọn duy nhất. Nhưng chúng ta không nói về những thứ đó 😉)
Khi tôi đang học phát triển web front-end, tôi bắt đầu sử dụng một khuôn khổ đáp ứng, Zurb Foundation. Nhiều người trong số các bạn có thể sử dụng Bootstrap.
Các khuôn khổ đáp ứng giúp việc xây dựng trang web dễ dàng hơn rất nhiều. Chúng tiết kiệm thời gian rất nhiều!
Tuy nhiên, mặc dù chúng có thể giúp bạn tiết kiệm thời gian, nhưng dựa vào chúng quá nhiều không phải là điều tốt. Đặc biệt nếu bạn không biết chính xác họ đang làm gì.
Cố gắng hiểu cách giàn giáo bên dưới hoạt động dưới lớp vỏ của các khuôn khổ. Nó không dễ dàng như chuyển một số lớp cột vào div của bạn, nhưng bạn sẽ hiểu các nguyên tắc CSS hơn.
Điểm mấu chốt:nó sẽ giúp bạn trở thành nhà phát triển web tốt hơn.
Dự án nhỏ của chúng tôi
Chúng ta sẽ đi sâu vào cách tạo lưới 2 cột đơn giản, sử dụng ba phương pháp khác nhau:
- float,
- flexbox,
- và bố cục lưới CSS.
Tôi sẽ giải thích từng bước bằng cách sử dụng các đoạn mã và một số hình ảnh.
Lập kế hoạch cho lưới
Lưới chúng tôi muốn tạo là lưới hai cột cơ bản. Nó có một khu vực nội dung chính và một thanh bên, giống như nhiều thiết kế trang web.
Khi xây dựng một bố cục, một trong những điều đầu tiên bạn cần quyết định là nó sẽ trông như thế nào. Có nghĩa là, bố cục sẽ thay đổi như thế nào khi xem trên máy tính để bàn, so với xem trên máy tính bảng hoặc thiết bị di động.
Một chiến lược tôi sử dụng khi bắt đầu xây dựng là viết ra thiết kế sẽ thay đổi như thế nào trên các thiết bị. Đây là những ghi chú của tôi cho bài tập này:
Trên điện thoại di động , chúng tôi muốn các cột xếp chồng lên nhau, với nội dung chính ở trên cùng và thanh bên ở dưới. Cả hai đều sẽ có chiều rộng 100%.
Trên máy tính bảng , chúng tôi muốn các cột cạnh nhau, mỗi cột chiếm 50% chiều rộng.
Trên máy tính để bàn , chúng tôi muốn cột nội dung chính chiếm 2/3 chiều rộng và thanh bên chiếm 1/3 chiều rộng.
Và đây là những gì chúng tôi muốn lưới trông như thế nào ở mỗi điểm ngắt đó:
Đó là một công việc bổ sung trước thời hạn một chút, nhưng kế hoạch này sẽ giúp bạn tiết kiệm thời gian vì bạn biết mình cần xây dựng những gì. Kỹ thuật này đặc biệt hữu ích khi bạn thực hiện các dự án lớn hơn và phức tạp hơn.
Bây giờ chúng tôi có thông tin cơ bản cần thiết để bắt đầu tạo lưới của chúng tôi!
Lưới nổi
Bạn có thể thắc mắc tại sao chúng tôi lại sử dụng lưới float, vì flexbox và CSS grid đang tiếp quản. Tôi vẫn đưa nó vào đây vì có thể có một số trường hợp phức tạp mà bạn cần biết float, đặc biệt là với các trình duyệt Internet Explorer cũ hơn.
Thuộc tính float trong CSS ban đầu được thiết kế để sử dụng như cho phép văn bản chảy xung quanh hình ảnh. Đặt hình ảnh là float:left ruleset sẽ làm cho hình ảnh được căn chỉnh, hay còn gọi là "float" ở bên trái của phần tử mẹ.
Tạo lưới bằng float
Để tạo lưới, bạn sẽ cung cấp cho nhiều phần tử một thuộc tính float, điều này sẽ làm cho tất cả chúng căn chỉnh về một phía, bên phải hoặc bên trái.
.column {
display: block;
float: left;
}Có vẻ khá đơn giản, phải không?
Tuy nhiên, một khía cạnh khó chịu về float là nó đưa phần tử ra khỏi luồng thông thường của tài liệu.
Hình ảnh dưới đây cho thấy điều gì sẽ xảy ra khi các cột nổi màu xanh lam được đưa ra khỏi màn hình bình thường. Sau đó, div cha màu xám sẽ thu gọn đến độ cao như cũ nếu nó không có con.
Bạn có thể khắc phục sự cố này bằng một số cách.
Bạn có thể thêm display: table bộ quy tắc cho phần tử mẹ. Hoặc bạn có thể xóa các float bằng cách thêm :after phần tử giả đối với phần tử gốc với các kiểu sau để xóa các phần tử nổi.
.parent:after
{
clear: both;
content: "";
display: block;
}Một lưu ý khác là nếu bạn đang sử dụng padding và margin (về cơ bản là luôn luôn), bạn sẽ cần đặt box-sizing:border-box trên mọi phần tử.
Khai báo này bao gồm phần đệm và lề khi tính toán chiều rộng và chiều cao cuối cùng của các phần tử. Nó đảm bảo rằng các yếu tố sẽ không xuất hiện trên trang.
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Chris Coyier có một lời giải thích thực sự tuyệt vời về tất cả những điều này ở đây.
Sử dụng truy vấn phương tiện để làm cho lưới đáp ứng
Để làm cho lưới đáp ứng, chúng tôi sẽ sử dụng các truy vấn phương tiện. Sử dụng chúng, chúng tôi sẽ có thể yêu cầu lưới có bố cục cụ thể ở các độ rộng thiết bị nhất định.
Từ ghi chú của mình, chúng tôi muốn cả phần tử chính và thanh bên có chiều rộng 100% cho thiết bị di động, sau đó cả hai cạnh nhau 50% trên máy tính bảng, sau đó là 2/3 và 1/3 chiều rộng cạnh nhau trên máy tính để bàn.
Trong HTML, chúng tôi sẽ tạo div cha, với hai div cột con với các lớp biểu thị nếu chúng là phần chính hay phần thanh bên.
<div class="parent">
<div class="column main"></div>
<div class="column sidebar"></div>
</div>Trên thiết bị di động:
Trong CSS, sử dụng phương pháp ưu tiên thiết bị di động, theo mặc định, chúng tôi sẽ đặt cả hai cột thành 100%.
.column {
display: block;
width: 100%;
}Trên máy tính bảng:
Sau đó, đối với chiều rộng cho máy tính bảng và lớn hơn, chúng tôi sẽ thả nổi các cột sang bên trái và làm cho chúng có chiều rộng 50%.
@media only screen and (min-width: 641px){
.column {
width: 50%;
float: left;
}
}Trên máy tính để bàn:
Đối với máy tính để bàn, chúng tôi sẽ thêm một truy vấn phương tiện khác thay đổi chiều rộng của nội dung chính và thanh bên thành 2/3 và 1/3.
@media only screen and (min-width: 1025px){
.main {
width: 66.66%;
}
.sidebar {
width: 33.33%;
}
}Bạn có thể xem mã đang hoạt động trên codepen của tôi tại đây:
Xem Pen Float Grid của Jessica (@thecodercoder) trên CodePen.
Nó có vẻ tương đối đơn giản, phải không? Phao không khủng khiếp - chúng là tất cả những gì chúng tôi có trong một thời gian dài.
Nhưng khi chúng ta chuyển sang flexbox, tôi nghĩ bạn sẽ thấy lưới float hơi khó hiểu và flexbox trực quan hơn.
Lưới Flexbox
Để tạo lưới đáp ứng bằng cách sử dụng flexbox, chúng tôi sẽ sử dụng HTML tương tự như trên, với div mẹ có hai div cột con.
Điều đầu tiên bạn phải làm là khai báo rằng cấp độ gốc nên sử dụng flexbox:
.parent {
display: flex;
}Sau đó, đặt thuộc tính flex trên div cột:
.column {
flex: 1;
}
flex: 1 khai báo có nghĩa là mỗi cột div sẽ có cùng chiều rộng với các cột khác. Nó giống như một tỷ lệ.
Nếu bạn muốn cột đầu tiên có chiều rộng gấp đôi chiều rộng của cột kia, bạn sẽ đặt độ linh hoạt của cột đầu tiên thành 2. Và giá trị độ linh hoạt của cột thứ hai sẽ bằng một nửa giá trị đó, 1.
Đó là tất cả những gì bạn cần để bắt đầu!
Flexbox khá thông minh và nó sẽ tự động chia đều không gian lưới giữa các cột cho dù bạn có bao nhiêu cột.
So sánh CSS ở trên với những gì chúng tôi phải sử dụng cho lưới nổi và tôi nghĩ bạn sẽ đồng ý với tôi rằng flexbox đơn giản hơn.
Tạo lưới linh hoạt
Bây giờ, để tạo lưới đáp ứng hai cột của chúng tôi, chúng tôi sẽ làm những gì chúng tôi đã làm đối với lưới nổi và đặt kiểu mặc định của chúng tôi cho thiết bị di động trước tiên.
Đối với điện thoại di động:
Chúng tôi không cần flexbox trên thiết bị di động, chỉ trên máy tính bảng và máy tính để bàn, vì vậy div chính không cần display: flex khai báo chưa.
Chúng tôi muốn các div của cột bằng 100% chiều rộng. Bạn có thể đặt rõ ràng khai báo width:100% trên các cột, nếu bạn muốn.
Hoặc bạn không thể khai báo kiểu width. Div thường sẽ mặc định thành display: block và tự động là chiều rộng 100%.
Đối với máy tính bảng:
Bắt đầu trên máy tính bảng, chúng tôi sẽ thêm vào flexbox và sử dụng các truy vấn phương tiện cho các kiểu trên chiều rộng máy tính bảng trở lên.
Trước tiên, chúng tôi sẽ tạo flexbox và đặt phụ huynh để sử dụng display: flex .
Chúng tôi muốn các cột có khoảng cách đều nhau ở chiều rộng này, vì vậy chúng tôi sẽ sử dụng flex: 1 khai báo cho tất cả các div cột. 1 nghĩa là các cột sẽ có cùng chiều rộng so với nhau.
@media only screen and (min-width: 641px){
.parent {
display: flex;
}
.column {
flex: 1;
}
}Đối với máy tính để bàn:
Trên máy tính để bàn, chúng tôi muốn nội dung chính chiếm 2/3 chiều rộng có sẵn. Thanh bên sẽ chiếm 1/3 còn lại.
Để thực hiện điều này, chúng tôi sẽ tăng giá trị linh hoạt của cột chính thành 2 . Phần linh hoạt của thanh bên sẽ vẫn ở 1 được đặt trên máy tính bảng, vì vậy nó không cần khai báo khác cho máy tính để bàn.
@media only screen and (min-width: 1025px){
.main {
flex: 2;
}
}Điều này có nghĩa là nội dung chính sẽ có chiều rộng gấp đôi chiều rộng của thanh bên.
Vì có hai cột nên nội dung chính sẽ có chiều rộng là 2/3 và thanh bên sẽ có chiều rộng là 1/2, chiều rộng là 1/3.
Flexbox mạnh mẽ và trực quan
Bạn có thể thấy ngay rằng CSS flexbox cần ít như thế nào. Và lưới nó tạo ra giống hệt như lưới nổi.
Điều tôi thích ở flexbox là nó chỉ hoạt động . Nó trực quan.
Sau khi vật lộn với CSS float trong nhiều năm, tôi không thể tin được việc tạo lưới lại dễ dàng đến thế.
Flexbox cũng có nhiều thuộc tính nâng cao hơn mà bạn có thể tận dụng:
- Căn chỉnh các mục cột theo cả chiều ngang hoặc chiều dọc (vâng, theo chiều dọc !!).
- Căn giữa các mục hoặc mở rộng chúng sang các cạnh bên trái và bên phải của lưới chính.
- Thay đổi thứ tự của các mục tại các điểm ngắt khác nhau.
Bạn có thể đọc thêm về những gì flexbox có thể làm trong các bài viết này tại CSS Tricks và Mozilla.
Và đây là codepen cho lưới linh hoạt:
Xem Pen Flex Grid của Jessica (@thecodercoder) trên CodePen.
Bạn sẽ không bao giờ phải sử dụng phao nữa. Tất nhiên, trừ khi bạn đang quấn văn bản xung quanh một hình ảnh.
Sẵn sàng cho một số niềm vui hơn? Hãy chuyển sang phương pháp lưới cuối cùng:
Bố cục lưới CSS
Lưới CSS là phương pháp mới nhất để xây dựng lưới. Nó tương tự, nhưng rất khác với flexbox.
Theo Rachel Andrew, chuyên gia về lưới CSS, mỗi người đều có thế mạnh:
- Hộp linh hoạt hữu ích cho các phần tử được sắp xếp theo một hướng, trong một hàng hoặc một cột.
- Lưới CSS rất hữu ích cho việc sắp xếp liên quan đến các hàng và cột.
Cô ấy giải thích thêm trong bài viết này lý do tại sao lưới CSS tốt hơn cho một bố cục trang web điển hình liên quan đến đầu trang, chân trang, nội dung và thanh bên, trái ngược với flexbox.
Hiện tại, nhược điểm chính của lưới CSS là nó không được tất cả các trình duyệt hỗ trợ.
Các phiên bản cũ hơn của Chrome, iOS Safari và Android hoàn toàn không hỗ trợ nó. Và hỗ trợ IE và Edge là rất ít.
Nếu bạn muốn sử dụng lưới CSS, bạn có một số tùy chọn:
- Bạn có thể sử dụng nó và bao gồm một số CSS dự phòng cho các trình duyệt không hỗ trợ nó.
- Hoặc bạn có thể sử dụng flexbox và đợi cho đến khi hỗ trợ trình duyệt phổ biến hơn.
Cách hoạt động của lưới CSS
Giống như flexbox, lưới CSS yêu cầu bạn đặt thuộc tính hiển thị trên phần tử mẹ. Trong trường hợp này, chúng tôi sẽ khai báo display: grid .
Tuy nhiên, có một điểm khác biệt lớn về lưới CSS. Thay vì đặt cài đặt lưới trên từng phần tử con, chúng tôi cũng đặt mẫu lưới trên phần tử gốc.
Để đặt mẫu lưới, chúng tôi sẽ khai báo số cột và / hoặc hàng bạn muốn có và kích thước của mỗi cột.
Để thực hiện điều này, hãy sử dụng grid-template-columns thuộc tính nếu bạn có nhiều cột và grid-template-rows cho nhiều hàng.
Sau đó, thuộc tính được theo sau bởi một giá trị độ dài cho mỗi phần tử con.
Đối với lưới có hai cột, chúng tôi sẽ chỉ sử dụng grid-template-columns tài sản.
grid-template-columns khi đó thuộc tính sẽ có hai giá trị, một giá trị cho mỗi cột:
.parent {
display: grid;
grid-template-columns: 1fr 1fr;
}"fr" là cái quái gì ?!
“Fr”, viết tắt của phân số, là một đơn vị đo lường mới. Nó biểu thị phân số không gian khả dụng sẽ được sử dụng bởi từng mục trong lưới.
Nó thực sự tương tự như flex number– cả hai đều đại diện cho chiều rộng tương đối của một phần tử con so với các phần tử khác.
Tạo lưới CSS
Dưới đây là cách chúng tôi sẽ tạo kiểu lưới, một lần nữa đi từ phương pháp ưu tiên thiết bị di động.
Trên thiết bị di động:
Như thường lệ, các cột con sẽ xếp chồng trên thiết bị di động, vì vậy chúng tôi sẽ không đặt bất kỳ kiểu lưới CSS nào.
Trên máy tính bảng:
Chúng tôi muốn hai phần tử con có chiều rộng bằng nhau cho máy tính bảng.
.parent {
display: grid;
grid-template-columns: 1fr 1fr;
}Trên máy tính để bàn:
Chúng tôi sẽ thực hiện một tỷ lệ tương tự của cột chính có chiều rộng gấp đôi chiều rộng của cột thanh bên, tỷ lệ này sẽ tính ra 2/3 và 1/3 một lần nữa.
@media only screen and (min-width: 1025px){
.parent {
grid-template-columns: 2fr 1fr;
}
}Khá thú vị là chúng tôi không phải đặt bất kỳ kiểu lưới nào trên các cột thực tế, mà chỉ là cột chính!
Lưới CSS cực kỳ mạnh mẽ
Giống như flexbox, lưới CSS có thể làm được nhiều việc hơn là chỉ tạo một lưới hai cột.
Bạn có thể sử dụng lưới CSS để tạo các bố cục phức tạp hơn nhiều với chiều rộng, chiều cao và cách sắp xếp khác nhau. Tôi thực sự mới chỉ tìm hiểu sơ lược về khả năng của lưới CSS.
Nếu bạn muốn đọc thêm về lưới CSS, hãy xem trang web Grid by Example của Rachel Andrew hoặc một bài báo của Mozilla, “Các khái niệm cơ bản về bố cục lưới”.
Và đây là codepen tôi đã tạo cho cái này:
Xem lưới Pen CSS của Jessica (@thecodercoder) trên CodePen.
Đang kết thúc
Nếu bạn còn đang băn khoăn không biết phương pháp nào phù hợp nhất với mình, thì cá nhân tôi nghĩ rằng flexbox là lựa chọn tốt nhất ngay bây giờ.
Đã đủ lâu để nó có khả năng hỗ trợ trình duyệt tốt và đó chỉ là một cách tốt, hiệu quả để tạo lưới. Ngoài ra, nó sẽ không bị thay thế hoàn toàn bởi lưới CSS, vì nó có những điểm mạnh sẽ hoạt động tốt song song với lưới CSS.
Cuối cùng, lưới CSS vẫn đang làm việc để nhận được nhiều sự hỗ trợ của trình duyệt hơn. Nhưng bạn nên bắt đầu học nó ngay bây giờ, dù chỉ một chút. Sẽ không lâu nữa lưới CSS trở thành tiêu chuẩn ngành để xây dựng bố cục trang web.
Bạn có yêu thích? Bạn có gặp khó khăn khi cố gắng học flexbox hoặc CSS grid không? Vui lòng để lại bình luận bên dưới.