Cách viết rút gọn các thuộc tính CSS Grid
Thuộc tính grid đại diện cho
dạng viết rút gọn của tất cả các thuộc tính cột
và hàng của bộ chứa grid. Tất cả
giá trị được viết trên một dòng thông qua dấu gạch chéo.
Thông qua grid, trong một dòng chỉ có thể mô tả
một loại thuộc tính -
thuộc tính tường minh (grid-template-rows,
grid-template-columns,
grid-template-areas)
hoặc không tường minh (grid-auto-rows,
grid-auto-columns,
grid-auto-flow).
Các thuộc tính
không được chỉ định
sẽ nhận giá trị mặc định.
Ví dụ
Hãy tạo một bảng
bằng thuộc tính grid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid: 1fr 1fr 1fr / 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Bây giờ hãy thiết lập cho hàng thứ hai và thứ ba cùng một chiều cao, và cho mỗi cột - một chiều rộng khác nhau:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid: 60px 1fr 60px / 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Bây giờ trong bảng từ ví dụ trước, hãy làm cho hàng trên cùng có chiều cao bằng hai phần (fr), và cột đầu tiên - bằng nửa phần (fr):
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Bài tập thực hành
Thực hiện ví dụ sau:
Thực hiện ví dụ sau:
Thực hiện ví dụ sau: