Ví dụ CSS Grid Bài 1: Tạo Grid đầu tiên

Để các bạn hiểu rõ hơn về CSS Grid, hôm nay tôi thực hiện seri các ví dụ về CSS Grid. Tôi sẽ đưa ra các ví dụ và giải thích các thuộc tính.

Việc của bạn là cố gắng hiểu cách CSS Grid hoạt động. Hãy làm lại nó ít nhất 7 lần với các giá trị (value) khác nhau. Việc này sẽ giúp bạn chuyển từ việc Biết -> Hiểu -> Nhớ -> Làm được -> Kỹ năng.

Tôi luôn mong muốn kiến thức tôi truyền tải sẽ trở thành kỹ năng cho bạn. Vì thế, nếu bạn muốn học tốt lập trình hay là học tốt CSS Grid, hãy làm mỗi ví dụ ít nhất 7 lần, 7 phiên bản.

Bắt đầu tạo CSS Grid đầu tiên.

Nếu bạn chưa hiểu qua về Grid, hãy đọc bài CSS Grid trong 5 phút, sau đó quay lại đây. Chúng ta sẽ bắt đầu:

Tạo đoạn code HTML:

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>

Tạo 6 khối với class là wrapper (bạn có thể sử dụng tên khác), đặt tên class là div để CSS chung cho các div, đặt thêm class khác cho mỗi div nếu bạn muốn css từng div.

Viết CSS cho grid

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

* Tôi cũng đã css cho .box nhưng nó không có gì nhiều để nói

Giải nghĩa thuộc tính của grid:

1. display: grid; - Nói cho trình duyệt biết, đây là khu vực sử dụng CSS Grid.

2. grid-template-columns: 100px 100px 100px; - Tạo 3 cột, mỗi cột có width là 100px.

3. grid-gap: 10px; - Khoảng cách giữa các ô là 10px

Hay bạn có thể viết:

grid-column-gap: 10px;

grid-row-gap: 10px;

4. back-ground-color - màu nền cho cả khung grid (thay giá trị đổi để rõ hơn)

5. color - Màu nội dung (Nếu bạn css color trong class .box thì nó sẽ ưu tiên hiển thị màu đó)

Demo code grid đã tạo trong codpen.

* Lưu ý: Ở đây tôi chưa thiết lập chiều cao cho các khối, nó đang bị ảnh hưởng bởi thuộc tính padding trong đoạn css cho .box

Vậy là bạn đã tạo được grid đầu tiên cho mình. Luôn nhớ rằng, thử 7 phiên bản khác nhau để giúp biến kiến thức về grid thành kỹ năng cho bạn.

Bài tiếp theo: Ví dụ CSS Grid Bài 2: Vị trí dựa trên dòng và cột