Giới thiệu về CSS Grid Layout Module
Kỹ thuật

Giới thiệu về CSS Grid Layout Module

4 phút đọc Cập nhật: 2022-08-06 10:55:42
avatar Admin JKS

CSS Grid Layout Module là một giải pháp để tạo Layout cho website một cách nhanh chóng và hiệu quả hơn. Đây là một phương pháp mới, nhưng mang lại cho chúng ta rất nhiều tiện ích thú vị. Hãy cùng với JKS tìm hiểu cụ thể hơn qua...

CSS Grid Layout Module là một giải pháp để tạo Layout cho website một cách nhanh chóng và hiệu quả hơn. Đây là một phương pháp mới, nhưng mang lại cho chúng ta rất nhiều tiện ích thú vị. Hãy cùng với JKS tìm hiểu cụ thể hơn qua bài viết sau đây nhé.

Giới thiệu về CSS Grid Layout Module

CSS Grid tạo bố cục thiết kế web hai chiều, đáp ứng dễ dàng trên các trình duyệt.

Trước đây thì có nhiều phương pháp khác để kiểm soát các bố cục trang web, chẳng hạn như tables, float và gần đây hơn là flexbox.

CSS Grid có thể tạo bố cục mạnh và linh hoạt hơn so với các tùy chọn trước đây như CSS floats.

CSS Grid

Bố cục CSS Grid bao gồm một phần tử mẹ, với một hoặc nhiều phần tử con.

Tạo một Grid Container

Để làm một phần tử HTML hoạt động như a grid container, bạn phải đặt the display property to grid.

Xem thêm: 8 bước tạo một trang web gây quỹ MIỄN PHÍ

CSS Grid Properties

  • Grid-template-columns: Chỉ định kích thước của các cột và số lượng cột trong một bố cục lưới.
  • Grid-template-rows: Chỉ định kích thước của các hàng trong bố cục lưới.
  • Gap: Thuộc tính tốc ký cho thuộc tính khoảng cách hàng và khoảng cách cột.
  • Grid-column-start: Chỉ định nơi bắt đầu mục lưới.
  • Grid-column-end : Chỉ định nơi kết thúc mục lưới.
  • Grid-row-start Chỉ định nơi bắt đầu mục lưới.
  • Grid-row-end Chỉ định nơi kết thúc mục lưới.

Dưới đây giải thích về những gì chúng ta đã thực hiện trong CSS trước đó:

  1. Đặt thuộc tính hiển thị thành lưới.
  2. Chia phần tử vùng chứa thành bốn cột, mỗi cột là 1fr (one fraction) không gian trống trong vùng chứa lưới.
  3. Tạo một hàng và đặt chiều cao là 100vh (chiều cao toàn bộ khung nhìn).

Như vậy, Grid Layout Module thêm một giá trị mới vào thuộc tính hiển thị là Grid. Giá trị Grid chịu trách nhiệm thiết lập phần tử .app-layout thành một grid container. Thuộc tính này là bắt buộc để bắt đầu sử dụng Grid Layout.

Thuộc tính lưới-mẫu-cột chỉ định chiều rộng của mỗi cột lưới trong Lưới và trong trường hợp của chúng tôi, nó chia vùng chứa .app-layout thành bốn cột; mỗi cái là 1fr (25%) không gian có sẵn.

grid-template-rows chỉ định chiều cao của mỗi hàng lưới và trong ví dụ của chúng tôi, chúng tôi chỉ tạo một hàng ở 100vh.

Định vị các mục bằng cách sử dụng số dòng

Bạn có thể tham chiếu đến số dòng chính xác trong lưới bằng cách sử dụng grid-column-start and grid-column-end.

Nhìn vào ví dụ trước, đây là cách trình duyệt định vị các phần tử theo mặc định:

Nhìn vào đoạn code trên .tweet column

  1. Định vị phần tử con bắt đầu từ dòng dọc đầu tiên bên trái.
  2. Kết thúc vị trí của phần tử ở đường thẳng đứng thứ hai.
  3. Định vị phần tử bên trong toàn bộ hàng.

Bạn cũng có thể sử dụng span (n) trong đó n chỉ định không. hàng hoặc cột.

 

Ví dụ: Đặt một mục lưới ở dòng cột 1 và để nó kết thúc ở dòng 3:

Ví dụ: Đặt một mục lưới ở dòng hàng 1 và để nó kết thúc ở dòng 3:

Using the following CSS:

 

Demo tại đây: https://codepen.io/apandya/pen/xxYBBEq 

Ví dụ về CSS Grid Layout Module

Here is our HTML:

Sau chúng ta apply some CSS to the app-layout container element:

 

Xem demo tại: https://codepen.io/apandya/pen/JjpzzNy

Như vậy là chúng ta đã cùng nhau tìm hiểu xong về CSS Grid Layout Module. Các bạn hãy áp dụng ngay những thông tin mà JKS vừa giới thiệu để xây dựng trang web của mình tốt hơn nhé. Đừng quên theo dõi những bài viết tiếp theo của chúng tôi.

Đăng ký

Hãy đăng ký để nhận được ưu đãi cũng như các kiến thức mới nhất từ chúng tôi!

notification

Bài viết liên quan

Top 10 Plugin phổ biến cho WordPress bạn cần biết
Kỹ thuật 07/09/2022

Top 10 Plugin phổ biến cho WordPress bạn cần biết

Hiện nay với hơn 59,000+ WordPress plugins, bạn đã tìm kiếm được cho website của mình những plugin phù...

avatar

Admin JKS

2 phút đọc
Hướng dẫn cài đặt và thiết lập Woocommerce để tạo 1 website bán hàng
Kỹ thuật 29/08/2022

Hướng dẫn cài đặt và thiết lập Woocommerce để tạo 1 website bán hàng

Chắc tất cả trong chúng ta đều biết đến Woocommerce rồi nhỉ. WooCommerce là trình tạo cửa hàng trực...

avatar

Admin JKS

2 phút đọc
Giới thiệu về CSS Grid Layout Module
Kỹ thuật 06/08/2022

Giới thiệu về CSS Grid Layout Module

CSS Grid Layout Module là một giải pháp để tạo Layout cho website một cách nhanh chóng và hiệu...

avatar

Admin JKS

2 phút đọc
8 bước tạo một trang web gây quỹ MIỄN PHÍ
Kỹ thuật 29/07/2022

8 bước tạo một trang web gây quỹ MIỄN PHÍ

Để có thể phát triển và khởi tạo một trang web gây quỹ miễn phí tiên tiến và linh...

avatar

Admin JKS

2 phút đọc
"Bỏ túi" 6 cách copy trang web không cho copy
Kỹ thuật 24/05/2022

"Bỏ túi" 6 cách copy trang web không cho copy

Để bảo vệ thông tin trên website của mình không bị “đánh cắp”, nhiều website đã khóa chức năng...

avatar

Admin JKS

2 phút đọc
5 Tiêu chí đánh giá nhân viên bán hàng hiệu quả nhất

5 Tiêu chí đánh giá nhân viên bán hàng hiệu quả nhất

Đánh giá nhân viên bán hàng là yếu tố đặc biệt quan trọng đối với hoạt động kinh doanh...

avatar

Admin JKS

2 phút đọc