Trong các bài trước, bạn đã tìm hiểu cách tạo bố cục cho Grid và điều chỉnh vị trí của Grid và Grid Items. Trong bài này, bạn sẽ tìm hiểu thêm về các thuộc tính dùng riêng cho Grid Items. Các thuộc tính này có thể dùng để gộp các ô trong Grid lại với nhau, hoặc tự điều chỉnh vị trí của mình trong Grid.

Gộp ô trong Grid

Trước khi bắt đầu với các thuộc tính dùng để gộp các ô lại với nhau, ta cần làm quen với một số khai niệm khác của CSS Grid.

Gộp ô theo hàng ngang với grid-column: start/end

grid-column là thuộc tính dùng để gộp các ô lại với nhau theo hàng ngang. Giá trị cho thuộc tính này có dạng start/end, trong đó start là đường dọc bắt đầu, và end là đường dọc mà ô này sẽ kéo dài đến. Ví dụ:

  • grid-column: 1/10
  • Giá trị start là 1, giá trị end là 10
  • Thuộc tính trên có thể hiểu là ô sẽ kéo dài từ đường dọc số 1 đến đường dọc số 10, trải qua 9 ô của Grid.

grid-column là các viết tắt của hai property grid-column-start và grid-column-end. grid-column: 1/10 tương đương với:

  • grid-column-start: 1;
  • grid-column-end: 10;

Dùng thử thuộc tính grid-column, ta điều chỉnh CSS cho .container:

.container {
  display: grid;
  height: 100vh;

  grid-template-rows: repeat(12, 1fr);
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}

Grid của ta sẽ được chia thành 12 cột và 12 hàng với kích thước mỗi hàng và cột bằng nhau. Như vậy, Grid sẽ có 13 đường dọc và 13 đường ngang. Ta có file HTML từ các bài trước với 4 Grid Items:

<div class="container">
  <div class="item-1"> Item A </div>
  <div class="item-2"> Item B </div>
  <div class="item-3"> Item C </div>
  <div class="item-4"> Item D </div>
</div>

Tạo CSS cho .item-1 như sau:

.item-1 {
  grid-column: 1/10
}

Kết quả

Phần tử Item A kéo dài từ đường dọc số 1, đến đường dọc số 10, trải dài trên 9 ô trong Grid. Ngoài cách dùng như trên, ta có thể dùng từ khoá span để xác định số lượng cột và phần tử trải trên:

.item-1 {
/*   grid-column: 1/10; tương đương với */

  grid-column: span 9;
/* span 9 có nghĩa là kéo dài trên 9 ô trong grid */
}

Gộp ô theo hàng dọc với grid-row: start/end

Với cách dùng tương tự grid-column, `grid-row` được dùng để gộp các ô lại với nhau theo hàng dọc. Giá trị cho thuộc tính này có dạng start/end, trong đó start là đường ngang bắt đầu, và end là đường ngang mà ô này sẽ kéo dài đến. Ví dụ:

  • grid-row: 1/10
  • Giá trị start là 1, giá trị end là 10
  • Thuộc tính trên có thể hiểu là ô sẽ kéo dài từ đường ngang số 1 đến đường ngang số 10, trải qua 9 ô (theo hàng dọc) của Grid.

grid-row cũng là các viết tắt của hai property grid-row-start và grid-row-end. grid-row: 1/10 tương đương với:

  • grid-row-start: 1;
  • grid-row-end: 10;

Dùng thử thuộc tính grid-row, ta điều chỉnh CSS:

.item-1 {
  grid-row: 1/10
}

Ta có kết quả như sau:

Phần tử Item A kéo dài từ đường ngang số 1, đến đường ngang số 10, trải dài trên 9 ô trong Grid. Ngoài cách dùng như trên, ta cũng có thể dùng từ khoá span:

.item-1 {
/*   grid-row: 1/10; tương đương với */

  grid-row: span 9;
/* span 9 có nghĩa là kéo dài trên 9 ô trong grid */
}

Thuộc tính grid-area

Ngoài grid-column và grid-row, bạn còn có thể thực hiện việc gộp ô, và nhiều sự điều chỉnh khác với thuộc tính grid-area. Để dùng được thuộc tính này cho Grid Item, bạn cần phải đặt thuộc tính grid-template-areas cho Grid Container. Từ bài trước, ta đã làm quen với grid-template-areas.

Thiết lập grid-template-areas cho Grid Container:

.container {
  display: grid;
  gap: 20px;
  height: 300px;

  grid-template-areas: 
    "A A A A   A A A A   A A A A"
    "B B B B   B B B B   B B C C"
    "B B B B   B B B B   B B C C";
}

Điều chỉnh HTML, chỉ sử dụng 3 phần tử:

<div class="container">
  <div class="item-1"> Item A </div>
  <div class="item-2"> Item B </div>
  <div class="item-3"> Item C </div>
</div>

Dùng grid-area cho các phần tử:

.item-1 {
  grid-area: A
}

.item-2 {
  grid-area: B
}

.item-3 {
  grid-area: C
}

Ta có kết quả như sau:

justify-self

Ta có thể thay đổi vị trí của từng Grid Item với thuộc tính justify-self và align-self. Hai thuộc tính này sẽ chỉ điều chỉnh vị trí của Grid item được áp dụng. Không giống với các thuộc tính tương tự của Grid Container – thay đổi vị trí của toàn bộ Grid và Grid Items.

justify-self sẽ điều chỉnh vị trí của Grid Item theo trục ngang (Main Axis). Có 4 giá trị cho justify-self:

Dùng thử justify-self, điều chỉnh file CSS cho .container như sau:

.container {
  display: grid;
  gap: 20px;
  height: 300px;

  grid-template-columns: repeat(3, 1fr);
}

Thiết lập justify-self cho Grid Item. Lưu ý: đây là thuộc tính dùng cho Grid Item, trong dự án nhỏ của bạn, bạn cần phải dùng cho phần tử .item-*:

.item-1 {
  justify-self: start
}

align-self

align-self sẽ điều chỉnh vị trí của Grid Item theo trục dọc (Cross Axis). Có 4 giá trị cho align-self:

Dùng thử align-self, điều chỉnh file CSS như sau:

.item-1 {
  align-self: start
}

Tạm kết

Hoàn thành bài học này, bạn đã có đủ kiến thức về CSS Grid để có thể xây dựng bố cục Grid cho trang web của bạn rồi. Hãy dành một ít thời gian để thực hành với CSS Grid nào. Nếu bạn vẫn muốn tiếp tục học với CSS Grid, bài tiếp theo sẽ giới thiệu một vài thuộc tính viết tắt của CSS Grid.