CSS Grid Layout và cách sử dụng

Chia cột trong CSS có nhiều cách khác nhau. Bạn có thể sử dụng CSS, Flexbox, Bootstrap vv… Nhưng với những người thiết kế website chuyên nghiệp bạn sẽ phải áp dụng vào những trường hợp khác nhau. Hôm nay mình sẽ hướng dẫn bạn cách dùng CSS Grid để chia bố cục dạng lưới.

Bắt đầu bài tập nhé!

Hướng dẫn về CSS Grid Layout

Đầu tiên bạn cần một đoạn mã HTML

<div class="parent">
   <div class="item"> item-1 </div>
   <div class="item"> item-2 </div>
   <div class="item"> item-3 </div>
   <div class="item"> item-4 </div>
   <div class="item"> item-5 </div>
 </div>

Tiếp theo thêm mã CSS

.parent {
  display: grid;
  grid-template-columns: 250px 250px 250px 250px 250px;
  grid-template-rows: 150px;
}
.item {
    border: 1px solid green;
}

css-grid-layout

Với đoạn mã CSS phía trên bạn một cột có chiều rộng là 250px – Sử dụng grid-template-columns . Và chiều cao là 150px – Sử dụng grid-template-rows.

Tạo khoảng cách giữa các item

grid-gap: 30px;

Hoặc

grid-column-gap: 15px; 
grid-row-gap: 10px;

Viết gọn hơn

grid-gap: 15px 10px;

css-grid-layout-1

Nếu muốn hiển thị 3 item trên một hàng bạn chỉ cần thay xóa bớt đi 2 giá trị trong grid-template-columns

grid-template-columns: 250px 250px 250px;

css-grid-layout-2

Resonsive Grid

Khi xây dựng bố cục bạn cần thiết kế cho co giãn với mọi thiết bị. Bao gồm cả máy tính, desktop hay mobile.

Lúc này bạn sẽ dùng tới fraction unit (fr).

grid-template-columns: 1fr 2fr;

Điều này có nghĩa là class parent được chia thành 3 fractions trong đó cột 1 chiến 1fr và cột 2 chiếm 2fr.

Đang cập nhật thêm…

Bài viết này đã hướng dẫn cho bạn biết cách dùng CSS Grid chia bố cục layout của một trang web nhanh nhất. Nhờ nó bạn sẽ làm cho website đẹp mắt và chuyên nghiệp hơn rất nhiều.

Related Posts

Hover-CSS-1

Hiệu ứng rê chuột trong CSS

CSS là ngôn ngữ trang trí với nhiều hiệu ứng hay. Bạn sẽ thường gặp nhất là khi di chuyển chuột vào một liên kết (Link) hay…

Mẫu Form đăng nhập HTML và CSS đẹp mắt

Trong một số bài viết trên blog này mình đã chia sẻ về cách tạo một Form đăng nhập đơn giản. Nhưng để có một Form đẹp…

form-lien-he-4

Hướng dẫn tạo form liên hệ bằng HTML, CSS

Form liên hệ là một chức năng không thể thiếu cho blog, website. Thông qua Form độc giả, khách hàng có thể yêu cầu admin trợ giúp…

css-code-1

8 Cách viết CSS chuẩn, dễ đọc và tối ưu

Nói tới xây dựng giao diện phía Front-end không thể thiếu CSS. Ngôn ngữ được sử dụng phổ biến để sắp xếp bố cục các phần tử…

Thuộc tính text-shadow trong CSS

Trong những lúc rảnh rỗi mình thường hay nghịch ngợm một vài thứ hay ho tìm thấy trên internet. Đối với CSS thì text-shadow cũng là thuộc…

Thuộc tính Overflow trong CSS

Khi thiết kế web với HTML và CSS đôi khi chúng ta sẽ gặp phải tình trạng văn bản (text) bị tràn ra khỏi phần tử HTML…

Game bài đổi thưởng hữu ích:

Tải Sunwin | Tải Go88 | Hit Club | 789 | Trang Chủ Kubet