CSS Grid Là Gì? Hướng Dẫn Cho Newbie Nhập Môn 2023

Nếu bạn tạo một trang web, một phần đáng kể thời gian của bạn sẽ dành cho việc sắp xếp các phần tử riêng lẻ. Bố cục phải trông thú vị nhưng đồng thời, có thể hiểu được thông qua cách trình bày trực quan và được sắp xếp rõ ràng.

Cascading Style Sheets (CSS) cung cấp công cụ để thiết kế trang web theo cách hấp dẫn. Trong khi người ta gắn thẻ nội dung của họ một cách thô sơ bằng HTML , các nhà thiết kế web có xu hướng sử dụng CSS cho các bố cục phức tạp. Công nghệ web không ngừng được phát triển.

Với CSS3, các công nghệ mới đã phát triển đến mức ngôn ngữ đánh dấu cũng có thể được sử dụng cho Internet di động và thiết kế đáp ứng.

CSS Grid Layout được sử dụng để làm gì?

Mobile Internet là một thách thức lớn đối với các nhà thiết kế web. Đó là bởi vì họ không thể biết định dạng hiển thị của trang web do nhiều loại thiết bị di động được thiết kế khác nhau. Vì lý do này, điều quan trọng là các đối tượng riêng lẻ (hộp văn bản, đồ họa, yếu tố tương tác) được phân phối độc lập và rõ ràng – và thực sự được xem xét đặc biệt về các điều kiện không gian cụ thể được chỉ định bởi màn hình.

Trong quá khứ, các nhà thiết kế đã làm với cái gọi là phao nổi. Tuy nhiên, công việc được thực hiện với công nghệ này rất phức tạp và dễ xảy ra lỗi. Bây giờ, có hai phương pháp hợp lệ như nhau để thực hiện một bố cục động : Ngoài CSS Grid, chẳng hạn, bạn cũng có thể sử dụng tốt Flexbox để triển khai một thiết kế thông minh. Tuy nhiên, cả hai công nghệ đều khác biệt nhau ở một số khía cạnh nhất định.

Css Flexbox là một chiều. Về nguyên tắc, các phần tử chỉ di chuyển dọc theo một trục. Bố cục lưới CSS cung cấp cho trình thiết kế web hai kích thước để đặt các đối tượng. Thay vì chỉ một trục, với CSS Grid, bạn có thể sử dụng lưới có các hàng và cột .

CSS Grid: Hướng dẫn với các ví dụ

Bất kỳ ai đã có kinh nghiệm với CSS sẽ không gặp bất kỳ vấn đề nào với Grid. Trong hướng dẫn sau, chúng tôi mô tả các tính năng quan trọng nhất để bắt đầu.

Tạo vật chứa và vật phẩm

CSS Grid quen thuộc với hai đơn vị khác nhau: container und items . Vùng chứa là cấp cao hơn nơi người ta xác định các thuộc tính sau đó được chuyển cho tất cả các mục. Do đó, một mục nằm (được xem theo thứ bậc) trong một vùng chứa. Tuy nhiên, bạn vẫn cần HTML cho bố cục lưới. Trong phần HTML của văn bản nguồn, các đối tượng riêng lẻ (ví dụ: văn bản, đồ họa) được tạo ra sau đó được ghi lại trong CSS Grid và đưa đến vị trí chính xác.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
<div class="grid-item3">3</div>
<div class="grid-item4">4</div>
<div class="grid-item5">5</div>
<div class="grid-item6">6</div>
</div>
</body>
</html>

Do đó, chúng tôi hiện đã tạo ra sáu phần tử, mỗi phần tử được định nghĩa là một “mục lưới” và tất cả chúng được đóng gói vào “khung chứa lưới”. Để hoạt động CSS ngay từ đầu, bạn phải khởi chạy hàm “display: -grid” trong vùng chứa. Cho đến nay, mã chỉ tạo ra sáu con số xuất hiện giữa nhau. Tuy nhiên, khi các mục này đã được tạo, chúng có thể được di chuyển trên màn hình một cách tương đối tự do.

