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

Ở bài trước chúng ta đã học cách sử dụng span để mở rộng vị trí của các item. Ở bài này chúng ta sẽ sử dụng tên gọi của các dòng.

Trước tiên, hãy chuẩn bị nguyên liệu để thực hành.

Tạo 5 khối div trong 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>

Sử dụng tên cột col <vị trí cột> và tên hàng row <vị trí hàng>

Trong CSS grid:

.wrapper {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: [col1-start] 100px  [col2-start] 100px  [col3-start] 100px [col3-end];
        grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
        background-color: #fff;
        color: #444;
    }

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

    }

Ở trên, để xác định thuộc tính grid-template-columns: và grid-template-rows các bạn có thể sử dụng hàm repeat(<số lần>, <kích thước>):

grid-template-columns: repeat(4, [col] 100px ) ;
grid-template-rows: repeat(3, [row] auto  );

Các bạn chú ý các từ khóa [col1-start], [col3-end], xem hình bên dưới để dễ hiểu hơn.

Chú ý: Chỉ có kết thúc grid mới có đường -end

Viết CSS cho từng khối div:

    .a {
        grid-column: col1-start / col3-start;
        grid-row: row1-start ;
    }
    .b {
        grid-column: col3-start ;
        grid-row: row1-start / row2-end;
    }
    .c {
        grid-column: col1-start;
        grid-row: row2-start ;
    }
    .d {
        grid-column: col2-start ;
        grid-row: row2-start ;
    }

Kết quả sẽ hiển thị như sau:

Bạn cũng có thể sử dụng span để css cho khối div.

Tôi sẽ thêm 1 thẻ div để có thể thể hiện hết các trường hợp sử dụng span phổ biến (hãy code trong codepen)

Viết CSS

Thay thế đoạn CSS bên trên bằng đoạn css sử dụng span. (1 span = kích thước nhỏ nhất của giữa 2 cột, cụ thể ở đây là 100px)

    .a {
        grid-column: col / span 2;
        grid-row: row ;
/*Ở đây trình duyệt sẽ hiểu là bắt đầu từ cột 1, chiều dài kích thước 2 span, chiều cao là 1 span*/
    }
    .b {
        grid-column: col 3 / span 2 ;
        grid-row: row ;
/*Bắt đầu từ cột thứ 3, kéo sang phải 2 span, chiều cao là 1 span*/
    }
    .c {
        grid-column: col ;
        grid-row: row 2 ;
/*Cột số 1 và hàng thứ 2, kích thước 1 span*/
    }
    .d {
        grid-column: col 2 / span 3 ;
        grid-row: row 2 ;
/*Bắt đầu từ cột số 2, kéo sang phải 3 span, chiều cao 1 span và vị trí ở hàng số 2*/
    }

    .e {
        grid-column: col / span 4;
        grid-row: row 3;
/*Bắt đầu từ cột số 1, kéo san phải 4 span, chiều cao 1 span và vị trí ở hàng số 4*/
    }

Kết quả hiển thị như sau, thay đổi trong codepen để hiểu rõ các giá trị hơn.

Note: Hãy làm lại 7 lần, với các phiên bản khác nhau.

Như vậy và bạn đã biết cách sử dụng tên đường trong mở rộng kích thước của item. Chúng ta có thể sử dụng trong nhiều tình huống khác nhau để tạo bố cục phức tạp trong thiết kế layout.

Bài tiếp theo:  Ví dụ CSS Grid Bài 5: Explicit và Implicit Grid