Thuộc tính grid

Thuộc tính grid đại diện cho dạng viết tắt của tất cả các thuộc tính cột và hàng của container lưới. Tất cả giá trị được viết trên một dòng và phân tách bằng 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 duy nhất - thuộc tính rõ ràng (grid-template-rows, grid-template-columns, grid-template-areas) hoặc thuộc tính ngầm định (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.

Cú pháp

phần tử {
	grid: thuộc tính lưới;
}

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: 400px;
	height: 200px;
}

#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Ví dụ

Bây giờ hãy đặt chiều rộng cho hàng thứ hai và thứ ba giống nhau, còn 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: 400px;
	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 rộng bằng hai phân số, còn cột đầu tiên - bằng nửa phân số:

<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: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Xem thêm

thuộc tính grid-template,
thiết lập số lượng và chiều rộng của cột và hàng cho phần tử
thuộc tính grid-template-rows,
thiết lập số lượng và chiều rộng của các hàng trong lưới
thuộc tính grid-template-columns,
thiết lập số lượng và chiều rộng của các cột trong lưới
thuộc tính grid-template-areas,
thiết lập vị trí của các phần tử trong lưới
thuộc tính grid-auto-flow,
thiết lập vị trí tự động của các phần tử trong lưới