CSS - Bố cục Lưới: Hướng dẫn cho Người mới bắt đầu

Xin chào các bạn, những siêu sao thiết kế web tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của CSS Grid Layout. Đừng lo lắng nếu bạn chưa từng viết một dòng mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng nhau bước từng bước. Cuối bài hướng dẫn này, bạn sẽ có thể tạo ra những bố cục mượt mà, linh hoạt như một chuyên gia!

什么是 Lưới Bố cục?

Hãy tưởng tượng bạn đang sắp xếp nội thất trong một căn phòng. Bạn có thể sẽ phân chia không gian thành các hàng và cột để giúp tổ chức mọi thứ ngăn nắp. Đó chính là điều CSS Grid Layout làm cho các trang web!

CSS Grid Layout là một công cụ mạnh mẽ cho phép chúng ta tạo ra các bố cục hai chiều trên các trang web. Nó giống như có một lưới vô hình trên trang web của bạn nơi bạn có thể đặt nội dung chính xác ở vị trí bạn muốn. Đúng là rất tuyệt vời, phải không?

Các phần tử Lưới

Trước khi chúng ta bắt đầu, hãy làm quen với một số thuật ngữ quan trọng:

1. Grid Container: Đây là phần tử cha chứa tất cả các mục lưới.
2. Grid Items: Đây là các phần tử con của grid container.
3. Grid Lines: Các đường phân chia tạo nên cấu trúc của lưới.
4. Grid Tracks: Các không gian giữa các đường lưới (hàng hoặc cột).
5. Grid Cell: Giao điểm của một hàng và một cột.
6. Grid Area: Một không gian hình chữ nhật được bao quanh bởi bốn đường lưới.

Đừng lo lắng nếu những điều này听起来 vẫn còn rối rắm bây giờ. Chúng ta sẽ thấy chúng trong hành động ngay sau!

Thuộc tính Display Grid

Hãy bắt đầu với một ví dụ đơn giản. Giả sử chúng ta muốn tạo một lưới cơ bản 3x3. Đây là cách chúng ta làm:

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}

.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}

Hãy phân tích này:

1. Chúng ta đặt display: grid; trên container để kích hoạt Grid Layout.
2. grid-template-columns: auto auto auto; tạo ra ba cột có độ rộng bằng nhau.
3. Chúng ta thiết kế các mục lưới để dễ quan sát.

Voila! Bạn vừa tạo ra bố cục lưới đầu tiên của mình. Thật thú vị phải không?

Hàng và Cột Lưới

Bây giờ, hãy cụ thể hơn với các hàng và cột của chúng ta. Chúng ta có thể định nghĩa kích thước chính xác:

.grid-container {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 80px 200px;
}

Điều này tạo ra một lưới với:

• Ba cột: 100px, 200px và 100px rộng
• Hai hàng: 80px và 200px cao

Bạn cũng có thể sử dụng các đơn vị khác như百分比 hoặc đơn vị mới fr (phần của không gian khả dụng):

.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
}

Điều này tạo ra một bố cục tương tự, nhưng các cột sẽ thay đổi kích thước linh hoạt dựa trên không gian khả dụng.

Khoảng cách Lưới

Đôi khi, bạn muốn có một chút không gian giữa các mục lưới. Đó là khi grid-gap được sử dụng:

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}

Điều này thêm một khoảng cách 10px giữa tất cả các hàng và cột. Bạn cũng có thể đặt khoảng cách hàng và cột riêng biệt:

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 10px;
grid-column-gap: 20px;
}

Đường Lưới CSS

Nhớ lại những đường lưới chúng ta đã thảo luận trước đó? Chúng ta có thể sử dụng chúng để xác định vị trí chính xác các mục:

<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 300px 100px;
gap: 10px;
}

.item1 {
grid-column: 1 / span 4;
}

.item2 {
grid-row: 2 / span 2;
}

.item3 {
grid-column: 2 / span 2;
}

.item4 {
grid-column: 4;
grid-row: 2;
}

.item5 {
grid-column: 2 / span 3;
grid-row: 3;
}

Điều này tạo ra một bố cục phức tạp với một tiêu đề chiếm toàn bộ-width, một menu bên cạnh, khu vực nội dung chính, thanh bên phải và chân trang. Thử thay đổi các giá trị này để xem chúng ảnh hưởng như thế nào đến bố cục!

Tham khảo Thuộc tính CSS Grid

Dưới đây là bảng tham khảo một số thuộc tính CSS Grid phổ biến:

Thuộc tính	Mô tả
display: grid;	Định nghĩa một grid container
grid-template-columns	Xác định số lượng và kích thước của các cột
grid-template-rows	Xác định số lượng và kích thước của các hàng
grid-gap	Đặt khoảng cách giữa các mục lưới
grid-column-start	Xác định nơi bắt đầu của mục lưới
grid-column-end	Xác định nơi kết thúc của mục lưới
grid-row-start	Xác định nơi bắt đầu của mục lưới
grid-row-end	Xác định nơi kết thúc của mục lưới
grid-area	Xác định kích thước và vị trí của các mục lưới

Và thế là bạn đã迈出了进入 CSS Grid Layout tuyệt vời. Nhớ rằng, thực hành làm nên完美, vì vậy đừng ngại thử nghiệm với các bố cục và thuộc tính khác nhau. Trước khi bạn nhận ra, bạn sẽ tạo ra các bố cục phức tạp, linh hoạt một cách dễ dàng.

Chúc các bạn vui vẻ khi lập mã, các.master lưới tương lai!

Credits: Image by storyset