Giới thiệu căn bản về CSS Grid

thuyet951
  • Lượt xem 85
  • Bình luận: 0
css-grid.png

Trong giới thiết kế web, thì việc chia cột, chia hàng cho trang web mình thiết kế là công việc hầu như ai cũng phải nắm rõ và vận dụng nó 1 cách triệt để nhất để cho việc chỉnh sửa và bảo trì đơn giản nhất có thể.
Nếu trước đây để xây dụng một layout dạng lưới (grid) thì các lập trình viên thường sử dụng một trong các cách sau:
  • Dùng table hoặc float layout. Hai cách này giúp giải quyết ổn thỏa vấn đề, nhưng khi viết code có đôi chút không tự nhiên, dẫn đến khó bảo trì mã nguồn.
  • Dùng flexbox. Hạn chế của cách này là thiết kế cho lưới một chiều (chỉ có một dòng duy nhất).
May mắn thay, cuối cùng thì CSS Grid đã xuất hiện - là một giải pháp mạnh mẽ, giúp việc xây dựng grid trở nên dễ dàng hơn bao giờ hết. CSS Grid cũng được hỗ trợ bởi hầu hết các trình duyệt phổ biến hiện nay, như Apple Safari, Google Chrome, Mozilla Firefox hay Microsoft Edge.

Trong bài viết này, mình sẽ cùng anh em tìm hiểu căn bản nhất về khái niệm cũng như cách vận hành của một CSS Grid, bây giờ chúng ta cùng bắt đầu thôi "CODE ON".

Cấu tạo css grid


Cấu tạo của một css grid sẽ bao gồm một phần tử mẹ (grid container), với một hoặc nhiều phần tử con (grid item).
Vậy để triển khai một css grid chúng ta sẽ có cấu tạo phần tử như sau:
HTML:
<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>

Các thuật ngữ thường dùng trong css grid


Grid Columns


Các đường thẳng đứng của các mục lưới được gọi là Grid Columns.
grid_columns.png


Grid Rows


Các đường ngang của các mục lưới được gọi là Grid Rows.
grid_rows.png


Grid Gaps


Khoảng trống giữa mỗi cột hoặc mỗi hàng được gọi là Grid Gaps.
grid_gaps.png


Grid Lines


Các dòng giữa các cột được gọi là column lines.
Các dòng giữa các hàng được gọi là row lines.
grid_lines.png


Trên đây là một số khái niệm căn bản về css grid, nhìn chung việc sử dụng css grid để tạo layout dạng lưới hoặc dàn trang cho website là một lựa chọn tối ưu nhất và đơn giản nhất mà các lập trình viên thường lựa chọn để sử dụng, trong các bài viết tiếp theo mình và các bạn sẽ cùng tìm hiểu tiếp toàn bộ các thuộc tính được sử dụng trong css grid.
 
Vấn thân vào đam mê, không bao giờ từ bỏ...
─ Đam mê bằng đánh đổi
Top Bottom