RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap below:

column-gap - CSS | MDN

<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;
}

Syntax

/* Keyword value */
column-gap: normal;

/* <length> values */
column-gap: 3px;
column-gap: 2.5em;

/* <percentage> value */
column-gap: 3%;

/* Global values */
column-gap: inherit;
column-gap: initial;
column-gap: revert;
column-gap: revert-layer;
column-gap: unset;

The column-gap property is specified as one of the values listed below.

Values

normal: The browser's default spacing is used between columns. For multi-column layout this is specified as 1em. For all other layout types it is 0.
<length>: The size of the gap between columns, defined as a <length>. The <length> property's value must be non-negative.
<percentage>: The size of the gap between columns, defined as a <percentage>. The <percentage> property's value must be non-negative.

Formal definition Initial value normal Applies to multi-column elements, flex containers, grid containers Inherited no Percentages refer to corresponding dimension of the content area Computed value as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements Animation type a length, percentage or calc(); Formal syntax

column-gap = 
  normal                     |
  <length-percentage [0,â]>  <length-percentage> = 

  <length>      |
  <percentage>

Examples Flex layout

In this example, a flex container contains six flex items of two different widths (200px and 300px), creating flex items that are not laid out as a grid. The column-gap property is used to add horizontal space between the adjacent flex items.

HTML

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

CSS

To create a flex container, we set its display property value to flex. We then use the flex-flow shorthand property to set the flex-direction to row (the default) and flex-wrap to wrap, allowing the flex items to flow onto new lines if needed. By default, flex items stretch to be as tall as their container. By setting a height, even the empty flex items will be 100px tall.

To better demonstrate the column-gap property, the flex items in this example have two different width values. The width of the flex items is set within the <div> flex items. We use the flex-basis component of the flex shorthand property to make all the flex items 200px wide. We then target every third flex item by using the :nth-of-type(3n) selector, widening them to 300px.

The column-gap value is set as 20px on the flex container to create a 20px gap between the adjacent flex items in each row.

.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;
}

Result

Note: While there is horizontal space between adjacent flex items in each flex row, there is no space between the rows. To set vertical space between flex rows, you can specify a non-zero value for the row-gap property. The gap shorthand property is also available to set both the row-gap and column-gap in one declaration, in that order.

Grid layout 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;
}

Result Multi-column layout 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;
}

Result Specifications Browser compatibility

Loadingâ¦