Tìm hiểu về CSS Grid Layout – Phần 1

Tram Ho

Giới thiệu

Hello mọi người, chào mừng đến với channel của mình =))

Mình tự hứa với bản thân là phải tìm hiểu CSS Grid đã lâu nhưng hôm nay mới có dịp để cùng tìm hiểu và đồng thời muốn sharing về CSS Grid Layout, một hệ thống layout khá mạnh mẽ và được sử dụng hiện nay.

CSS Grid layout là một hệ thống cung cấp các bố cục dạng lưới hai chiều, đặc biệt không dùng đến float và position và nhằm mục đích mang lại các thay đổi mới mẻ cho việc thiết kế bố cục giao diện người dùng.

Các trình duyệt hiện nay hầu hết đều hổ trợ CSS Grid Layout, bạn có thể xem thêm hình ảnh bên dưới
hoặc ở link này (https://caniuse.com/#feat=css-grid)

OK, cùng bắt đầu thôi (len)

Các thuật ngữ quan trọng

Tại sao lại có mục này, vì chúng ta cần hiểu rõ về các khái niệm trong grid layout để đỡ nhầm lẫn và hiểu được chúng được áp dụng như thế nào cho việc thiết kế các layout

Grid Container

Đây là element cha quyết định các element con có hiển thị theo grid layout hay không
Vd:

Grid item

Hiểu đơn giản grid item là các phần tử con mà nó được tuân theo grid layout

Grid Line

Line là gì, line là đường kẻ, dòng kẻ, thế thôi 😄 => Grid Line là các đường kẻ ngang hoặc dọc giữa các phần tử con,
đường kẻ vàng bên dưới là một grid line

Grid Cell

Cell là gì, cell là ô 😄, Grid Cell là khoảng cách giữa hai line ngang và hai line dưới liền kề, mình hiểu là ntn, hình minh họa bên dưới sẽ dễ hiểu hơn =))

Grid Track

Track là gì, mấy bro tự transalte đi 😄, còn Grid Track là khoảng cách giữa 2 line ngang liền kề hoặc 2 line dọc liền kề

Grid Area

Area là gì, là khu vực, các mục có thể kéo dài một ô hoặc nhiều ô theo chiều hàng hoặc theo cột để tạo thành một Grid Area

Thực hành thôi

display grid

2 value grid và inline-grid cũng khá giống với việc set các phần tử con là tag <div> hoặc <span>

grid-template-columns và grid-template-rows

Dùng để xác định các rows và colums

Kết quả:

Nếu muốn định nghĩa các row hoặc column lặp lại có cùng khoản cách thì có thể sử dụng repeat()
Rất hữu ích khi muốn các element có không gian bằng nhau. Vd:

Kết quả

grid-template-areas

Xác định các vùng lưới theo tên của các mẫu lưới được xác định = grid-area: “area-name”;
Vd:

Kết quả:

grid-template

1 shorthand để thiết lập grid-template-rows, grid-template-columns, và grid-template-areas trong 1 lần khai báo

Syntax:

column-gap, row-gap

Xác định độ dày của các line, khá giống padding khi chia layout đúng k ạ =))
Ví dụ:

Kết quả:

gap

1 shorthand hữu ích để set cho column-gap và row-gap

Ví dụ và kết quả như trên

Tổng kết

Trên đây là bài tìm hiểu phần đầu của mình về CSS Grid Layout, còn rất nhiều các properties khác mình để tìm hiểu dần cho phần 2, hi vọng sẽ giúp ích cho mình và cả mọi người và nhớ đăng ký kênh của mình nha =))

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo