Đơn vị fr trong CSS Grids

Kích thước của các hàng và cột trong grid có thể được đặt không chỉ bằng px, mà còn bằng đơn vị linh hoạt fr (fraction). Việc sử dụng các đơn vị này có nghĩa là tất cả không gian để sắp xếp các phần tử sẽ được chia thành các phần bằng nhau hoặc các phần. Mỗi phần tử có thể chiếm một phần nhất định của sự phân chia này. Hãy xem cách thực hiện.

Hãy sử dụng thuộc tính grid-template-columns để làm cho cột thứ nhất và thứ hai của grid chiếm một phần của container, và cột thứ ba - ba phần:

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-template-columns: 1fr 1fr 3fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат: