Thuộc tính grid-template-rows
Thuộc tính grid-template-rows xác định
số lượng và chiều cao của các hàng mà
phần tử sẽ chiếm trong grid hoặc lưới.
Trong giá trị của thuộc tính, chúng ta chỉ định chiều cao của các hàng
bằng bất kỳ đơn vị
cho kích thước nào.
Thuộc tính được chỉ định trong phần tử cha
và xác định chiều cao của các hàng cho các phần tử con.
Khi chỉ định giá trị bằng pixel trong thuộc tính,
kích thước của các hàng sẽ chính xác theo đó.
Nếu chúng ta đặt từ auto, thì các hàng sẽ
lấp đầy tất cả không gian có sẵn. Việc sử dụng
đơn vị fr (fraction - phần) có nghĩa là
tất cả không gian sẽ được chia
thành các phần bằng nhau. Ưu điểm của
fr là khả năng thích ứng của nó với
các vùng chứa khác nhau hoặc độ phân giải màn hình,
vì fr chỉ đơn giản chia chúng thành số lượng
phần được chỉ định mà không gắn với kích thước chính xác bằng pixel.
Cú pháp
bộ chọn {
grid-template-rows: chiều cao hàng;
}
Ví dụ
Hãy đặt chiều cao cho các hàng của các phần tử trong grid của chúng ta:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50px 100px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Hãy đặt cho hàng đầu tiên và hàng thứ ba một chiều cao cố định bằng pixel, còn hàng thứ hai sẽ tự động lấp đầy không gian có sẵn:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Và bây giờ hãy sử dụng thuộc tính
grid-template-rows
để làm sao cho hàng đầu tiên và hàng thứ hai
chiếm một phần của vùng chứa,
còn hàng thứ ba - ba phần:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Các giá trị được chỉ định bằng đơn vị fr
có thể có dạng phân số. Hãy
thay đổi ví dụ trước, chỉ định
cho hàng thứ hai và hàng thứ ba chiều cao
bằng số thập phân:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Hãy trong thuộc tính grid-template-rows
chỉ định hàm repeat(),
hàm này sẽ thông báo cho vùng chứa rằng tất cả
ba hàng phải có cùng chiều cao:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Và bây giờ hãy thay đổi ví dụ trước sao cho thêm vào ba hàng giống nhau một hàng thứ tư, hàng này sẽ chiếm hai phần của vùng chứa:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Hãy đặt cho hai hàng đầu tiên chiều cao bằng một phần của vùng chứa, còn cho hai hàng cuối cùng - bằng hai phần:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Và bây giờ hãy đặt chiều cao cho các hàng
bằng cách kết hợp các giá trị, được chỉ định bằng
hàm repeat() và các đơn vị tự do fr:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Cũng có thể trong hàm repeat() chỉ định
giá trị auto-fill, giá trị này sẽ lấp đầy
vùng chứa của chúng ta bằng các hàng giống nhau với chiều cao chúng ta cần:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Rất tiện lợi khi cùng với auto-fill
chỉ định hàm minmax,
hàm này đặt phạm vi chiều cao của các hàng
từ giá trị tối thiểu đến giá trị tối đa.
Nếu chiều rộng của vùng chứa không chứa được tất cả
các hàng, thì một số trong số chúng sẽ di chuyển
xuống hàng mới, trong khi các hàng trong một hàng
sẽ được phân bố đều trong đó. Hãy thay đổi
ví dụ trước, chỉ định trong đó hàm minmax:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Bây giờ hãy chỉ định thuộc tính auto-fit,
điểm khác biệt của nó so với auto-fill là
nó điều chỉnh số lượng hàng cho phù hợp với
chiều rộng có sẵn của vùng chứa, bằng cách mở rộng hoặc
thu nhỏ chúng:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Cũng có thể cùng với fr
sử dụng các giá trị bằng %, chúng cũng xác định
phần nào của vùng chứa mà hàng sẽ chiếm.
Trong trường hợp này, đầu tiên kích thước của
hàng sẽ được tính bằng %, còn không gian trống còn lại
sẽ được chia thành các phần:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Hãy sử dụng cùng lúc các thuộc tính
grid-template-columns và
grid-template-rows:
<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-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Hãy sử dụng các thuộc tính
grid-template-columns và
grid-template-rows
tạo một bảng gồm chín ô, được sắp xếp
thành ba hàng. Hơn nữa, hàng thứ hai và hàng thứ ba sẽ có cùng chiều cao,
còn mỗi cột - có 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-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Và 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, còn cột đầu tiên - bằng nửa phần:
<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-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Xem thêm
-
thuộc tính
grid-template-columns,
xác định số lượng và chiều rộng của các cột trong grid -
thuộc tính
grid-auto-rows,
xác định số lượng và chiều cao của các hàng trong grid ngầm định
