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

Bài trước chúng ta đã tìm hiểu về cách tạo một Grid, hôm nay chúng ta sẽ tìm hiểu về cách xác định vị trí trong grid dựa trên Line-based (xác định vị trí dựa trên dòng).

Đây chính là điểm hấp dẫn của CSS Grid, bạn không cần sắp xếp trước vị trí các khối trong HTML mà lại có thể dễ dàng thay đổi trong CSS. Điều mà trước đây rất phức tạp.

Hãy để HTML làm công việc mà nó được sinh ra: Đánh dấu siêu văn bản.

Làm đẹp là việc của CSS.

Sắp xếp vị trí grid-item dựa trên dòng

Sử dụng lại đoạn code HTML trước:

<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 class a, b, c, d, e, f để lát nữa chúng ta xác định vị trí đặt của chúng.

Viết CSS cho khu vực sử dụng grid:

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

CSS chung cho các khối div:

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

CSS vị trí các khối div như sau:

 .a {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }
    .b {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    .c {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    .d {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }
    .e {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
    }
    .f {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
    }

Để các bạn hiểu rõ hơn cách đếm thứ tự dòng và cột, hãy xem ảnh dưới đây:

Bạn cũng có thể CSS tắt như sau:

   .a {
        grid-colum: 2 / 3;
        grid-row: 1 / 2;
    }
    .b {
        grid-column: 2 / 3;
        grid-row: 2 / 3;

    }
    .c {
        grid-column: 3 /4;
        grid-row: 2 / 3;
    }
    .d {
        grid-column: 1 / 2;
        grid-row: 1 / 2;

    }
    .e {
        grid-column: 1 /2;
        grid-row: 2 / 3;

    }

    .f {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }

Để hiển thị 1 khối div trên 1 dòng, thì bạn chỉ cần bỏ đi thuộc tính -end.

Cách xác định vị trí dựa trên thuộc tính grid-area

Thuộc tính grid-area được định nghĩa như sau: grid-area: row start / colum start / row end/ colum end;

    .a {
        grid-area: 1 / 2 / 2 / 3;
    }
    .b {
        grid-area: 2 / 2 / 3 / 3;
    }
    .c {
        grid-area: 2 / 3 / 3 / 4;
    }
    .d {
        grid-area: 1 / 1 / 2 / 2;
    }
    .e {
        grid-area: 2 / 1 / 3 / 2;
    }
    .f {
        grid-area: 1 / 3 / 2 / 4;
    }

Thật đơn giản phải không nào?

Demo các xác định vị trí dựa trên dòng và cột trong codepen:

Vậy là bạn đã biết cách xác định vị trí các item trong CSS Grid thông qua dòng và cột.

Hãy thử đổi vị trí các item 7 lần trước khi chuyển sang bài tiếp theo.

Tôi luôn mong muốn cái bạn nhận được là kỹ năng lập trình. Nếu bạn chỉ dùng lại ở mức hiểu, nó sẽ nhanh chóng quên trong vòng vài tiếng nếu không thực hành (mà lập trình quan trọng là thực hành đủ nhiều, 7 lần sẽ khiến bạn thành thạo, 7x3=21 lần sẽ trở thành thói quen). Hãy ghi nhớ kỹ điều này.

Bài tiếp theo: Ví dụ CSS Grid Bài 3: Vị trí mở rộng với từ khóa span