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:

html<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>

css#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:

html<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>

css#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):

html<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>

css#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