Lưới, cột và hàng

Với CSS Grid, bạn sẽ làm việc với các hàng và cột và theo cách này, tạo ra một lưới . Trong lưới, các đối tượng riêng lẻ có thể được sắp xếp. Lưới này có thể hoặc phải được lựa chọn tự do. Người dùng quyết định phạm vi của các hàng và cột. Với mục đích này, bạn sẽ thêm hai lệnh vào vùng chứa.

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

Với cả hai lệnh này, chúng tôi đã mở một lưới 2×3. Như bạn có thể thấy, kích thước của mọi hàng và cột có thể được điều chỉnh riêng lẻ . Các thông số kỹ thuật đơn giản được nhập liên tiếp (cách nhau bởi dấu cách). Ngoài đặc điểm kỹ thuật pixel chính xác, bạn cũng có thể sử dụng tỷ lệ phần trăm chia sẻ hoặc các loại kích thước khác tùy chỉnh cho CSS. Với thông số kỹ thuật “nội dung tối đa” và “nội dung tối thiểu”, bạn cũng có thể tạo lưới liên quan đến nội dung.

Bạn cũng có thể tạo khoảng trống bằng lệnh “lưới-khoảng cách”.

.grid-container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-gap: 5px;
}

Kết quả là, các ô cách xa nhau với một khoảng cách bằng nhau. Bất kỳ ai không muốn có bất kỳ khoảng cách tiêu chuẩn nào giữa các đơn vị cũng có thể định cấu hình các khoảng trống bằng cách nhập “khoảng cách lưới-cột” và “khoảng cách hàng-lưới”.

Phân số là một tính năng độc đáo. Như trường hợp của thông số kỹ thuật phần trăm, màn hình có thể được tách thành các phần riêng biệt với đơn vị đo lường này. Giả sử chúng ta muốn chia diện tích thành bảy đơn vị theo chiều ngang. Tuy nhiên, một cột riêng biệt cần phải lớn gấp đôi các cột khác. Điều này có thể được thực hiện thông qua mã sau:

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

Không phải tất cả các cột (hoặc hàng) phải có cùng kích thước trong CSS Grid.

Lợi thế của việc làm việc với kích thước tương đối thay vì thông số kỹ thuật tĩnh là như sau: Lưới có thể tự động được điều chỉnh cho phù hợp với kích thước màn hình . Ngay cả khi các cột riêng lẻ phải nhỏ hơn, cột thứ hai vẫn luôn (trong ví dụ của chúng tôi) lớn gấp đôi các cột khác. Nếu bạn muốn đặt vĩnh viễn kích thước của một hàng, tức là không điều chỉnh nó trên màn hình, chỉ cần cung cấp cho dòng này một giá trị tĩnh.

Vị trí của các phần tử

