Thuộc tính grid-template trong CSS dùng để chỉ định kích thước cho hàng và cột hoặc chỉ định bố cục vị trí cho các phần tử HTML, chi tiết như nào hãy cùng chúng tôi phân tích:

Thuộc tính grid-template trong CSS

Chức năng của Thuộc tính grid-template trong CSS

Thuộc tính grid-template trong CSS dùng để chỉ định kích thước cho hàng và cột hoặc chỉ định bố cục vị trí cho các phần tử HTML.

Code Thuộc tính grid-template trong CSS

Thuộc tính grid-template chỉ định kích thước trong CSS

grid-template: grid-template-rows / grid-template-columns

grid-template-rows: dùng để quy định chiều cao của từng hàng theo đơn vị px, %, auto và có thể lặp lại những hàng đã quy định chiều cao cho các hàng phía sau, thuộc tính này kết hợp với giá trị grid của thuộc tính display.

grid-template-columns: dùng để quy định cách hiển thị của các ô trên các cột và cách lặp của các cột, thuộc tính này sử dụng kèm với giá trị grid của thuộc tính display.

grid-template: 150px / auto auto auto; Hàng 1 chiều cao 150px, Chiều rộng 3 cột là auto

grid-template: 150px 140px / auto auto auto; Hàng 1 chiều cao 150px, Hàng 2 chiều cao 140px, Chiều rộng 3 cột là auto

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template chỉ định kích thước trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{background:red; width:100%; height:auto; margin-bottom:10px; display: grid; grid-gap: 10px; padding: 10px;}
.divcha div {background:green; color:#fff; text-align: center; padding: 20px 0; font-size: 15px;}
</style>
</head>
<body>

<h1>Thuộc tính grid-template chỉ định kích thước trong CSS</h1>
<p>grid-template: grid-template-rows / grid-template-columns</p>

<h4>Hàng 1 chiều cao 150px, Chiều rộng 3 cột là auto</h4>
<div class="divcha" style="grid-template: 150px / auto auto auto;">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

<h4>Hàng 1 chiều cao auto, Chiều rộng 3 cột là auto</h4>
<div class="divcha" style="grid-template: auto / auto auto auto;">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

<h4>Hàng 1 chiều cao 150px, Hàng 2 chiều cao 140px, Chiều rộng 3 cột là auto</h4>
<div class="divcha" style="grid-template: 150px 140px / auto auto auto;">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

</body>
</html>

Chạy Thử

Thuộc tính grid-template chỉ định bố cục trong CSS

Quy định phần tử được chỉ định chiếm bao nhiêu ô của từng hàng và sau phần tử được chỉ định có bao nhiêu cột hoặc trước phần tử được chỉ định có bao nhiêu cột:

grid-template: 'myArea myArea myArea . .'; Phần tử được quy định sẽ chiếm 3 ô đầu tiên, các phần tử còn lại chạy bình thường, 2 dấu chấm tức là sau phần tử được chỉ định sẽ có thêm 2 cột (mỗi dấu chấm cách nhau khoảng trống)

grid-template: '. . .' '. myArea myArea'; Phần tử được quy định sẽ chiếm 2 (2,3) của hàng thứ 2, các phần tử còn lại chạy bình thường

Bạn có thể tham khảo thêm bài viết grid-template-areas

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template chỉ định bố cục trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{background:red; width:100%; height:auto; margin-bottom:10px; display: grid; grid-gap: 10px; padding: 10px;}
.divcha div {background:green; color:#fff; text-align: center; padding: 20px 0; font-size: 25px;}
</style>
</head>
<body>

<h1>Thuộc tính grid-template chỉ định bố cục trong CSS</h1>
<p>Quy định phần tử được chỉ định chiếm bao nhiêu ô của từng hàng và sau phần tử được chỉ định có bao nhiêu cột hoặc trước phần tử được chỉ định có bao nhiêu cột:</p>

<h4>grid-template: 'myArea myArea myArea . .'; Phần tử được quy định sẽ chiếm 3 ô đầu tiên, các phần tử còn lại chạy bình thường, 2 dấu chấm tức là sau phần tử được chỉ định sẽ có thêm 2 cột (mỗi dấu chấm cách nhau khoảng trống)</h4>
<div class="divcha" style="grid-template: 'myArea myArea myArea . .';">
	<div style="grid-area: myArea;">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

<h4>grid-template: 'myArea myArea myArea . . .'; Phần tử được quy định sẽ chiếm 3 ô đầu tiên, các phần tử còn lại chạy bình thường, 3 dấu chấm tức là sau phần tử được chỉ định sẽ có thêm 3 cột (mỗi dấu chấm cách nhau khoảng trống)</h4>
<div class="divcha" style="grid-template: 'myArea myArea myArea . . .';">
	<div style="grid-area: myArea;">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

<h4>grid-template: 'myArea myArea myArea . . .' 'myArea myArea myArea . . .'; Phần tử được quy định sẽ chiếm 3 ô đầu tiên của hàng 1 và 3 ô đầu tiên của hàng 2, các phần tử còn lại chạy bình thường, 3 dấu chấm tức là sau phần tử được chỉ định sẽ có thêm 3 cột (mỗi dấu chấm cách nhau khoảng trống)</h4>
<div class="divcha" style="grid-template: 'myArea myArea myArea . . .' 'myArea myArea myArea . . .';">
    <div style="grid-area: myArea;">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

<h4>grid-template: '. . .' '. myArea myArea'; Phần tử được quy định sẽ chiếm 2 (2,3) của hàng thứ 2, các phần tử còn lại chạy bình thường</h4>
<div class="divcha" style="grid-template: '. . .' '. myArea myArea';">
    <div style="grid-area: myArea;">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

</body>
</html>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính grid-template trong CSS.

5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website

Chia sẻ nội dung đánh giá của bạn về Thuộc tính grid-template trong CSS
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn