column-gap

Try it

column-gap: 0;

column-gap: 10%;

column-gap: 1em;

column-gap: 20px;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 200px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Cú pháp

/* Giá trị từ khóa */
column-gap: normal;

/* Giá trị <length> */
column-gap: 3px;
column-gap: 2.5em;

/* Giá trị <percentage> */
column-gap: 3%;

/* Giá trị toàn cục */
column-gap: inherit;
column-gap: initial;
column-gap: revert;
column-gap: revert-layer;
column-gap: unset;

Thuộc tính column-gap được chỉ định là một trong các giá trị liệt kê bên dưới.

Giá trị

normal

Khoảng cách mặc định của trình duyệt được sử dụng giữa các cột. Đối với bố cục nhiều cột, giá trị này được chỉ định là 1em. Đối với tất cả các loại bố cục khác, giá trị là 0.

<length>

Kích thước khoảng cách giữa các cột, được định nghĩa dưới dạng <length>. Giá trị của thuộc tính <length> phải không âm.

<percentage>

Kích thước khoảng cách giữa các cột, được định nghĩa dưới dạng <percentage>. Giá trị của thuộc tính <percentage> phải không âm.

Định nghĩa chính thức

Cú pháp chính thức

column-gap = 
  normal                     |
  <length-percentage [0,∞]>  |
  <line-width>               

<length-percentage> = 
  <length>      |
  <percentage>  

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

Ví dụ

Bố cục Flex

Trong ví dụ này, một container flex chứa sáu phần tử flex có hai chiều rộng khác nhau (200px và 300px), tạo ra các phần tử flex không được bố trí như một lưới. Thuộc tính column-gap được sử dụng để thêm khoảng cách ngang giữa các phần tử flex liền kề.

HTML

<div class="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

Để tạo một container flex, chúng ta đặt giá trị thuộc tính display của nó thành flex. Sau đó chúng ta sử dụng thuộc tính viết tắt flex-flow để đặt flex-direction thành row (mặc định) và flex-wrap thành wrap, cho phép các phần tử flex chạy sang dòng mới nếu cần. Theo mặc định, các phần tử flex co giãn theo chiều cao của container. Bằng cách đặt height, ngay cả các phần tử flex rỗng cũng sẽ cao 100px.

Để minh họa rõ hơn thuộc tính column-gap, các phần tử flex trong ví dụ này có hai giá trị chiều rộng khác nhau. Chiều rộng của các phần tử flex được đặt bên trong các phần tử flex <div>. Chúng ta sử dụng thành phần flex-basis của thuộc tính viết tắt flex để làm cho tất cả các phần tử flex rộng 200px. Sau đó chúng ta nhắm vào mỗi phần tử flex thứ ba bằng cách sử dụng bộ chọn :nth-of-type(3n), mở rộng chúng thành 300px.

Giá trị column-gap được đặt là 20px trên container flex để tạo khoảng cách 20px giữa các phần tử flex liền kề trong mỗi hàng.

.flexbox {
  display: flex;
  flex-flow: row wrap;
  height: 100px;
  column-gap: 20px;
}

.flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 200px;
}
div:nth-of-type(3n) {
  flex: 300px;
}

Kết quả

Bố cục Grid

HTML

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  column-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

Kết quả

Bố cục nhiều cột

HTML

<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  `column-gap` property. Don't you think that's fun and exciting? I sure do!
</p>

CSS

.content-box {
  column-count: 3;
  column-gap: 40px;
}

Kết quả

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• row-gap
• gap
• Khái niệm cơ bản về bố cục lưới: gutters
• Tạo kiểu cho các cột