Thuộc tính grid-template-columns
Thuộc tính grid-template-columns xác định
số lượng và chiều rộng của các cột mà
một phần tử sẽ chiếm trong grid hoặc lưới.
Thuộc tính được chỉ định trong phần tử cha
và xác định chiều rộng của các cột cho các phần tử con.
Trong giá trị của thuộc tính, chúng ta chỉ định chiều rộng cột
bằng bất kỳ đơn vị
kích thước nào.
Khi chỉ định giá trị bằng pixel trong thuộc tính,
kích thước cột sẽ chính xác tương ứng.
Nếu chúng ta đặt từ auto, các cột 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-columns: chiều rộng cột;
}
Ví dụ
Hãy đặt chiều rộng cột cho 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-columns: 50px 100px 200px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Hãy chỉ định chiều rộng cố định bằng pixel cho cột thứ nhất và thứ ba, còn cột thứ hai hãy để 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-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#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-columns
để làm sao cho cột thứ nhất và thứ hai
chiếm một phần của vùng chứa,
còn cột thứ ba - ba phần:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Các giá trị được chỉ định bằng đơn vị fr
có thể ở dạng phân số. Hãy
thay đổi ví dụ trước, chỉ định
chiều rộng cho cột thứ hai và thứ ba
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-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Hãy chỉ định hàm repeat()
trong thuộc tính grid-template-columns,
hàm này sẽ thông báo cho vùng chứa rằng tất cả
ba cột phải có cùng chiều rộng:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Và bây giờ hãy thay đổi ví dụ trước để thêm cột thứ tư vào ba cột giống nhau, cột 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-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Hãy đặt chiều rộng cho hai cột đầu tiên là một phần của vùng chứa, còn hai cột cuối cù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-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Và bây giờ hãy đặt chiều rộng cho các cột
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-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Cũng có thể chỉ định
giá trị auto-fill trong hàm repeat(), giá trị này sẽ lấp đầy
vùng chứa của chúng ta bằng các cột giống nhau với chiều rộng mong muốn:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#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 rộng cột
từ giá trị tối thiểu đến tối đa.
Nếu chiều rộng vùng chứa không chứa được tất cả
các cột, thì một số trong chúng sẽ di chuyển
xuống một dòng mới, đồng thời các cột trong dòng
sẽ được phân bổ đều trong đó. Hãy thay đổi
ví dụ trước, chỉ định hàm minmax trong đó.
Để xem các biến thể bố trí cột khác nhau
hãy thay đổi chiều rộng trang trình duyệt của bạn:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 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 cột cho phù hợp với
chiều rộng có sẵn của vùng chứa, 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-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Ngoài fr còn có thể
sử dụng giá trị bằng %, giá trị này cũng xác định
phần nào của vùng chứa mà cột sẽ chiếm.
Đồng thời, trước tiên kích thước
cột bằng % sẽ được tính toán, 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-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 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à thứ ba sẽ có cùng chiều rộng,
còn mỗi cộ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-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 rộng hai phần, còn cột đầu tiên - 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-rows,
thuộc tính này xác định số lượng và chiều rộng các hàng trong grid -
thuộc tính
grid-auto-columns,
thuộc tính này xác định số lượng và chiều rộng cột trong grid ngầm định
