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

Ở bài trước chúng ta đã tìm hiểu các xác định vị trí dựa trên dòng và cột. Hôm nay tôi tiếp tục hướng dẫn các bạn mở rộng vị trí nhưng với từ khóa span.

(Chúng ta sẽ chia nhỏ các khái niệm qua từng bài để bạn có thể tập trung hơn và hiểu rõ hơn)

Tạo Grid trước khi bắt đầu mở rộng vị trí bằng CSS

Chúng ta vẫn có 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>

CSS cho các khối div:

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

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

    }

Xác định vị trí bằng từ khóa span

Lưu ý: Khi dùng từ khóa span thì grid-colum là kéo dài nhịp từ trái qua phải. grid-row là kéo dài nhịp từ trên xuống dưới.

Kích thước của span là khoảng cách giữa 2 trục ngăn (2 cột hoặc 2 hàng)

    .a {
        grid-column: 1 / span 2;
/*Bắt đầu từ cột 1 kéo qua trái 2 nhịp (kết thúc ở cột thứ 3)*/
    }
    .b {
        grid-column: 3 ;
        grid-row: 1 / span 2;
/*Bắt đầu ở cột thứ 3, từ hàng 1 kéo xuống 2 nhịp (kết thúc ở hàng thứ 3)*/
    }
    .c {
        grid-column: 1 ;
        grid-row: 2 ;
    }
    .d {
        grid-column: 2 ;
        grid-row: 2 ;
    }

Thay vì sử dụng các dòng và cột, chúng ta sử dụng từ khóa span. Đây là một cách nữa để mở rộng vị trí của các item. Hãy thay đổi các giá trị để hiểu rõ hơn.

Demo code trong codepen

Note: Hãy làm lại 7 lần, với các phiên bản khác nhau trước khi chuyển sang bài tiếp theo.

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