CSS Grid: Hướng dẫn cơ bản cho những người mới bắt đầu

Chào mừng các bạn, những pháp sư thiết kế web tương lai! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của CSS Grid. Đừng lo lắng nếu bạn chưa bao giờ 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 trong hành trình này. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể tạo ra các bố cục như một chuyên gia!

CSS Grid là gì?

CSS Grid giống như một siêu anh hùng cho các bố cục web. Nó là một hệ thống hai chiều cho phép bạn tổ chức nội dung theo hàng và cột. 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ều Grid làm cho trang web của bạn!

Tại sao bạn nên quan tâm?

Trước khi có Grid, chúng ta thường phải vật lộn với floats và positioning để tạo ra các bố cục phức tạp. Đó giống như cố gắng xây dựng một ngôi nhà bằng băng dính! Grid làm cho điều đó dễ dàng và trực quan. Tin tôi đi, sau 15 năm dạy học, tôi đã thấy niềm vui trên mặt các học sinh khi họ khám phá Grid.

Bắt đầu với CSS Grid

Hãy bắt đầu với một ví dụ đơn giản. Giả sử chúng ta đang tạo một bố cục trang web cơ bản với tiêu đề, nội dung chính, cột bên và chân trang.

<div class="container">
<header>Header</header>
<main>Main Content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>

Bây giờ, hãy thêm một chút phép thuật CSS:

.container {
display: grid;
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
gap: 10px;
}

header { grid-area: header; background-color: #ff9999; }
main   { grid-area: main; background-color: #99ff99; }
aside  { grid-area: sidebar; background-color: #9999ff; }
footer { grid-area: footer; background-color: #ffff99; }

Đang xảy ra điều gì ở đây? Chúng ta đang nói với container rằng hiển thị nó như một lưới và định nghĩa bố cục bằng cách sử dụng grid-template-areas. Đó giống như vẽ một bản đồ của trang web của chúng ta!

Thuộc tính grid của CSS

Thuộc tính grid là một cách viết tắt để thiết lập tất cả các thuộc tính lưới rõ ràng một lần. Nó giống như một cây kéo đa năng cho Grid!

Các giá trị có thể

Dưới đây là bảng các giá trị có thể cho thuộc tính grid:

Giá trị	Mô tả
none	Không xác định hành vi lưới
<grid-template>	Xác định kích thước của các cột và hàng của lưới
<grid-template-rows> / <grid-auto-columns>	Đặt các thuộc tính grid-template-rows và grid-auto-columns
<grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns> ] ]	Đặt thuộc tính grid-auto-flow, và tùy chọn đặt các thuộc tính grid-auto-rows và grid-auto-columns

Áp dụng cho

Thuộc tính grid áp dụng cho các phần tử lưới container. Nó giống như nói, "Hey, phần tử này là sếp của một bố cục lưới!"

Cú pháp DOM

object.style.grid = "none|<grid-template-rows> / <grid-columns>|<grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ]|initial|inherit";

Đừng lo lắng nếu điều này trông giống như ngôn ngữ ngoài hành tinh bây giờ. Chúng ta sẽ phân tích nó!

CSS Grid - <grid-template>

Giá trị <grid-template> cho phép bạn xác định cấu trúc của lưới. Nó giống như tạo một bản đồ cho bố cục của bạn.

.container {
grid: 100px 300px / 3fr 1fr;
}

Điều này tạo ra một lưới với hai hàng (cao 100px và 300px) và hai cột (rộng 3fr và 1fr). Đơn vị fr giống như một "phần của không gian khả dụng" - rất hữu ích!

CSS Grid - minmax() và repeat()

Những hàm này giống như đôi bạn đồng hành động lực của Grid:

• minmax() đặt kích thước tối thiểu và tối đa cho một track.
• repeat() cho phép bạn lặp lại các định nghĩa track.

.container {
grid: repeat(3, minmax(100px, auto)) / repeat(3, 1fr);
}

Điều này tạo ra một lưới 3x3 nơi mỗi hàng có ít nhất 100px cao nhưng có thể tăng trưởng, và các cột chia sẻ không gian khả dụng đều nhau.

CSS Grid - Giá trị auto-flow

Giá trị auto-flow xác định cách các mục tự động được đặt vào lưới. Nó giống như quyết định liệu bạn muốn.fill một kệ sách theo chiều ngang hay dọc.

.container {
grid: auto-flow / 200px 1fr;
}

Điều này tạo ra các cột rộng 200px và 1fr, với các hàng được tạo tự động khi cần thiết.

CSS Grid - Giá trị auto-flow dense

Thêm dense vào auto-flow cho biết lưới nên điền vào các lỗ trước trong lưới nếu các mục nhỏ hơn xuất hiện muộn hơn. Nó giống như chơi Tetris hiệu quả!

.container {
grid: auto-flow dense / 200px 1fr;
}

CSS Grid - Cú pháp viết tắt phức tạp

Bạn có thể kết hợp tất cả các khái niệm này thành một tuyên bố mạnh mẽ:

.container {
grid: [auto-flow] 100px / repeat(3, [col-start] 1fr [col-end]);
}

Điều này tạo ra một lưới với các hàng tự động chảy có độ cao 100px, và ba cột có độ rộng bằng nhau với các đường tên.

CSS Grid - Các thuộc tính liên quan

Grid đi kèm với một gia đình các thuộc tính. Dưới đây là một số thuộc tính quan trọng:

Thuộc tính	Mô tả
grid-template-rows	Định nghĩa các hàng của lưới
grid-template-columns	Định nghĩa các cột của lưới
grid-template-areas	Định nghĩa các khu vực mẫu của lưới
grid-auto-rows	Đặt kích thước cho các hàng được tạo tự động
grid-auto-columns	Đặt kích thước cho các cột được tạo tự động
grid-auto-flow	Điều khiển cách thuật toán tự động đặt hoạt động

Nhớ rằng, thực hành làm nên完美! Đừng ngại thử nghiệm với các thuộc tính này. Tôi từng có một học sinh tạo ra một tác phẩm nghệ thuật kỹ thuật số sử dụng Grid - các khả năng là vô tận!

Cuối cùng, CSS Grid là một công cụ mạnh mẽ có thể biến đổi bố cục web của bạn từ tầm thường thành phi thường. Nó có thể看起来 phức tạp ban đầu, nhưng với sự thực hành, bạn sẽ tạo ra các bố cục phức tạp một cách dễ dàng. Chúc các bạn may mắn và mong rằng các lưới của bạn luôn chính xác!

Credits: Image by storyset