Sau khi bạn đã xác định lưới, bạn có thể đặt các đối tượng khác nhau. Để làm điều này, bạn phải tạo các mục và chỉ định giá trị bắt đầu và kết thúc. Tuy nhiên, không bắt buộc mỗi phần tử chỉ chiếm một ô trong lưới.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: 100px 100px 100px 100px;
grid-template-columns: 100px 100px 100px 100px;
grid-gap: 5px;
}
.grid-item1 {
background: blue;
text-align: center;
border: black 5px solid;
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
}
.grid-item2 {
background: grey;
text-align: center;
border: black 5px solid;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
<div class="grid-item2">3</div>
<div class="grid-item2">4</div>
<div class="grid-item2">5</div>
<div class="grid-item2">6</div>
</div>
</body>
</html>

Bây giờ chúng tôi đã giới thiệu hai loại mục . Trong khi sáu phần tử cuối cùng tự động chỉ có khoảng của một ô, đối tượng đầu tiên trải dài trên bốn cột và hai hàng. (Để rõ ràng hơn, các ví dụ của chúng tôi cũng chứa một bố cục trực quan khác. Tuy nhiên, bạn sẽ không xác định màu, khung và căn giữa văn bản chỉ thông qua CSS Grid.)

Các giá trị bắt đầu và kết thúc của các đối tượng chỉ gián tiếp tham chiếu đến các hàng và cột. Trên thực tế, bạn đang đề cập đến các đường lưới tương ứng . Trong ví dụ, cột thứ tư kết thúc bằng dòng thứ năm. Tuy nhiên, bạn có các tùy chọn khác nhau để chỉ định khoảng cách.

Đánh số : Một liệt kê các dòng từ trái sang phải và từ trên xuống dưới.
Tên : Trong “lưới-mẫu-hàng” và “lưới-mẫu-cột”, người ta có thể gán tên cho các dòng (trong dấu ngoặc vuông) và sau đó tham chiếu đến các ký hiệu này.
Spans : Với “span”, người ta chỉ định số lượng ô mà đối tượng sẽ bao gồm theo hướng tương ứng.

Thay vì xác định điểm bắt đầu và điểm kết thúc tương ứng trong một lệnh riêng biệt, các nhà thiết kế web có thể kết hợp cả hai dưới một lệnh. Đoạn mã sau dẫn đến kết quả tương tự như ví dụ trước.

<style>
.grid-container {
display: grid;
grid-template-rows: 100px [Line1] 100px [Line2] 100px [Line3] 100px [Line4];
grid-template-columns: 100px 100px 100px 100px;
grid-gap: 5px;
}
.grid-item1 {
background: blue;
text-align: center;
border: black 5px solid;
grid-column: 1 / span 4;
grid-row: 1 / Line2;
}
.grid-item2 {
background: grey;
text-align: center;
border: black 5px solid;
}
</style>

Phân bổ các khu vực

Trong CSS Grid, có thể hợp nhất các ô thành các vùng và đặt tên cho chúng. Điều này làm cho việc phân phối các phần tử riêng lẻ trong lưới dễ dàng hơn. Bạn có thể thực hiện thiết lập cho điều này trong vùng chứa. Để làm như vậy, hãy sử dụng lệnh “lưới-mẫu-khu vực” và sau đó viết dòng tên khu vực mong muốn trong các ô. Nếu bạn không muốn chỉ định một ô và do đó để trống lâu dài, chỉ cần chèn một dấu chấm vào đây. Mỗi dòng được đặt trong ngoặc kép với dấu ngoặc kép.

.grid-container {

display: grid;

grid-template-rows: 100px 100px 100px;

grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

grid-gap: 5px;

grid-template-areas:

“area1 area1 area1 area1 area1”

“area2 area2 . area3 area3”

“area2 area2 area4 area4 area4”;

}

Trong ví dụ về CSS Grid này, chúng tôi đã xác định bốn khu vực khác nhau. Một ô vẫn mở. Nếu bây giờ bạn xác định các mục, bạn không cần chỉ định giá trị từ-đến. Nó là đủ để tham khảo khu vực thích hợp.

.grid-item1 {
background: blue;
text-align: center;
border: black 5px solid;
grid-area: area1;
}
.grid-item2 {
background: red;
text-align: center;
border: black 5px solid;
grid-area: area2;
}
.grid-item3 {
background: green;
text-align: center;
border: black 5px solid;
grid-area: area3;
}
.grid-item4 {
background: yellow;
text-align: center;
border: black 5px solid;
grid-area: area4;
}

Bằng cách sử dụng các khu vực để phân bổ các đối tượng, công việc của bạn sẽ trở nên dễ dàng hơn rất nhiều.

Điều chỉnh căn chỉnh

Các phần tử riêng lẻ được căn chỉnh như thế nào trong CSS Grid? Tiêu chuẩn là các phần tử riêng lẻ được mở rộng theo cách mà chúng nằm gọn trong lưới. Đó là lý do tại sao kích thước mục không đóng một vai trò nào đó và do đó, không được chỉ định trong các ví dụ mà chúng tôi đã sử dụng cho đến thời điểm này. Thay vào đó, chúng tôi chỉ định các ô mà đối tượng sẽ được phân phối. Tuy nhiên, bạn có thể gán cho mục này một kích thước cố định và vẫn muốn tích hợp nó vào lưới.

Các nhà thiết kế web có tùy chọn đặt căn chỉnh của tất cả các mục trên toàn cục thông qua vùng chứa hoặc thay vào đó cung cấp cho các đối tượng đã chọn một căn chỉnh cụ thể. Đối với biến thể toàn cầu, các nhà thiết kế sử dụng “justify-items” và “align-items”. Cái trước điều chỉnh căn chỉnh theo chiều ngang, cái sau, cái dọc. Nếu bạn muốn căn chỉnh một mục riêng lẻ, bạn có thể sử dụng lệnh “justify-self” và “align-self”. Tuy nhiên, tất cả các lệnh đều chứa các tùy chọn giống nhau.

căng : Kích thước đối tượng được điều chỉnh cho phù hợp với kích thước của các ô đã chọn.
start : Đối tượng tự căn chỉnh sang trái hoặc lên trên cùng.
end : Đối tượng tự căn chỉnh về phía bên phải hoặc phía dưới cùng.
center : Đối tượng được căn giữa.

.grid-container {
display: grid;
grid-template-rows: 100px 100px 100px 100px;
grid-template-columns: 100px 100px 100px 100px;
grid-gap: 5px;
justify-items: center;
align-items: center;
}
.grid-item1 {
background: grey;
text-align: center;
border: black 5px solid;
width: 50px;
height: 50px;
}
.grid-item2 {
background: blue;
text-align: center;
border: black 5px solid;
width: 50px;
height: 50px;
justify-self: start;
align-self: start;
}

Các nhà thiết kế cũng có thể viết tắt các lệnh bằng cách sử dụng “place-item” hoặc “place-self”. Cả hai loại thông tin (dọc và ngang) chỉ có thể được chứa trong một ô: place-items: <align-items> / justify-items>.

place-items: center / end;

Cũng có thể căn chỉnh các đối tượng trong lưới, mặc dù người ta cũng có thể di chuyển toàn bộ lưới trong vùng chứa . Nếu bạn có xu hướng làm việc với các chỉ báo kích thước tĩnh cho CSS Grid, thì lưới này đôi khi không có cùng kích thước với vùng chứa. Trong trường hợp đó, bạn có thể căn chỉnh lưới bên trong vùng chứa – và do đó trong màn hình – bằng cách sử dụng “justify-content” và “align-content”. Có các tùy chọn căn chỉnh khác nhau:

bắt đầu : căn chỉnh sang trái hoặc lên trên cùng
end : căn chỉnh sang phải hoặc xuống dưới cùng
center : căn chỉnh đến trung tâm
căng : lưới mở rộng
không gian xung quanh : phân bổ không gian bằng nhau xung quanh các ô
space-between : sự phân bố không gian bằng nhau giữa các ô
không gian-đồng đều : phân bố đều không gian xung quanh các ô bao gồm cả lề
.grid-container {
display: grid;
width: 800px;
height: 800px;
background: yellow;
grid-template-rows: 100px 100px 100px 100px;
grid-template-columns: 100px 100px 100px 100px;
grid-gap: 5px;
justify-content: space-evenly;
align-content: center;
}

Đối với trường hợp này, tồn tại một phiên bản viết tắt: place-content: <align-content> / <justify-content>.

place-content: center / space-evenly;

Tự động phù hợp cho các thiết kế đáp ứng

Một lợi thế quan trọng của CSS Grid là tính linh hoạt của lưới. Bạn có thể thiết lập CSS Grid theo cách mà nó tự động điều chỉnh. Điều này giúp cải thiện hiển thị trên các thiết bị khác nhau: các hệ thống tự động cũng giúp làm việc với CSS dễ dàng hơn.

Một hàm hữu ích được gọi là “repeat ()”. Thay vì mỗi hàng hoặc cột được xác định riêng lẻ, bạn có thể tạo thông số kích thước và xác định tần suất lặp lại công thức này . Điều đó thậm chí còn dễ thực hiện hơn khi kết hợp với các tùy chọn “tự động điền” và “tự động điều chỉnh”. Khi làm như vậy, bạn để CSS Grid đảm nhận việc tạo hàng và cột. Với tùy chọn đầu tiên, CSS Grid sẽ chèn nhiều ô nhất có thể mà không đẩy các đường viền của vùng chứa. Tuy nhiên, điều này có thể dẫn đến không gian vẫn chưa được sử dụng. Ngược lại, tùy chọn “tự động điều chỉnh” điều chỉnh kích thước của các ô riêng lẻ theo cách mà không gian được sử dụng đến tận lề.

.grid-container {
display: grid;
width: 800px;
height: 800px;
grid-template-rows: repeat(auto-fit, 100px);
grid-template-columns: repeat(auto-fit, 100px);
grid-gap: 5px;
}

Cả hai chức năng “lưới-tự động-cột” và “lưới-tự động-hàng” cũng rất hữu ích. Với cả hai lệnh này, người ta có nhiều quyền tự do hơn khi tạo các mục . Ví dụ: nếu một lưới phải có kích thước 4 x 4 ô và một lưới để tạo một mục chỉ bắt đầu ở cột thứ năm, điều đó sẽ dẫn đến vấn đề. Thông qua việc tự động tạo đủ hàng và cột, bạn có thể ngăn chặn những vấn đề như vậy.

.grid-container {
display: grid;
grid-auto-rows: 100px;
grid-auto-columns: 100px;
grid-gap: 5px;
}

Ngay cả khi kích thước của lưới và các đối tượng được cho là điều chỉnh để hiển thị, các nhà thiết kế web muốn nhập các giá trị tối thiểu và tối đa . Với lệnh “minmax ()”, bạn có thể chắc chắn rằng một mục sẽ không quá nhỏ hoặc quá lớn. Để đạt được điều này, trước tiên bạn có thể nhập giá trị nhỏ nhất trong dấu ngoặc, tiếp theo là giá trị lớn nhất.

.grid-container {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-auto-columns: minmax(50px, 150px);
grid-gap: 5px;
}

Nếu bây giờ bạn kết hợp một số chức năng mà chúng tôi đã giới thiệu với nhau, bạn có thể dễ dàng tạo một thiết kế đáp ứng .

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 5px;
justify-items: center;
align-items: center;
}
.grid-item1 {
background: grey;
text-align: center;
border: black 5px solid;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item1">2</div>
<div class="grid-item1">3</div>
<div class="grid-item1">4</div>
<div class="grid-item1">5</div>
<div class="grid-item1">6</div>
<div class="grid-item1">7</div>
<div class="grid-item1">8</div>
<div class="grid-item1">9</div>
<div class="grid-item1">10</div>
</div>
</body>
</html>

Kết Luận

CSS Grid mang đến cho các nhà thiết kế web cơ hội tạo các bố cục hấp dẫn mà không tốn nhiều công sức. Nhờ lưới, bạn luôn có quyền kiểm soát vị trí của các đối tượng – ngay cả khi đó là một thiết kế đáp ứng.

Nguồn:

https://www.ionos.com/digitalguide/websites/website-creation/css-grid/

Nếu bạn đọc nào copy hoặc tham khảo bài viết từ https://thietkewebcantho89.com/, vui lòng để nguồn https://thietkewebcantho89.com/css-grid-la-gi

Xin cảm ơn!