Hướng dẫn cơ bản về CSS RWD - Lưới hiển thị: Cẩm nang cho người mới bắt đầu

Xin chào các ngôi sao thiết kế web tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới của CSS Responsive Web Design (RWD) và Lưới hiển thị. Là một người đã dạy điều này trong nhiều năm, tôi có thể告诉 bạn rằng việc thành thạo những khái niệm này sẽ giúp bạn cảm thấy như mình có siêu năng lực trong thiết kế web. Vậy, chúng ta hãy bắt đầu nào!

Hiểu về cơ bản

Trước khi chúng ta bắt đầu xây dựng lưới của mình, hãy dành một chút thời gian để hiểu rõ những gì chúng ta đang làm việc với. Hãy tưởng tượng bạn đang sắp xếp nội thất trong một căn phòng. Lưới hiển thị giống như những đường vô hình trên sàn giúp bạn tổ chức mọi thứ một cách hoàn hảo. Trong thiết kế web, nó là cách để tạo ra một bố cục linh hoạt, tương ứng và trông đẹp mắt trên bất kỳ thiết bị nào.

Lưới hiển thị là gì?

Một lưới hiển thị trong CSS chia trang web thành các cột và hàng, tạo ra một bố cục có cấu trúc. Nó giống như đang cho nội dung của bạn một ngôi nhà ấm cúng nơi mọi thứ đều phù hợp.

CSS RWD Lưới hiển thị - Xây dựng

Bây giờ, hãy c rolled up our sleeves và bắt đầu xây dựng lưới của mình!

Bước 1: Thiết lập容器

Đầu tiên, chúng ta cần tạo một容器 cho lưới của mình. Điều này giống như việc chọn căn phòng nơi chúng ta sẽ sắp xếp nội thất.

.grid-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

Mã này tạo ra một container rộng 100%, với độ rộng tối đa là 1200 pixel. margin: 0 auto; giúp nó được căn giữa trên trang.

Bước 2: Tạo hàng

Tiếp theo, chúng ta sẽ tạo các hàng trong lưới của mình. Hãy tưởng tượng chúng như các kệ trong căn phòng.

.row::after {
content: "";
clear: both;
display: table;
}

Điều này có thể trông hơi kỳ lạ, nhưng nó là một mẹo phổ biến để xóa bỏ các float. Nó đảm bảo rằng các hàng của chúng ta hành xử đúng cách.

Bước 3: Định nghĩa cột

Bây giờ đến phần thú vị - tạo các cột! Chúng ta sẽ sử dụng phần trăm để làm chúng linh hoạt.

[class*="col-"] {
float: left;
padding: 15px;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

Dưới đây là bảng tóm tắt các lớp cột của chúng ta:

Lớp	Độ rộng
col-1	8.33%
col-2	16.66%
col-3	25%
col-4	33.33%
col-5	41.66%
col-6	50%
col-7	58.33%
col-8	66.66%
col-9	75%
col-10	83.33%
col-11	91.66%
col-12	100%

Những lớp này cho phép chúng ta tạo ra các cột với độ rộng khác nhau. Ví dụ, col-6 tạo ra một cột rộng 50% - hoàn hảo cho bố cục hai cột!

Bước 4: Làm cho nó linh hoạt

Để làm cho lưới của chúng ta thực sự linh hoạt, chúng ta cần điều chỉnh nó cho các kích thước màn hình khác nhau. Đây là nơi media queries phát huy tác dụng:

@media only screen and (max-width: 768px) {
[class*="col-"] {
width: 100%;
}
}

Mã này nói, "Hey browser, if the screen is 768 pixels wide or less, make all columns full width." It's like magic - your layout automatically adjusts for smaller screens!

CSS RWD Lưới hiển thị - Ví dụ

Hãy kết hợp tất cả những điều này trong một ví dụ thực tế. Hãy tưởng tượng chúng ta đang tạo một bố cục blog đơn giản.

<div class="grid-container">
<div class="row">
<div class="col-3">
<h2>Về tôi</h2>
<p>Tôi là một người đam mê thiết kế web, yêu thích mèo và cà phê!</p>
</div>
<div class="col-6">
<h2>Bài blog mới nhất của tôi</h2>
<p>Hôm nay, tôi đã học cách tạo một bố cục lưới linh hoạt...</p>
</div>
<div class="col-3">
<h2>Liên kết nhanh</h2>
<ul>
<li>Trang chủ</li>
<li>Portfolio</li>
<li>Liên hệ</li>
</ul>
</div>
</div>
</div>

Trong ví dụ này, chúng ta đã tạo một hàng với ba cột:

1. Cột bên về tác giả (25% rộng)
2. Vùng nội dung chính (50% rộng)
3. Phần liên kết nhanh (25% rộng)

Khi xem trên màn hình nhỏ hơn, nhờ vào media query của chúng ta, những cột này sẽ chồng lên nhau theo chiều dọc, đảm bảo khả năng đọc trên bất kỳ thiết bị nào.

Sự linh hoạt kỳ diệu

Điều tuyệt vời về hệ thống này là sự linh hoạt của nó. Cần một bố cục bốn cột? Chỉ cần sử dụng col-3 bốn lần. Muốn chia không đều? Hãy thử kết hợp col-8 với col-4. Các khả năng là không giới hạn!

Kết luận

Và thế là bạn đã có nó, các bạn! Bạn vừa học cách tạo một lưới hiển thị linh hoạt bằng CSS. Nhớ rằng, thực hành là chìa khóa để thành thạo. Hãy thử tạo các bố cục khác nhau, experiment with various column combinations, và quan trọng nhất, hãy vui vẻ với nó!

Như tôi luôn nói với học sinh của mình, thiết kế web giống như nấu ăn - bạn bắt đầu với một công thức (như hệ thống lưới này), nhưng đừng ngại thêm hương vị riêng của bạn. Có thể bạn muốn điều chỉnh padding, thêm một số hiệu ứng hover tinh tế, hoặc thậm chí là thêm một số hiệu ứng CSS动画. Web là canvas của bạn, và bây giờ bạn đã có một lưới vững chắc để vẽ lên!

Tiếp tục mã hóa, tiếp tục học hỏi, và trước khi bạn biết, bạn sẽ tạo ra những trang web stunning, responsive websites look great on everything from the biggest desktop monitor to the tiniest smartphone. Chúc may mắn với việc tạo lưới!

Credits: Image by storyset