Subgrid không phải là một thuộc tính CSS riêng lẻ, mà là một từ khóa được hỗ trợ bởi grid-template-columns và grid-template-rows. Nó được sử dụng trong một layout Grid đã tồn tại ở cấp cao hơn.

Khi nào nên sử dụng subgrid?

Grid layout đảm nhiệm cấu trúc tổng thể, trong khi subgrid xử lý các chi tiết sắp xếp và căn chỉnh bên trong các phần tử con.

Ví dụ: Trong một trang danh sách dự án, mỗi mục có nội dung mô tả với độ dài khác nhau. Dù nội dung dài hay ngắn, chúng ta muốn chiều cao của mỗi hàng luôn đồng nhất. Subgrid giúp đạt được điều này.

.grid-container {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.project-item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0.75rem;
}

.project-item {
    padding: 1rem;
    background: #f5f7fa;
}

.project-item .description {
    background-color: #e3f2fd;
}

.project-item .title {
    background-color: #1976d2;
    color: white;
}

<div class="grid-container">
    <article class="project-item">
        <h3 class="title">Dự án X</h3>
        <p>Trưởng nhóm: Nguyễn Văn A</p>
        <div class="description">Mô tả chi tiết về dự án này</div>
        <footer>5 thành viên • 25 tháng 6</footer>
    </article>
    <article class="project-item">
        <h3 class="title">Dự án Y</h3>
        <p>Trưởng nhóm: Trần Thị B</p>
        <div class="description">Mô tả ngắn</div>
        <footer>3 thành viên • 25 tháng 6</footer>
    </article>
    <article class="project-item">
        <h3 class="title">Dự án Z</h3>
        <p>Trưởng nhóm: Lê Văn C</p>
        <div class="description">Mô tả rất dài về dự án này với nhiều thông tin chi tiết</div>
        <footer>4 thành viên • 25 tháng 6</footer>
    </article>
</div>

caretPositionFromPoint là một tính năng mới được hỗ trợ bởi trình duyệt, cho phép lấy thông tin vị trí của con trỏ tại một điểm cụ thể trên trang. Trước đây, tính năng này được thực hiện bằng phương thức không chuẩn document.caretRangeFromPoint().

Sự khác biệt giữa caretPositionFromPoint() và elementsFromPoint() là: phương thức đầu trả về thông tin chi tiết về nút và độ lệch, trong khi phương thức thứ hai chỉ trả về phần tử.

Ví dụ: Khi có một đoạn văn trong thẻ <p>, nhấp vào một từ bất kỳ, caretPositionFromPoint() sẽ trả về nút văn bản chính xác và giá trị độ lệch ký tự tại vị trí nhấp, trong khi elementsFromPoint() chỉ trả về thẻ <p>.

Cú pháp:

const range = document.caretPositionFromPoint(x, y, options);
// x, y là tọa độ so với góc trên bên trái cửa sổ trình duyệt
// options là tham số tùy chọn, hỗ trợ thuộc tính shadowRoots là một mảng các đối tượng ShadowRoot

Ứng dụng: Khi tạo ảnh bìa video, tiêu đề sách cần được ngắt dòng, có thể sử dụng API này để thực hiện.

<figure>
    <img src="https://example.com/video-cover.jpg">
    <figcaption>Nhấp vào đây để ngắt dòng tiêu đề</figcaption>
</figure>

<button id="reset">Khôi phục</button>

<script>
    const figcaption = document.querySelector('figcaption');
    const resetButton = document.getElementById('reset');

    figcaption.addEventListener('click', function(event) {
        const { clientX, clientY } = event;
        let range;
        let textNode;
        let offset;

        if (document.caretPositionFromPoint) {
            range = document.caretPositionFromPoint(clientX, clientY);
            textNode = range.offsetNode;
            offset = range.offset;
        } else if (document.caretRangeFromPoint) {
            range = document.caretRangeFromPoint(clientX, clientY);
            textNode = range.startContainer;
            offset = range.startOffset;
        } else {
            return;
        }
        
        const newNode = textNode.splitText(offset);
        const breakNode = document.createElement('br');
        figcaption.insertBefore(breakNode, newNode);
    });

    resetButton.addEventListener('click', function() {
        figcaption.innerHTML = figcaption.textContent.replace(/<br>/g, '');
    });
</script>