column-gap CSS Property – How to Create Gaps between Columns
column-gap specifies the gap sizes between a multi-column, grid, or flexbox container's columns.
note
- A gap is sometimes called a gutter.
1emiscolumn-gap's default value in a multi-column layout module.0iscolumn-gap's default value in a grid and flexbox layout modules.
Example 1: Create a Gap between Two Columns
- CSS
- HTML
article {
column-count: 2;
column-gap: 50px;
}
<article>
Li Europan lingues es membres del sam familie. Lor separat existentie es un
myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li
lingues differe solmen in li grammatica, li pronunciation e li plu commun
vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa
continuar payar custosi traductores. At solmen va esser necessi far uniform
grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li
grammatica del resultant lingue es plu simplic e regulari quam ti del
coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam
li existent Europan lingues. It va esser tam simplic quam Occidental in fact,
it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam
un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es
membres del sam familie. Lor separat existentie es un myth. Por scientie,
musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe
solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos
directe al desirabilite de un nov lingua franca: On refusa continuar payar
custosi traductores. At solmen va esser necessi far uniform grammatica,
pronunciation e plu sommun paroles.
</article>
The snippet above used the column-gap property to create a 50px gap between the <article> element's columns.
Example 2: Create Gaps between Grid Columns
- CSS
- HTML
section {
display: grid;
grid-template-columns: 10% 50% 30%;
column-gap: 5%;
background-color: orange;
margin: 10px;
padding: 7px;
}
div {
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
}
<section>
<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>10</div>
<div>11</div>
<div>12</div>
</section>
The snippet above used the column-gap property to create a 5% gap between the grid container's columns.
Example 3: Create Gaps between Flex Columns
- CSS
- HTML
section {
display: flex;
column-gap: 15px;
background-color: orange;
margin: 10px;
padding: 7px;
}
div {
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
flex-grow: 1;
}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
The snippet above used the column-gap property to create a 15px gap between the flex container's columns.
tip
Use the CSS column-rule property to create lines between your column gaps.
Overview
This article discussed what a CSS column-gap property is. We also used examples to see how it works.